🚀 Мои услуги
Header Image
пр. Мира 620000 Россия +7900-000-00-00
Логотип блога интернет-бродяги

Анимация маятника

Маятник для сайта
Обновлено: 2023-02-13 в 10:13
Актуально на 2025 год
Просмотры: 116

Анимация маятника на сайте может быть реализована при помощи HTML-разметки и CSS. Здесь приведу два примера, в одном из которых роль маятника выполнит анимированная стрелочка, а в другом — фоновое изображение. И в том, и в другом случае принцип один и тот же.

Маятник через фоновое изображение

На этом сайте в декабре, перед Новым годом, я закрепляю веточку с ёлочной игрушкой для создания настроения. Она плавно покачивается, будто от дуновения ветра. Вместо такой веточки, конечно, можно использовать любое подходящее изображение.

Давайте сначала оживим стрелочку. В коде можно играть с настройками, то есть делать стрелку длиннее, короче, менять цвет и так далее. Кроме того легко изменить угол, на который будет отклоняться маятник, и скорость движения.

Анимация маятника

HTML-разметка выглядит следующим образом. Два вложенных div.

А вот и CSS-код. С первой по 50 строку идёт описание самой стрелки, а с 52 по 63, собственно, её колебания.

Посмотрите DEMO эффекта.

Теперь давайте «раскачаем» веточку. В этом нет ничего сложного.

HTML-разметка вот такая.

CSS-стили в данном случае ещё проще, чем в первом примере. Главное правильно задать путь до изображения. Вместо twig.png используйте своё изображение.

Вот таким нехитрым способом можно оживить маятник на сайте. Кстати, анимированные объекты можно создавать при помощи генераторов CSS анимации. Всем WEB!

Если материал оказался полезен и помог решить проблему, можете поддержать автора, направив камеру смартфона на QR-код.
QR-Сбер

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

Рейтинг: 0.0 (Голосов: 0)

Почитайте похожие материалы

Об авторе: Hobo

Занимаюсь созданием и оптимизацией сайтов, о чём и пишу в этом блоге. Иногда делюсь опытом использования различной техники, которая побывала у меня в руках.

4 Comments

  1. Мария:

    И мне пригодилась анимация маятника на сайте. Сделала часовую стрелку на новогоднем циферблате!

    1. Здорово. Рад, что материал оказался полезен.

  2. Вера:

    А как в первом примере изменить скорость раскачивания маятника?

    1. В строке 53 изменить 4S на меньшее значение.

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

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

SQL - 72 | 0,154 сек. | 6.35 МБ