В данной подборке собраны самые лучшие и качественные CSS фишки. Тут Вы сможете встретить различные и удивительные демо примеры и техники от знаменитых верстальщиков и дизайнеров, которые стараются доказать, что сейчас возможно сделать практически всё только на чистом CSS. Так же Вы тут сможете встретить несколько уроков в которых подробно рассказывается как сделать подобное творение. Надеюсь, что эта подборка окажется Вам полезной.
CSS 3D облакаВ этом демо Вы сможете создавать и редактировать причудливые облака в 3D. Данные облака на CSS дают понять нам, что возможности веб технологий практически безграничны.
Это примеры логотипов сделанных только на чистом CSS. Вы только вдумайтесь, при создании не использовались изображения. Это просто нечто.
Отличный и художественный пример использования CSS в алфавите
Простая но очень стильная панель навигации для сайта, конечно же сделанная с помощью только CSS3. никаких изображений и скриптов.
Один из многочисленных дудлов от поисковика Google, сделанный на CSS. Это отличный пример качественного использования CSS анимации
Хорошо и качественно сделанный слайдер для картинок. Плюс 4 примера в демо.
Красивое оанимационное и разноцветное кольцо с не сильно большим кодом CSS
Мне кажется очень нужный фильтр, тем более он сделан на чистом CSS. с помощью размытия можно привлечь внимание пользователя к определённой точке.
Данная статья о адаптивных блоках Flexbox. В ней рассказывается полностью о данных блоках, правда статья на Английском.
Красивое выпадающее меню для сайта с иконками. Огромным плюсом является то, что оно сделано полностью на CSS.
Качественный материал на Английском, в котором рассказывается о применении CSS фильтров на изображения.
Пост о CSS формах с многочисленными примерами
Урок о том как создать стильные прогресс бары на чистом CSS и с анимацией. Также Вы можете посмотреть пример и скачать исходники.
Самый популярный проект CSS анимации в интернете на сегодняшний день. И наверное самый простой и качественный, и к тому же бесплатный.
Самый простой пример использования данной комбинации Вы можете наблюдать чуть ниже на этой странице. Самое интересное то, что эта красота (анимация при скроллинге) работает БЕЗ jQuery . Получается, что для данного скрипта открыты все двери...И как пример, скрольте вниз...Смелее...
С уверенностью могу Вам сказать, что сейчас анимация при скроллинге становится ОЧЕНЬ популярной, и данный эффект Вы можете часто встретить на продающих сайтах успешных интернет предпринимателей. Подобные «трюки» ОЧЕНЬ оживляют сайты, а также помогают сфокусировать внимание посетителя на тех важных моментах, которые Вы хотите, чтобы были замечены первым делом.
Анимация при скроллинге: комбинация«WOW.js » и «Animate.css »
на WordPress...
* чтобы повторить анимацию, перезагрузите страницу.
Как настроить?ШАГ 1
Для начала скачайте эти два файла («WOW.js» и «Animate.css»)
ОБНОВЛЕНО
(25.июль.2019):
wow.min.js v1.2.1
| animate.min.css v3.7.2
ШАГ 2
Помещаем папку «wow-animation» в корневую папку сайта. Конечно, Вы можете поместить ее в любое место, главное, чтобы путь к файлам Вы указали правильный. Желательно все же поместить эту папку в корневую папку: index.html. Если это WordPress, то поместите папку куда хотите. (главное — указать правильный путь к ней).
ШАГ 3
Помещаем в эту строку:
* Естественно, указываем правильный путь к файлу. Если устанавливаете на WordPress, то рекомендую указывать полный путь, т.е. начиная с httpS://ВашДомен и т.д. Чтобы проверить, правильно ли Вы подключили файл - скопируйте URL, введите в адресную строку и нажмите «Enter». Если откроется файл с непонятным кодом, значит все ок 🙂
ШАГ 4
Помещаем в самый низ страницы перед эти строки:
* Тоже укажите правильный путь к файлу и проверьте в браузере.
Определенная информацияШАГ 6
Продвинутые настройки. Добавляем функции:
data-wow-duration
: Меняем продолжительность анимации;
data-wow-delay
: Задержка перед началом анимации;
data-wow-offset
: Расстояние до запуска анимации (относительно нижней части окна браузера);
data-wow-iteration
: Повторяем анимацию «столько-то
раз».
У многих посетителей возник вопрос, как же на практике применять библиотеку Animate.css. В действительности всё происходит достаточно просто, надо лишь один раз пройти все этапы, а потом по аналогии повторять некоторые действия.
1. Для начала следует скачать и подключить библиотеку. Есть три варианта.
- Полная версия . Содержит более трёх тысяч строк кода объёмом около 60 кБ. Она хорошо подходит на первом этапе ознакомления с анимацией в целом, поскольку позволяет взглянуть, как это всё устроено.
- Упакованная версия (обфусцированная, говоря профессиональным языком). В css-файле нет табуляции, пробелов и переносов строк. Объём файла за счёт этого сокращается раза в полтора, но читать код при этом становится затруднительно.
- Выборочные эффекты . Лучше всего подходит для большинства задач, поскольку позволяет указать только понравившиеся эффекты, избавившись от лишнего.
2. Чтобы применить эффект анимации к желаемому элементу, добавляем к нему два класса - animated и класс с названием эффекта, допустим fadeInDown (список всех эффектов и их названия смотрим ). Например, вы желаете добавить мерцание ко всем изображениям на странице. В HTML записываем следующее:
Если на сайте используется jQuery, то добавление классов упрощается и делается через JavaScript.
$(document).ready(function() { $("img").addClass("animated flash"); })
3. Сама анимация включается автоматически при загрузке страницы. Это удобно для всплывающих сообщений, призванных привлечь внимание пользователя (пример 1).
Пример 1. Всплывающее сообщение
Предупреждение .warning { background: #fc0; padding: 10px; border: 1px solid #000; } Зенитное часовое число оценивает экваториальный секстант!
Чтобы эффект срабатывал при наведении на элемент курсора мыши, придётся использовать JavaScript. В качестве примера рассмотрим картинки, которые двигаются при наведении на них курсора мыши. К тегу
добавляем класс animated
и подключаем jQuery (пример 2).
Пример 2. Галерея
Галерея
$(document).ready(function() {
$("img.animated").hover(function() {
$(this).addClass("bounce"); // Добавляем класс bounce
},
function() {
$(this).removeClass("bounce"); // Убираем класс
})})
В данном примере при наведении курсора на изображение с классом animated добавляется ещё один класс bounce ; если курсор убрать, то класс bounce также убирается.
4. Окончательно можно настроить анимацию по своему вкусу, изменив скорость анимации, а также задав время задержки через CSS. И то и другое не обязательно и применяется при необходимости.
Animated { -webkit-animation-duration: .6s; -o-animation-duration: .6s; -moz-animation-duration: .6s; animation-duration: .6s; -webkit-animation-delay: 1s; -o-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s; }
В этой статье мы продолжим изучать нюансы применения анимации, изучим такие возможности CSS как приостановка анимации , направление анимации , рассмотрим как указать стиль для элемента, когда анимация не воспроизводится , разберем как грамотно применять универсальное свойство для создания анимации, подключим и научимся использовать библиотеку Animate.css .
Обращаю Ваше внимание на то, что для изучения этого материала Вам понадобятся знания, которые необходимо получить в предыдущей статье " ".
Состояние анимацииСледующее простое свойство, которое мы рассмотрим animation-play-state , оно определяет состояние анимации. Этому свойству передается одно из двух возможных ключевых слов:
- running - анимация воспроизводится (значение по умолчанию).
- paused - анимация приостановлена.
В этом примере мы создали простую анимацию, в которой с помощью CSS свойства left смещаем элемент с относительным позиционированием относительно левого края текущей позиции.
При наведении на элемент курсора мыши (псевдокласс :hover()) анимация приостанавливается за счет установки значения paused свойству animation-play-state , анимация возобновляется, когда курсор покидает элемент.
Результат нашего примера:
Направление анимацииС использованием универсального свойства animation мы указали следующие параметры анимации:
- Имя анимации - iliketomoveit .
- Длительность анимации - 4 секунды .
- Кривая скорости - шаговая анимация steps(3,start) . На каждую часть ключевого кадра будет произведено 3 шага .
- Задержка анимации - 500 миллисекунд .
- Количество циклов - infinite (бесконечно).
- Направление анимации - reverse (в обратном направлении).
Результат нашего примера:
Рассмотрим следующий пример в котором
Анимация загрузки на CSS body { margin : 0 ; /* внешние отступы */ padding : 0 ; /* внутренние отступы */ } .container { width : 100px ; /* ширина элемента */ padding-top : 100px ; /* внутренние отступы сверху */ margin : 0 auto ; /* центрируем элемент внешними отсутупами */ } div > div { display : inline-block ; /* устанавливаем вложенные элементы как блочно-строчные (выстраиваем в линейку) */ width : 10px ; /* ширина элемента */ height : 10px ; /* высота элемента */ margin : 0 auto ; /* центрируем элементы внешними отсутупами */ border-radius : 50px ; /* определяем форму углов */ } .item:nth-child(1) { background : orange ; /* цвет заднего фона */ animation : up 1s linear 1s infinite ; } .item:nth-child(2) { background : violet ; /* цвет заднего фона */ animation : up 1s linear 1.2s infinite ; /* name duration timing-function delay iteration-count */ } .item:nth-child(3) { background : magenta ; /* цвет заднего фона */ animation : up 1s linear 1.4s infinite ; /* name duration timing-function delay iteration-count */ } .item:nth-child(4) { background : lightseagreen ; /* цвет заднего фона */ animation : up 1s linear 1.6s infinite ; /* name duration timing-function delay iteration-count */ } .item:nth-child(5) { background : forestgreen ; /* цвет заднего фона */ animation : up 1s linear 1.8s infinite ; /* name duration timing-function delay iteration-count */ } @keyframes up { 0%, 100% { /* начало и конец цикла анимации */ transform : translateY(-15px) ; /* сдвиг элемента по оси Y */ } 50% { /* середина анимации */ transform : translate(5px, 0) ; /* сдвиг элемента на 5px по оси X, по оси Y сдвиг отсутствует */ } }В этом примере мы создали несколько анимаций, в которых с помощью свойства происходит сдвиг вложенных элементов по оси X (горизонтальная ось) и по оси Y (вертикальная ось). Для каждого элемента была установлена различная задержка анимации, составляющая от 1 секунды до 1,8 секунды. Каждая анимация элементов содержит следующие параметры:
- Имя анимации - up .
- Длительность анимации - 1 секунда .
- Кривая скорости - linear (одинаковая скорость на протяжении всей анимации).
- Задержка анимации - от 1 секунды до 1,8 секунды .
- Количество циклов - infinite (бесконечно).
Давайте рассмотрим простую анимацию из библиотеки, которая измененяет прозрачность элемента:
@keyframes fadeIn { from { /* начало цикла анимации (аналогично 0%) */ opacity : 0 ; /* элемент полностью прозрачный */ } to { /* конец цикла анимации (аналогично 100%) */ opacity : 1 ; /* элемент непрозрачный */ } } .fadeIn { animation-name : fadeIn ; /* имя анимации (соответствует имени в правиле @keyframes) */ }Эти ключевые кадры с помощью свойства позволяют изменить прозрачность элемента с полностью прозрачного до непрозрачного состояния.
Но этого пока недостаточно, чтобы запустить интересующую Вас анимацию библиотеки Animate.css . Для того, чтобы запустить анимацию Вы можете, но не обязаны, воспользоваться следующими созданными автором проекта классами:
/* базовый класс, который позволяет запустить анимацию один цикл */ .animated { animation-duration : 1s ; /* продолжительность анимации 1 секунда */ animation-fill-mode : both ; /* задает стиль для элемента, когда анимация не воспроизводится (как только анимация будет завершена и перед тем как она будет запущена - во время задержки).*/ } /* добавление класса.infinite элементу, которому установлен класс.animated позволит бесконечно проигрывать анимацию */ .animated.infinite { animation-iteration-count : infinite ; /* анимация будет проигрываться бесконечно */ }Обращаю Ваше внимание, что вы можете создать свои классы, которые будут контролировать процесс анимации. Как правило, добавление классов тому, или иному элементу происходит с использованием языка JavaScript в зависимости от действий пользователя, или каких-то определенных событий. Мы с Вами рассмотрим пример в котором будем использовать только классы из библиотеки Animate.css и установим анимацию только с использованием каскадных таблиц стилей.
Перейдем к рассмотрению примера:
Анимация с использованием библиотеки Animate.CSSВ этом примере мы подключили с использованием тега библиотеку Animate.css и разместили изображение, к которому подключили (указали через пробел) следующие 3 класса из библиотеки.
Сегодня мы будем учиться анимировать объекты сайта легко и быстро, при помощи двух скриптов. Название которых вы можете наблюдать выше, в заголовке этой статьи. Но в начале, давайте я вам расскажу, для чего нужен каждый из них.
WOW.js – это маленькая библиотека, которая позволяет включать анимацию на определенном этапе прокрутки страницы. Весит очень мало, и к тому же полностью самостоятельна – то есть нет необходимости подключать jQuery или других монстров.
Animate.CSS – скрипт, который непосредственно отвечает за саму анимацию. По сути wow.js берет анимации именно из этой штуки. А там их несколько десятков.
Недостаток animate.css заключается в том, что это всего лишь обычный набор CSS-правил завязанных на анимации. То есть они проигрываются сразу после загрузки страницы. И если анимируемые элементы не видны на "первом" экране, то всю эту красоту посетители просто не увидят. Ведь она проиграется еще до того, как они перемотают страницу к нужному месту.
И в первой заметке (ссылка в следующем абзаце), что бы этого не происходило, я показывал вам, как и где прописывать js-коды, что бы анимация проигрывалась на определенном этапе скролла страницы. Это было крайне неудобно, однако работало на ура
Поэтому, перед тем как начать, советую посмотреть урок “ ”. Так как я уже буду подразумевать, что вы умеете пользоваться анимацией на сайте. Заодно вы сразу поймете, насколько wow.js облегчает работу . Ведь теперь нам не надо будет писать и копаться в js-коде. Подключил и забыл
И так, с введением покончено. Теперь давайте ближе к "телу". Я записал видео-урок по этой теме, однако перед просмотром, хочу показать то, что получится у вас, если пройдете урок до конца на практике. Так сказать, для большей мотивации
Ну что, посмотрели? Вот это вы "забабахаете" собственными руками. Поэтому сейчас бегом смотреть видео.
Урок: WOW.js и Animate.CSS - вместе веселее!Дерзайте!
Настройка WOW.js Как скачать и подключить.1 шаг. Скачать скрипты wow.js и animate.css с официальных сайтов (ссылки смотрите выше под видео) и разместить их в папке своего проекта.
2 шаг. Подключаем скрипты простым HTML кодом на странице в теге :
Примечание от подписчика канала Master-CSS:
Тег script необходимо всегда добавлять в конец body. Это делается для быстроты загрузки страницы. Каждый раз, когда браузер доходит до тега script, загрузка и рендеринг всего сайта замораживается, пока скрипт не будет загружен. От этого зачастую мы видим сайты, которые долгое время просто белый лист. А так же, если скрипт размещён в конце body, у вас есть гарантия что body - ready и скрипт точно отработает.Спасибо Роману Беляеву за подробные объяснения в подключении скриптов на сайте.
Шаг 3. Необходимо инициализировать скрипт добавив вот такой код, сразу после его подключения:
new WOW().init();
На этом подключение заканчивается, и настает пора второго этапа.
Использование WOW.jsШаг 1. Выбираем элемент, который хотим анимировать и добавляем ему класс class="wow" . В коде ниже, я показал это на примере картинки:
Шаг 2. Выбираем анимацию, и добавляем её дополнительным классом к нашей собачке:
Шаг 3. Добавляем настройки для анимации если надо, при помощи специальных data-атрибутов:
В коде выше я указал, что анимация должна срабатывать, когда картинка пройдет 200 пикселей от низа экрана. Но при этом у нее будет задержка в пол секунды, а сама анимация будет занимать по времени ровно 2 секунды.
Настройки WOW.js анимации через атрибуты data-wow-duration – указываем время проигрывания анимации data-wow-delay – ставим задержку перед проигрыванием анимации data-wow-offset – включение анимации, когда элемент проходит определнное количество пикселей от низа экрана data-wow-iteration – количество повторов анимацииОбращаю ваше внимание на то, что эти атрибуты не обязательные. Если вы их не укажете, анимация будет просто проигрываться по умолчанию, как только элемент появится на экране при прокрутке окна браузера.
Ну что же ребята. На этом пожалуй все. Если будут вопросы – задавайте в комментариях;)
