шрифт

    Мы всегда

    вы потом

    для чего

    поптму

    <!DOCTYPE html>
    <html lang="ru">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Движущийся фон с фотографиями</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            
            body {
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                color: #fff;
                overflow-x: hidden;
                min-height: 100vh;
                background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            }
            
            .container {
                max-width: 1200px;
                margin: 0 auto;
                padding: 20px;
                position: relative;
                z-index: 10;
            }
            
            header {
                text-align: center;
                padding: 40px 0;
                margin-bottom: 30px;
            }
            
            h1 {
                font-size: 3rem;
                margin-bottom: 10px;
                text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
                background: linear-gradient(90deg, #4cc9f0, #4361ee);
                -webkit-background-clip: text;
                background-clip: text;
                color: transparent;
            }
            
            .subtitle {
                font-size: 1.2rem;
                color: #b8c1ec;
                max-width: 600px;
                margin: 0 auto;
            }
            
            /* Контейнер для движущегося фона */
            .moving-background {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 1;
                overflow: hidden;
            }
            
            /* Слой с фотографиями для фона */
            .photo-layer {
                position: absolute;
                width: 100%;
                height: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
                align-items: center;
                opacity: 0.7;
            }
            
            /* Отдельные фотографии в фоне */
            .bg-photo {
                width: 300px;
                height: 200px;
                border-radius: 10px;
                overflow: hidden;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
                position: relative;
                transition: transform 0.3s ease;
            }
            
            .bg-photo:hover {
                transform: scale(1.05);
                z-index: 5;
            }
            
            .bg-photo img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            
            /* Разные направления движения */
            .layer-1 {
                animation: move-diagonal 40s linear infinite;
            }
            
            .layer-2 {
                animation: move-horizontal 50s linear infinite reverse;
            }
            
            .layer-3 {
                animation: move-vertical 60s linear infinite;
            }
            
            /* Анимации движения */
            @keyframes move-diagonal {
                0% {
                    transform: translate(0, 0);
                }
                100% {
                    transform: translate(100px, 100px);
                }
            }
            
            @keyframes move-horizontal {
                0% {
                    transform: translateX(0);
                }
                100% {
                    transform: translateX(-200px);
                }
            }
            
            @keyframes move-vertical {
                0% {
                    transform: translateY(0);
                }
                100% {
                    transform: translateY(150px);
                }
            }
            
            /* Контент поверх фона */
            .content {
                background-color: rgba(25, 25, 50, 0.8);
                border-radius: 15px;
                padding: 30px;
                margin-top: 30px;
                backdrop-filter: blur(5px);
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            }
            
            .content h2 {
                margin-bottom: 20px;
                color: #4cc9f0;
            }
            
            .content p {
                line-height: 1.6;
                margin-bottom: 15px;
                color: #e2e8f0;
            }
            
            .controls {
                display: flex;
                justify-content: center;
                gap: 20px;
                margin-top: 30px;
                flex-wrap: wrap;
            }
            
            button {
                background: linear-gradient(90deg, #4361ee, #3a0ca3);
                color: white;
                border: none;
                padding: 12px 24px;
                border-radius: 50px;
                cursor: pointer;
                font-size: 1rem;
                transition: all 0.3s ease;
                box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
            }
            
            button:hover {
                transform: translateY(-3px);
                box-shadow: 0 6px 20px rgba(67, 97, 238, 0.5);
            }
            
            button:active {
                transform: translateY(0);
            }
            
            .speed-control {
                display: flex;
                align-items: center;
                gap: 10px;
                background: rgba(25, 25, 50, 0.7);
                padding: 10px 20px;
                border-radius: 50px;
            }
            
            .speed-control label {
                color: #b8c1ec;
            }
            
            input[type="range"] {
                width: 150px;
            }
            
            footer {
                text-align: center;
                padding: 30px 0;
                margin-top: 50px;
                color: #94a3b8;
                font-size: 0.9rem;
            }
            
            /* Адаптивность */
            @media (max-width: 768px) {
                h1 {
                    font-size: 2.2rem;
                }
                
                .bg-photo {
                    width: 200px;
                    height: 140px;
                }
                
                .controls {
                    flex-direction: column;
                    align-items: center;
                }
                
                .speed-control {
                    width: 100%;
                    justify-content: center;
                }
            }
        </style>
    </head>
    <body>
        <!-- Контейнер для движущегося фона -->
        <div class="moving-background">
            <!-- Первый слой фотографий -->
            <div class="photo-layer layer-1" id="layer1"></div>
            
            <!-- Второй слой фотографий -->
            <div class="photo-layer layer-2" id="layer2"></div>
            
            <!-- Третий слой фотографий -->
            <div class="photo-layer layer-3" id="layer3"></div>
        </div>
        
        <div class="container">
            <header>
                <h1>Движущийся фото-фон</h1>
                <p class="subtitle">Фотографии плавно перемещаются на фоне, создавая эффект движения. Вы можете контролировать скорость анимации с помощью панели управления.</p>
            </header>
            
            <div class="content">
                <h2>Как это работает</h2>
                <p>Этот эффект создается с помощью нескольких слоев фотографий, которые движутся с разной скоростью и в разных направлениях. Такой подход создает эффект глубины и динамики.</p>
                <p>Каждый слой содержит набор фотографий, которые анимированы с помощью CSS. Вы можете контролировать скорость движения всех слоев одновременно с помощью ползунка ниже.</p>
                <p>При наведении курсора на любую фотографию в фоне, она увеличивается, позволяя рассмотреть ее подробнее.</p>
            </div>
            
            <div class="controls">
                <button id="pauseBtn">Приостановить анимацию</button>
                <button id="resumeBtn">Возобновить анимацию</button>
                
                <div class="speed-control">
                    <label for="speedControl">Скорость анимации:</label>
                    <input type="range" id="speedControl" min="0.1" max="3" step="0.1" value="1">
                    <span id="speedValue">1x</span>
                </div>
            </div>
            
            <footer>
                <p>Демонстрация движущегося фона с фотографиями | Создано с помощью HTML, CSS и JavaScript</p>
            </footer>
        </div>

    Для повышения удобства сайта мы используем cookies. Оставаясь на сайте, вы соглашаетесь с политикой их применения