Hobo
Последнее бновение - 13 февраля 2023 в 10:13
Анимация маятника на сайте может быть реализована при помощи HTML-разметки и CSS. Здесь приведу два примера, в одном из которых роль маятника выполнит анимированная стрелочка, а в другом — фоновое изображение. И в том, и в другом случае принцип один и тот же.
На этом сайте в декабре, перед Новым годом, я закрепляю веточку с ёлочной игрушкой для создания настроения. Она плавно покачивается, будто от дуновения ветра. Вместо такой веточки, конечно, можно использовать любое подходящее изображение.
Давайте сначала оживим стрелочку. В коде можно играть с настройками, то есть делать стрелку длиннее, короче, менять цвет и так далее. Кроме того легко изменить угол, на который будет отклоняться маятник, и скорость движения.
HTML-разметка выглядит следующим образом. Два вложенных div.
|
1 2 3 |
<div class="pendulum"> <div></div> </div> |
А вот и CSS-код. С первой по 50 строку идёт описание самой стрелки, а с 52 по 63, собственно, её колебания.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
.pendulum { position: relative; width: 290px; height: 50px; margin: 20px; } .pendulum div { position: relative; top: 20px; width: 290px; height: 10px; background-color: #337AB7; box-shadow: 0 3px 5px rgba(0, 0, 0, .2); left:0; display: block; transform: rotate(90deg); } .pendulum div::after { content: ''; position: absolute; width: 40px; height: 10px; top: -11px; right: -8px; background-color: #FF3C41; transform: rotate(45deg); } .pendulum div::before { content: ''; position: absolute; width: 40px; height: 10px; top: 11px; right: -8px; background-color: #FF3C41; box-shadow: 0 3px 5px rgba(0, 0, 0, .2); transform: rotate(-45deg); } @keyframes arrow-1 { 0% { left:0; } 50% { left:10px; } 100% { left:0; } } .pendulum{-webkit-animation-name: rotate; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: linear; -webkit-transform-origin:50% 0%; -webkit-animation-timing-function:ease-in-out;} @-webkit-keyframes rotate { 0% {-webkit-transform: rotate(-20deg);} 50% {-webkit-transform: rotate(20deg);} 100% {-webkit-transform: rotate(-20deg);} } |
Посмотрите DEMO эффекта.
Теперь давайте «раскачаем» веточку. В этом нет ничего сложного.
HTML-разметка вот такая.
|
1 |
<div class="twig"></div> |
CSS-стили в данном случае ещё проще, чем в первом примере. Главное правильно задать путь до изображения. Вместо twig.png используйте своё изображение.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.twig{background-image: url(/img/twig.png); width:31px;height:100px; position:absolute;z-index:1; margin-left:295px;margin-top:79px;} .twig{-webkit-animation-name: rotate; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: linear; -webkit-transform-origin:50% 0%; -webkit-animation-timing-function:ease-in-out;} @-webkit-keyframes rotate { 0% {-webkit-transform: rotate(-20deg);} 50% {-webkit-transform: rotate(20deg);} 100% {-webkit-transform: rotate(-20deg);} } @media screen and (max-width: 600px) { .twig { margin-left:315px; top:1px; } } |
Вот таким нехитрым способом можно оживить маятник на сайте. Кстати, анимированные объекты можно создавать при помощи генераторов CSS анимации. Всем WEB!
И мне пригодилась анимация маятника на сайте. Сделала часовую стрелку на новогоднем циферблате!
Здорово. Рад, что материал оказался полезен.
А как в первом примере изменить скорость раскачивания маятника?
В строке 53 изменить 4S на меньшее значение.