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

   ⁄ 

 Обновлено 17 Апр 2017

  ⁄   

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

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

На этом всё. Если остались вопросы — пишите в комментарии 🙂

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

Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (2 оценок, среднее: 5,00 из 5)
Загрузка...
Поделиться в:
Подписаться на обновления:

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

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