Разные эксперименты

Источник
https://youtu.be/yRmj1L7oxF0

Код для анимации в тильде
https://yadi.sk/d/sDUDmrNbafsTHw

База lottie анимации
https://lottiefiles.com/

Github
https://gist.github.com/

Код для зеро блока:

<div id=lottie-1></div>

__________________________________


<script src='https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.0/lottie.js'></script>


<script>


var theWindow = $(window);
var winHeight = theWindow.height();
var animDuration = winHeight * 4;
var animData = {
	container: document.getElementById('lottie-1'),
	renderer: 'svg',
	loop: false,
	autoplay: false,
	path: 'link'
};
var anim = bodymovin.loadAnimation(animData);

$( window ).scroll(function() {
	animatebodymovin(animDuration, anim);
});

function animatebodymovin(duration, animObject) {
	
	var scrollPosition = theWindow.scrollTop();
	var maxFrames = animObject.totalFrames;
	var frame = (maxFrames / 100) * (scrollPosition / (duration / 100));
	
	animObject.goToAndStop(frame, true);
	
}

</script>

1

Находим анимацию на Lottie и переходим по ссылке

2

Открываем ссылку и копируем весь код

3

Переходим на gist.github.com

4

Cоздаём новый gist и в текстовое поле вставляем скопированный код. Сохраняем название .json

5

Create secret gist

6

Кликаем на кнопку raw и попадаем на страницу. Нам нужна именно ссылка

7

На тильде делаем zero block и т.д.

ALL YOU NEED IS LOVE • ALL YOU NEED IS LOVE • ALL YOU NEED IS LOVE • ALL YOU NEED IS LOVE • ALL YOU NEED IS LOVE • ALL YOU NEED IS LOVE • ALL YOU NEED IS LOVE • ALL YOU NEED IS LOVE •

-20%

iPhone

iMac

MacBook

Пробный экземпляр

<style>

.class {

backdrop-filter: blur(6px);

}

</style>

1

Добавляем шейп в zero block, ставим ему непрозрачность ~20%

2

Добавляем блок tilda html и вставляем в него код css.

3

ПКМ по шейпу, копируем класс элемента.

4

Заменяем ".class" в html блоке на только что скопированный текст.

5

Публикуем страницу и наслаждаемся эффектом матового стекла в тильде.

РОДЫ

БЕЗ СТРАХОВ

Цены

Как устроен курс?

КОНСУЛЬТАЦИЯ

Чаще всего источник страхов – банальное непонимание процесса родов. На курсе вы получите исчерпывающие ответы и обретёте необходимые знания для родов.