Анимация появления изображения при прокрутке на CSS3 для DLE и WP

Добрый день. Недавно, на просторах интернета обнаружил интересный сервис http://daneden.github.io/animate.css/  Это своего рода генератор анимации CSS3 но простой как двери.

В этой статье я расскажу как сделать анимацию появления изображения новости на CSS3 для DLE и WP при прокрутке страницы.

Все просто как двери 🙂

Шаг 1 Скачайте и подключите эти внешние скрипты и стили  к своему сайту.

Шаг 2. Настройка

По умолчанию скрипт ищет изображения для анимации в блоке с классом .news_item Определите, какой класс присвоен блоку новости с помощью этого инструмента

После того как определили, откройте скрипт imgshow.js и измените .news_item на ваше имя. И про точку в начале не забудьте.

Шаг х. Давай по проще

Без проблем. Откройте скрипт imgshow.js найдите .news_item замените на body. Теперь у Вас тупо все картинки анимируются.

Шаг 3. Как сменить эффект

Открываете http://daneden.github.io/animate.css/ и выбираете анимацию по душе. Запоминаете ее название (его вы выбрали из выпадающего списка) и открываете imgshow.js. Вместо lightSpeedIn пишите название которое выбрали.

 

P.S.: Некоторые плюшки не работают в некоторых браузерах. В таком случае картинки просто будут плавно появляться

P.P.S: Если хотите попробовать освоить HTML/CSS то велкам в мои интерактивные online курсы по html/css

Понравилась статья? Ставь лайк.

Похожие материалы

Обсуждения

Оставьте свой Email И мы обсудим Вашу идею
*P.S.:Не работаю с бюджетами менее чем 600$