CSS — это язык, который мы все используем в сети для стилизации веб-сайтов с момента его создания в 1996 году. Сегодня мы можем создавать потрясающие эффекты с помощью CSS, и он становится все более мощным каждый день благодаря введению форм, flex-box и анимации. Это, конечно, верно, за исключением известной шутки о том, что мы можем создавать анимацию, но еще несколько лет назад мы не могли легко центрировать элементы по вертикали (и это все еще верно в некоторых версиях Internet Explorer).
Несмотря на то, что CSS является языком для выполнения определенных задач, с давних пор JavaScript использовался для создания хороших анимаций. Есть даже целые библиотеки JavaScript, посвященные созданию анимации. В этой статье я расскажу об одной из этих библиотек с именем scrollReveal.js.
Что такое scrollReveal.js?
scrollReveal.js — это библиотека, которая позволяет легко выявлять элементы при входе в область просмотра.
Он очень маленький по размеру, так как его вес составляет около 3 КБ, если его минимизировать и сжать. Он не имеет зависимостей, поэтому вам не нужно добавлять другие библиотеки, чтобы использовать его, как jQuery. В дополнение к приятным эффектам, которые он поддерживает, в этой библиотеке мне действительно нравится то, что вы можете использовать естественный язык для определения анимации, которую хотите запустить. Мы вернемся к этой функции через несколько секунд, но сначала я хочу показать вам простой пример того, что эта библиотека может сделать для вас:
Хорошо, не правда ли? И эта демонстрация создана с очень небольшим количеством строк кода. Код для этой демонстрации доступен как JSFiddle .
Теперь, когда я надеюсь, что вы заинтересовались, давайте действовать по порядку.
Начало работы с scrollReveal.js
Чтобы использовать scrollReveal.js на наших веб-страницах, мы должны получить копию библиотеки. Как обычно, это можно сделать, загрузив его из репозитория GitHub , или через Bower с помощью следующей команды:
bower install scrollReveal.js После загрузки необходимо включить библиотеку на страницу, добавив элемент script
<script src="path/to/scrollReveal.min.js"></script>
В случае, если вы загрузили его с помощью Bower, путь должен выглядеть следующим образом:
<script src="bower_components/scrollReveal.js/dist/scrollReveal.min.js"></script>
Имея библиотеку, нам нужно добавить или изменить некоторые элементы, которые библиотека будет анимировать. В частности, scrollReveal.js ищет элементы на странице с атрибутом с именем data-sr Как мы увидим в следующем разделе, вы можете изменить применяемую анимацию, установив значение для этого атрибута, но для его простого использования достаточно иметь атрибут.
Итак, предположим, что у вас есть следующий HTML-код на вашей странице:
<body>
<div data-sr>This is the first div</div>
<div data-sr>This is the second div</div>
<div data-sr>This is yet another div</div>
</body>
С этим простым кодом все, что вам нужно сделать, это добавить следующий код JavaScript:
new scrollReveal();
После этого последнего шага мы готовы открыть страницу. Библиотека выполнит простое отображение всех div Результат этого кода, с небольшим стилем, чтобы быть более приятным, показан ниже и также доступен как JSFiddle :
Давайте теперь посмотрим на некоторые из доступных эффектов.
Конфигурации и эффекты
По умолчанию scrollReveal.js позволяет вашим элементам входить в область просмотра из нижней части страницы, но вы можете изменить этот эффект для каждого элемента, используя ключевое слово enter Таким образом, вы можете написать enter left Вы также можете указать, сколько пикселей необходимо переместить данному элементу, используя ключевое слово movemove 15px Между этими директивами вы можете разместить любой текст, который вам нравится. Например, вы можете определить элемент следующим образом:
<div data-sr="please, can you enter left and then move 15px ?">This is the first div</div>
Пожалуйста, не сходите с ума от этой вещи, потому что вы можете в конечном итоге писать слова между ключевыми словами, получая непредвиденный результат. Например, это определение неверно :
<div data-sr="please, can you enter left and then move of 15px ?">This is the first div</div>
Вы видите слово «of» между «move» и «15px»? Хорошо! Давайте продолжим наше обсуждение.
С scrollReveal.js вы также можете позволить вашим элементам увеличивать или уменьшать заданный процент. Вы можете создать этот эффект, используя ключевое слово scaleupdown
Если вы хотите, чтобы эффект происходил через определенное количество секунд, вы можете использовать ключевое слово wait Пример использования этих двух директив приведен ниже:
<div data-sr="hey bro! wait 2s and then scale up 20% this element">This is another div</div>
Как я уже сказал, вы также можете выполнить базовую анимацию без указания значения для атрибута data-sr Это происходит потому, что в библиотеке есть набор значений по умолчанию для ключевых слов, которые мы обсуждали в этом разделе и не только. Мы также можем изменить эти значения по умолчанию, передав объект конфигурации при вызове scrollReveal() Вот полный список значений по умолчанию, связанных с их свойствами:
defaults: {
enter: 'bottom',
move: '8px',
over: '0.6s',
wait: '0s',
easing: 'ease',
scale: { direction: 'up', power: '5%' },
opacity: 0,
mobile: false,
reset: false,
viewport: window.document.documentElement,
delay: 'once',
vFactor: 0.60,
complete: function( el ) {}
}
В следующем примере мы приведем в действие некоторые свойства объекта конфигурации и ключевые слова, которые я описал в этом разделе. Сначала мы напишем код HTML. Мы определим три div
<div data-sr id="d1">
<h1>I run the default animation</h1>
</div>
<div data-sr="wait 1s and enter bottom" id="d2">
<h1>I have specific values</h1>
</div>
<div data-sr="scale down 10% and then ease-in-out 100px" id="d3">
<h1>I have specific values too</h1>
</div>
Чтобы изменить значения по умолчанию, мы установим объект конфигурации и передадим его scrollReveal()
var config = {
enter: 'right',
wait: '0.5s',
move: '20px'
}
new scrollReveal(config);
Окончательный результат этого кода показан ниже и доступен как JSFiddle :
Вывод
В этой статье мы обсудили scrollReveal.js, небольшую и красивую библиотеку для создания анимации на веб-сайте. Как вы уже видели, использовать эту библиотеку очень просто. Как всегда помните, чтобы не злоупотреблять анимацией, поскольку они могут быстро стать раздражающими и отвлекающими. Пусть ваши пользователи сосредоточатся на вашем контенте, а затем улучшат, где это возможно, свой опыт с помощью приятных эффектов.