Анимация при прокрутке - это весело. Ее весело создавать и интересно использовать. Если вы устали от начальной загрузки страницы, вы можете скоротать время играя с анимацией прокручивая страницу. Давайте посмотрим как создать анимированную звуковую волну с помощью Skroll.js.
HTML
Во-первых, мы создадим контейнер с несколькими вложенными блоками. Пусть их будет тринадцать.
<div id="soundWave">
<div class="part p1"></div>
<div class="part p2"></div>
<!-- ... -->
<div class="part p13"></div>
</div>
Каждый такой блок представляет собой кусочек нашей звуковой волны.
CSS
Добавим CSS код чтобы спозиционировать нашу звуковую волну в середине страницы и раскрасить каждую ее часть в разные цвета радуги.
.soundWaves {
border-bottom: 1px #222222 solid;
width: 300px;
height: 200px;
position: fixed;
top: 50%;
left: 50%;
margin: -200px 0 0 -150px;
}
.partsContainer {
position: relative;
width: 240px;
height: 200px;
left: 30px;
}
.part {
width: 20px;
height: 1px;
float: left;
}
.p1 {background-color: #4fdc3f;}
.p2 {background-color: #fbe91b;}
.p3 {background-color: #fe9836;}
/* ... */
.p13 {background-color: #ff159b;}

Using float to position our parts won't create a good base for us - we need to tweak the CSS to align everything with the bottom edge of the parent container. Давайте изменим float: left
на position: absolute
.
.part {
width: 20px;
height: 1px;
position: absolute;
bottom: 0;
left: 0;
transform-origin:50% 100%;
-ms-transform-origin:50% 100%; /* IE 9 */
-webkit-transform-origin:50% 100%; /* Chrome, Safari, Opera */
}
Каждый кусочек звуковой волны позиционируется с помощью position:absolute
и bottom: 0
. Это означает, что мы также должны задать смещение влево, иначе все части наложатся друг на друга.
Now when we have them aligned to the bottom edge, changing their scaleY will make them animate up instead of down. Обратите внимание, что мы также включили transform-origin: 50% 100%
. This moves the point from which the scaleY is calculated to the bottom of the element instead of the default center point.
Запуск Skrollr
Мы будем запускать Skrollr добавив следующий код перед закрывающим тегом body:
<script src="js/skrollr.min.js"></script>
<script>
var s = skrollr.init();
</script>
Добавим параметры в data-атрибуты. В нашем примере мы будем использовать абсолютные значения:
<div class="part p1"
data-start="transform: scaleY(1)"
data-1000-start="transform: scaleY(200)"
data-2000-start="transform: scaleY(1)"
anchor-target="body"
></div>
Установив эти атрибуты данных мы создаем анимированные ключевые кадры. data-start
содержит нашу начальное значение, что похоже на наши значения в таблице стилей. data-1000-start
is the scale of the part when the user scrolls 1000 pixels down the page and data-2000-start
is the scale at 2000 pixels scroll top position. Мы хотим создать волну, а это значит, что нам нужно будет добавить такое же приращение к каждой из следующих частей.
<div class="part p2"
data-start="transform: scaleY(1)"
data-1250-start="transform: scaleY(200)"
data-2250-start="transform: scaleY(1)"
anchor-target="body"
></div>
Мы увеличиваем второе и третье значение смещения, которое создает нужный эффект волны. Также мы повторяем те же шаги для всех остальных частей звуковой волны. Обратите внимание, что мы не должны установить высоту вне странице, Skrollr достаточно умен и вычисляет ее для нас автоматически.
На этом все. Смотрите пример и внедряйте)