Делаем крутой эффект тряски элементов на сайте. CSS Shake

  Юрий  | 

  Обновл. 31 Июл 2019  | 

 7495

Курс по "C#.NET Developer"

Сегодня рассмотрим, как сделать необычную тряску (shake) любых элементов на вашем сайте без использования плагинов Jquery, на чистом CSS. Смотрится эффектно, делается легко, есть разные виды тряски, одним словом — ништяк. Этот эффект придумал зарубежный вебмастер, вот его landing page с демо. Рассмотрим как это всё дело подключить к себе на сайт.

Способ №1

Подключаем эффекты с помощью Download Center. В нём размещены отдельные файлы .css с каждым эффектом. Вам нужно:

  выбрать понравившийся эффект;

  скачать файл (либо скопировать код в созданный файл .css с названием эффекта);

  залить файл в корневую папку вашего шаблона (wp-content > themes > название вашего шаблона).

Прописать перед закрывающим тегом </head> путь к вашему файлу:

Выбрать любой div, li, a или другой объект, к которому хотите применить эффект, и добавить к нему class с названием эффекта. Например:

Готово!

Способ №2


Можно не подключать отдельный файл .css, а вставить код напрямую в style.css. Например, добавим  эффект shake-hard к ссылкам следующего списка:

Для этого в style.css нужно вставить тот же код с файла csshake-hard.css, что находится в Download Center:

И добавить class="shake-hard" к ссылкам:

Готово! Если эффект не будет отображаться в вашем браузере, то попробуйте добавить к правилу @keyframes (в css коде) следующие приставки:

  -webkit- для Google Chrome, Safari;

  -moz- для Mozilla;

  -o- для Opera.

Например:

Способ №3: Делаем сами

Если вы не хотите подключать файлы или хотите сократить количество кода, то можно попробовать самим создать этот эффект на чистом CSS. Кода при этом будет в два раза меньше.

Как вы уже могли бы заметить, в коде каждого эффекта меняются только px (пиксели) и deg (градусы) для % (процентов). Также, с каждой новой строкой, добавляется 2% (смотрите выше). Мы можем легко сократить этот код. Например, минимизируем код эффекта shake:

Здесь мы увеличивали каждую строку не на 2%, а на 10% + немножко изменили px и deg. Вставьте этот код в style.css и добавьте к любому элементу на сайте class="shake". Появится тряска.

Теперь разберемся, что за что отвечает:

  transform: translate(2px 1px); — сдвигаем элемент на 2 пикселя по горизонтали и на 1 пиксель по вертикали;

  rotate(1deg); — поворачиваем элемент на 1 градус;

  animation-name: shake; — название эффекта, который добавляем;

  animation-duration: 0.8s; — указываем скорость тряски в секундах или миллисекундах;

  transform-origin: 50% 50%; — изменяем положение элементов в тряске;

  animation-iteration-count: infinite; — делаем тряску бесконечной (только при наведении курсора);

  animation-timing-function: linear; — изменяем скорость перехода анимации (например, ease-in или ease-out, или linear и т.д.).

Если немного поиграться, покопировать deg и px с разных файлов в Download Center, то можно сделать любой эффект, даже какой-то новый, при этом кода будет в два раза меньше.


Оценить статью:

Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (11 оценок, среднее: 4,27 из 5)
Загрузка...

Добавить комментарий

Ваш E-mail не будет опубликован. Обязательные поля помечены *