Анимированная подгрузка элементов страницы RUDEBOXВ данном уроке мы рассмотрим как создать интересный эффект, а именно анимированную подгрузку элементов страницы для сайта с помощью javascript. Данная прокрутка будет напоминать скроллинг от интернет-гиганта Google. В чем же заключается идея спросите Вы, идея состоит в том, что у нас на странице есть блоки, в которых есть тестовая информация, по желанию можно разместить и мультимедийную, при прокрутке которой происходит сдвижение блоков, кроме этого есть подсказки выделенные синим блоком, при наведении курсора они также будут разворачиваться.

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

Шаг 1. HTML

Мы будем использовать множество повторяющихся блоков, чтобы создать древо последовательных столбцов, которые будут прогружаться анимированно. У нас будут артикул, в котором будет включены классы и спаны для каждого элемента столбца:

Класс bar-flip у нас будет отвечать за отображение подсказки, класс pad будет выводить сам текст в блоке. Остальные вызывают сам контейнер, окантовку, и анимацию для нашего элемента.

Анимированная подгрузка элементов страницы RUDEBOX

Шаг 2. CSS

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

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

Шаг 3. JS

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

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

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

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

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