Оформления страницы с текстом в основном не вызывает трудностей для веб-разработчиков, но иногда нужно прибегнуть к методам оживления страницы и привлечения внимания посетителей к изображениям на сайте, в данном уроке этим мы и планируем заняться. Мы хотим реализовать анимированое появления изображений при скроллинге страницы, в данном случае, чтобы они подлетали к указанному месту в тексте с плавной анимацией. Когда пользователь прокручивает страницу картинки с анимацией будут становиться на свои места.

 

Такой эффект станет весьма популярным для блогов, ведь LazyLoad не только ускоряет загрузку станицы но и оживляет страницу простой анимацией. Давайте же приступим к процедуре создания данного эффекта.

Шаг 1. HTML

Текст у нас не играет особой роли на странице демонстрации, по этому мы сделали штатный текст заполнения. Вам стоит обратить внимание на изображение и его класс:

У нас будет два разных класса align-left slide-in служит для изображений, которые появляются слева на право, align-right slide-in для изображений с права налево.

Шаг 2. CSS

Теперь нам необходимо задать базовые стили, так как стилей у нас не много, мы указывает только общие параметры для изображений которые появляются слева:

и для изображений которые появляются справа:

Прочее стили необходимы для демонстрации, по этому мы их не приводим к демонстрации в уроке.

Шаг 3. JS

Теперь нам необходимо указать функции для анимации и установки изображений, для этого нам понадобиться немного магии и js.

В результате мы получили замечательный эффект для изображений сайта, который станет приятным дополнением к вашему ресурсу и поможет оживить его.

Вот и все. Готово!

Читайте также: