Делаем плавающие облака в Tilda publishing. Движение облаков на сайте

Введение

В настоящее время, когда все больше и больше бизнесов стремятся создавать визуально привлекательные сайты, с использованием различных эффектов и анимаций, плавающие облака в Tilda могут быть отличным дополнением для вашего сайта. В данной статье мы рассмотрим, как добавить плавающие облака на ваш сайт, используя платформу Tilda Publishing.

Tilda Publishing — это популярный конструктор сайтов, который позволяет создавать сайты, предоставляя множество инструментов для создания уникальных и профессиональных сайтов. Среди этих инструментов внедрения стороннего кода, с помощью которого мы и сделаем плавающие облака в Tilda.

Как сделать плавающие облака в Tilda

Для того, чтобы реализовать движение облаков и добавить на ваш тильда сайт, например, на главный экран вашего сайта, следуйте инструкции:

1. Создайте zero block.
2. Удалите стандартное наполнение блока.
3. Добавьте желаемый контент. (Фоновое изображение, заголовки, кнопки)
4. Скачайте архив с облаками и распакуйте на вашем устройстве.
5. Нажмите на кнопку «+» и выберите «Add Image».
6. Добавьте в zero block первое облако.
7. Расположите по вашем усмотрению.
8. Нажмите правой кнопкой мыши на облако и выберите «Add css class name».
9. В появившемся поле пропишите класс «cloud1».
10. Добавьте еще три облака с классами «cloud2», «cloud3» и «cloud4».
11.  Нажмите на кнопку «+» и выберите «Add HTML».
12. Двойным кликом откройте html блок.
13. Скопируйте и вставьте следующий код:

<style>
	.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
}
</style>

Сохраните изменения, выйдите из zero block и опубликуйте страницу.

Заключение

В заключении хочется отметить, что плавающие облака — это прекрасный способ добавить атмосферности вашему сайту. В Tilda это легко реализуется благодаря функциональности Zero Block, которая позволяет создавать интерактивные элементы путем внедрения кода. Следуя нашим советам, вы сможете создать плавные движения облаков на вашем сайте и сделать его более запоминающимся.

Файлы из статьи

Более подробно вы можете ознакомиться с инструкцией из этой статьи на нашем YouTube канале.