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

  Юрий  | 

  |

  Обновл. 16 Сен 2021  | 

 29836

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

Способ №1: Подключение эффекта тряски

Подключение эффектов тряски осуществляется с помощью Download Center. Это отдельная страница сайта разработчика, на которой размещены .css-файлы с каждым эффектом тряски. Вам нужно выбрать понравившийся эффект, затем скачать файл с выбранным эффектом (либо скопировать код в созданный вами .css-файл с названием эффекта) и залить файл в корневую папку шаблона вашего сайта.

Также нужно будет указать путь к данному файлу перед закрывающим тегом </head>:

Примечание: Вместо <?php bloginfo('template_url'); ?> вам нужно указать свой путь к файлу.

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

Готово!

Способ №2: Подключение эффекта тряски


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

Для этого в style.css нужно добавить тот же код из файла csshake-hard.css (который находится в Download Center):

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

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

  -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; — изменяем скорость перехода анимации.

На этом всё! Пробуйте, экспериментируйте!


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

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

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

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