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

   ⁄ 

 Обновлено 2 Мар 2018  ⁄ 

⁄   1543

Сегодня рассмотрим, как сделать необычную тряску (shake) любых элементов на вашем сайте без использования плагинов Jquery, на чистом CSS. Посмотреть этот эффект в действии вы можете на моем блоге, наведя курсор на список ТОП статей в сайдбаре. Смотрится эффектно, делается легко, есть разные виды тряски, одним словом – ништяк.

Этот эффект придумал зарубежный вебмастер, вот его landing page с демо. Рассмотрим как это всё дело подключить к себе на сайт.

Первый способ

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

Вам нужно:

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

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



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

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

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

Готово!

Второй способ

Можно не подключать отдельный файл .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.

Например:

Третий способ. Создаем сами

Если вы не хотите подключать файлы или хотите сократить количество кода, то можно попробовать самим создать этот эффект на чистом 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 (6 оценок, среднее: 4,33 из 5)
Загрузка...
Подписаться на обновления:

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

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

ПОДПИСЫВАЙТЕСЬ

НА КАНАЛ RAVESLI В TELEGRAM

@ravesli

ПОДПИСАТЬСЯ БЕСПЛАТНО