Water Effect

Для создания эффекта Water Effect используется библиотека fullPage.js, которая обеспечивает плавное вертикальное и горизонтальное скроллирование секций. Изначально необходимо подключить CSS и JS файлы библиотеки:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.1.0/fullpage.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.1.0/fullpage.min.js"></script>

После подключения можно инициализировать fullPage.js, указывая ключевые параметры, отвечающие за плавность и анимации:

new fullpage('#fullpage', {
    autoScrolling: true,
    scrollHorizontally: false,
    navigation: true,
    controlArrows: true,
    scrollBar: false,
    responsiveWidth: 768
});

Здесь #fullpage — контейнер всех секций, каждая из которых должна иметь класс .section.

Структура HTML для эффекта Water

Water Effect лучше всего работает с вертикальными секциями, каждая из которых занимает 100% высоты экрана.

<div id="fullpage">
    <div class="section" data-anchor="section1">
        <div class="water-layer"></div>
        <h1>Секция 1</h1>
    </div>
    <div class="section" data-anchor="section2">
        <div class="water-layer"></div>
        <h1>Секция 2</h1>
    </div>
    <div class="section" data-anchor="section3">
        <div class="water-layer"></div>
        <h1>Секция 3</h1>
    </div>
</div>
  • .water-layer — поверхностный слой для имитации водной анимации.
  • data-anchor используется для навигации и ссылок на секции.

Создание эффекта волн с CSS

Эффект воды реализуется через CSS-анимации и псевдоэлементы.

.water-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 20%;
    background: rgba(0, 123, 255, 0.4);
    border-radius: 50%;
    animation: wave 6s infinite linear;
    transform: translateX(-50%);
}

@keyframes wave {
    0% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-10px); }
    100% { transform: translateX(-50%) translateY(0); }
}

.section {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

Ключевые моменты:

  • border-radius: 50% создаёт закруглённую волну.
  • animation задаёт непрерывное движение по вертикали.
  • overflow: hidden предотвращает выход анимации за пределы секции.

Интеграция анимаций с fullPage.js

Для плавной синхронизации анимации воды с прокруткой можно использовать события onLeave и afterLoad:

new fullpage('#fullpage', {
    autoScrolling: true,
    navigation: true,
    onLeave: function(origin, destination, direction){
        const currentSection = origin.item.querySelector('.water-layer');
        const nextSection = destination.item.querySelector('.water-layer');

        currentSection.style.animationPlayState = 'paused';
        nextSection.style.animationPlayState = 'running';
    },
    afterLoad: function(origin, destination, direction){
        const loadedSection = destination.item.querySelector('.water-layer');
        loadedSection.style.animationPlayState = 'running';
    }
});
  • animationPlayState позволяет останавливать и запускать анимацию для каждой секции, создавая ощущение живой воды при переходе.

Дополнительные эффекты: параллакс и прозрачность

Для усиления реализма можно комбинировать Water Effect с параллаксом:

.section h1 {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 3rem;
}

.water-layer::before,
.water-layer::after {
    content: '';
    position: absolute;
    width: 200%;
    height: 20%;
    background: rgba(0, 123, 255, 0.3);
    border-radius: 50%;
    animation: wave 8s infinite linear;
}

.water-layer::after {
    animation-delay: 4s;
}
  • Дублирование слоёв с разной задержкой создаёт многослойный эффект волн.
  • Прозрачность (rgba) обеспечивает плавное смешение с фоном.

Поддержка мобильных устройств

Для корректного отображения на мобильных можно включить адаптивное поведение:

new fullpage('#fullpage', {
    autoScrolling: true,
    navigation: true,
    responsiveWidth: 768,
    scrollBar: true
});
  • responsiveWidth отключает авто-скроллинг на маленьких экранах.
  • Использование scrollBar: true позволяет естественный скролл на мобильных устройствах.

Интерактивные дополнения

Water Effect можно дополнить реакцией на курсор или параллаксом текста:

document.querySelectorAll('.section').forEach(section => {
    section.addEventListener('mousemove', e => {
        const wave = section.querySelector('.water-layer');
        const offset = (e.clientX / window.innerWidth - 0.5) * 20;
        wave.style.transform = `translateX(${offset}%) translateY(-10px)`;
    });
});
  • Реакция слоя на движение мыши создаёт эффект плавающей воды.
  • При желании можно добавить сенсорные события для мобильных (touchmove) для полноценного интерактивного опыта.

Оптимизация производительности

  • Использовать CSS-анимации, а не JS-анимации, чтобы нагрузка на процессор была минимальной.
  • Ограничить количество слоёв воды до 2–3 для плавной работы на слабых устройствах.
  • Для больших сайтов применять lazy-loading секций с эффектом воды по мере прокрутки.
Оглавление