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

  Юрий  | 

    | 

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

 6122

Сегодня рассмотрим, как сделать необычную тряску (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 (10 оценок, среднее: 4,60 из 5)
Загрузка...

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

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