Просим обратить внимание: техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода
Drew custom illustrations, and designed the whole thing
Big thanks to Adobe Illustrator, which allowed us to draw and perfect these beauties. These guys are real members of our team, by the way.
We put together desktop, tablet and mobile versions
Big thanks to Adobe Illustrator, which allowed us to draw and perfect these beauties. These guys are real members of our team, by the way.
1) В Zero блок добавляем shape с container: window, height 100%, width: 100% и вставляем в него нужное нам изображение. Так же, можно сразу поставить прозрачность 20-30%.
2) Добавляем код в блок Т123. Код 1 для эффекта на 1 экран, код 2 для эффекта на всю страницу.
В коде нужно дважды указать class нашего shape элемента.
Дальше в редакторе Zero блока настройте прозрачность шейпа, как вам нужно.
Чтобы изменить размер паттерна нужно в коде изменить (например, сделать точки меньше и плотнее), нужно в строке "background-size: auto !important;" заменить auto на 50px. Так ваш паттерн будет повторяться каждые 50 пикселей. Можно поставить любое нужное вам значение.
2) Добавляем код в блок Т123. Код 1 для эффекта на 1 экран, код 2 для эффекта на всю страницу.
В коде нужно дважды указать class нашего shape элемента.
Дальше в редакторе Zero блока настройте прозрачность шейпа, как вам нужно.
Чтобы изменить размер паттерна нужно в коде изменить (например, сделать точки меньше и плотнее), нужно в строке "background-size: auto !important;" заменить auto на 50px. Так ваш паттерн будет повторяться каждые 50 пикселей. Можно поставить любое нужное вам значение.
Можно применить как к отдельному экрану, так и ко всему сайту поверх всех элементов сайта. Как изображение используется gif с шумом, но его можно вполне заменить на любое другое изображение или gif с паттерном, к примеру как точки на заднем фоне в примере выше. Так-же, можно добавить несколько изображений.
Инструкция
Паттерн на весь экран
Код 1: для применения на один экран
<!-- Тильдошная код для повторяющегося паттерна -->
<!-- Код 1: для применения на один экран -->
<style>
.tn-elem__1260597101567609545323 .tn-atom {
background-size: auto !important;
background-repeat: repeat !important;
pointer-events: none;
}
.tn-elem__1260597101567609545323 {
pointer-events: none;
}
</style>
Код 2: для применения на всю страницу
<!-- Тильдошная код для повторяющегося паттерна -->
<!-- Код 2: для применения на всю страницу -->
<style>
.tn-elem__1260849831567609629730 .tn-atom {
background-size: auto !important;
background-repeat: repeat !important;
pointer-events: none;
}
.tn-elem__1260849831567609629730 {
pointer-events: none;
z-index: 99999999 !important;
position: fixed;
top: 0;
left: 0;
width: 100vw !important;
height: 100vh !important;
}
</style>
Есть вопросы?
Вот что есть еще
ЭФФЕКТ
Модификация позволяет анимировать числа в Zero Block с заданным начальным и конечным значением
Модификация
Запускаем анимацию для мобильных устройств простым кодом
