Для реализации данной анимации нужно:
1. Облака:
2. CSS:
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 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
.cloud { overflow: hidden; position: relative; width:100%; padding-bottom: 56.25%; height: 0; background: url(mountain.jpg); background-size: cover; } .cloudcontent { position: relative; padding:30px; color: #337AB7; font-size:22px; font-weight:bold; z-index:100; } .cloud img { width: 100%; left: 0; top: 0; position: absolute; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; } @-webkit-keyframes animCloud { from { -webkit-transform: translateX(100%) } to { -webkit-transform: translateX(-100%) } } @-moz-keyframes animCloud { from { -moz-transform: translateX(100%) } to { -moz-transform: translateX(-100%) } } @keyframes animCloud { from { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%) } to { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%) } } .cloud1 { -webkit-animation: animCloud 20s infinite linear; -moz-animation: animCloud 20s infinite linear; animation: animCloud 20s infinite linear } .cloud2 { -webkit-animation: animCloud 40s infinite linear; -moz-animation: animCloud 40s infinite linear; animation: animCloud 40s infinite linear } .cloud3 { -webkit-animation: animCloud 60s infinite linear; -moz-animation: animCloud 60s infinite linear; animation: animCloud 60s infinite linear } .cloud4 { -webkit-animation: animCloud 80s infinite linear; -moz-animation: animCloud 80s infinite linear; animation: animCloud 80s infinite linear } |
Класс .cloud отвечает за сам блок и его размеры, а .cloudcontent за информацию на нем.
3. HTML:
1 2 3 4 5 6 7 8 9 |
<div class="cloud"> <div class="cloudcontent"> Текст на фоне </div> <img src="cloud-01.png" alt="" class="cloud1"> <img src="cloud-02.png" alt="" class="cloud2"> <img src="cloud-03.png" alt="" class="cloud3"> <img src="cloud-04.png" alt="" class="cloud4"> </div> |
4. Результат:
Текст на фоне




Здравствуйте. Чет не могу понять почему не работает, облака - просто картинки без движения?
Сами облака да, а анимация происходит на CSS
Alexander куда вставлять ваш кодCSS в HTML на Вlogger чтоб всё задвигалось как у вас? Скрипт с облаками добавил в дизайн HTML/JavaScript, а дальше всё...
Тут нет JavaScript, нужно вставить HTML туда где будут облака (ваша секция), а CSS, куда это разрешает Вlogger (пользовательские стили , в туже секцию тегом style или как то иначе это может называться).
Я не знаком вообще с конструкторами и платформами такими, я не знаю как с ними работать .
А как убрать разрыв между циклами анимации?
Анимация повторяется бесконечно через заданный промежуток времени.
Циклы всегда будут, только они меняются за пределом видимой области. Лично я разрывов не наблюдаю (дерганий, как иногда бывает, когда анимация начинается сначала)
где можно взят фоновую картинку
Например, в Яндексе 🙂
А если по лицензиям, то можно на pixabay.com
Очень красиво
крутяк слов нет
а как height настроить, и как в облака размеры уменьшить?
По поводу высоты, класс
.cloud
, убрать:padding-bottom: 56.25%;
height: 0;
position: relative;
И поставить нужную высоту.
Если ширина не 100%, то и ее.
Облака уменьшить, это класс
.cloud img
, убратьwidth: 100%;
и для каждого облака добавить размеры.Чтобы облако летало правильно в keyframes вместо transform поставить left
@keyframes animCloud {
from {
left: 100%
}
to {
left: минус ширина облака
}
}
А как можно сделать чтобы облака начали двигаться только при наведении на блок?
Заменить последние 4 класса (cloud1 - cloud4) на:
.cloud1,
.cloud2,
.cloud3,
.cloud4 {
transform: translateX(100%)
}
.cloud:hover .cloud1 {
-webkit-animation: animCloud 20s infinite linear;
-moz-animation: animCloud 20s infinite linear;
animation: animCloud 20s infinite linear
}
.cloud:hover .cloud2 {
-webkit-animation: animCloud 40s infinite linear;
-moz-animation: animCloud 40s infinite linear;
animation: animCloud 40s infinite linear
}
.cloud:hover .cloud3 {
-webkit-animation: animCloud 60s infinite linear;
-moz-animation: animCloud 60s infinite linear;
animation: animCloud 60s infinite linear
}
.cloud:hover .cloud4 {
-webkit-animation: animCloud 80s infinite linear;
-moz-animation: animCloud 80s infinite linear;
animation: animCloud 80s infinite linear
}
Если нужно, чтобы анимация не сбрасывалась, когда уходит мышка, можно использовать animation-play-state
Для этого в класс cloud img добавляем: animation-play-state: paused;
И добавляем класс для ховера:
.cloud:hover img {
animation-play-state: running;
}