Step by step - при скроле элементы меняют своё местоположение - разобралась не до конца.
Анимация воспроизводится при появлении объектов.
Картинка - element on screen
шейп - block on screen.
В шаблоне сдено в window, я делала в grid. Но в AutoScale. Поэтому значения несколько отличаются.
Анимация воспроизводится по скролу - картинка увиличивается на протяжении 1000 px, а потом 250 px уходит в прозрачность, 2 дополнительные пальмы - увеличиваются до 500 и немного меняют свои координаты, а потом через 200 px становятся прозрачными. Сделала в точности, как показано в шаблоне. По сути перенесла значения.
Это галерея с описанием, но вместо картинок тут "пустые" прозрачные картинки - фрейм из фигмы в png формате, а описание несколько поднято наверх (значения-)
Видео сильно увеличено, за счёт чего прячутся кнопки ютуба.
Картинка в шейпе фиксируется, должен появиться эффект маски из кругов, но почему-то под конец скрола картинка как будто растягивается, это не очень красиво.
Step by step - в первом случае шейп, который находится под картинкой png, выходит из прозрачности и увеличивается.
Во втором случае используется прозрачный шейп с широким бордером белого цвета, за него прячется фиолетовый круг, при наведении на картинку, которая выступает тригером, фиолетовый круг выезжает из-за бордера.
Step by step -
1 кнопка - при наведении на неё происходит анимация: надпись кнопки спускается чуть сверху, а подчёркивание улетает вправо и как будто появляется новое.
Работает по триггеру - общему шейпу, который находится наверху.

2 кнопка - снизу появляется шейп.

3 кнопка - сделана по типу подчёркивания у первой копки, только у 2х других шейпов - задержка на 0,2 и 0,4 сек.
LET'S GO!
LET'S GO!
Step by step - при клике нижний и верхний шейп в бургере меняют своё положение так, что образуют крестик, а средний уезжает вправо, при повторном клике мы снова видим бургер.
AutoScale
Zero block
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
Step by step - spread - 90
Кнопка многослойная - внизу лежат 4 шейпа, которые при появлении на экране загружаются один за другим, чтобы сделать эффект загрузки - они квадратные. Чтобы сделать круг, используется ещё один шейп, у которого есть тень и spread - 90. Получаем круг, как маска. Потом идёт ещё один шейп в цвет фона, теперь мы видим между маской и шейпом внутри, как будто белый круг, который имитирует загрузку страницы, когда элементы окажутся на экране.
При наведении круг как будто уменьшается.
При "загрузке" страницы появляется и исчезает текст, а при наведении на него проявляется до этого невидимая кнопка, которая при наведении на неё меняет свой цвет, та же по наведению появляются картинки.
WAITING
WELCOME
CLICK ME
Step by step - при клике на бургер, выезжают белые шейпы , появляется другой текст, появляется крестик - закрытие на месте бургера.
Делала по аналогии с шаблона, что-то поняла, что-то нет, сетка такая же, но чуть больше px, текстовые элементы просто скопировала, в них уже были настройки, только добавила триггер, разбиралась, как это устроено.
Бургер и крестик сделала в фигме, мне так показалось проще, хотя +/- одинаково.
Arc.
Kyiv
Popudrenko 1A
0 800 343 46 12
Arc.
All Projects
Services
Architecture
discipline
Нажмите на бургер, чтобы увидеть магию
Меню можно сверстать по window
Всё в ваших руках
Tilda.School
2020
Step by step - при клике на элемент(бант) сверху выезжает меню.
work
life
Нажми на бант
У кнопок при наведении меняются цвета.
Step by step - при наведении на кнопку, нижний слой кнопки увеличивается до 120%, прозрачность становится - 0. Анимация зациклена.
У первой кнопки нижний слой имеет цвет, у второй - только обводка.
Выбрать
Выбрать
Step by step - при клике на кнопку, которая является триггером для каждого из кругов, круги меняют своё положение с разной скоростью, у жёлтого круга имеется задержка.
Ко всем кругам применён easing - elastic fin.
Так как на один элемент можно сделать одну анимацию, используются дополнительные круги - им выставляется увеличение по наведению - но либо я что-то сделала не так, либо так и должно быть и тогда мне не нравится.
Нажимаем на кнопку - элементы перестраиваются, наводим мышку на синий круг - нижний синий должен увеличиваться - а он не увеличивается.
Решила сделать ещё один круг с такими же настройками - его можно увидеть, если навести под крайний круг слева - всё работает. Поэтому сделала аналогичный нижний круг для жёлтого. Если сначала нажать на кнопку, а потом на жёлтый круг, который теперь находится слева, то но как будто увеличивается, хотя на самом деле увеличивается 2й жёлтый круг. НО! Это работает и если не кликнуть на кнопку, а этого нам не нужно. В этом случае при наведении на синий круг ,который находится слева, увеличивается жёлтый круг, который находится под ним.
LET'S GO!
Step by step - при клике

При клике на кнопку - появляется сначала полоска, она разворачивается и появляется заголовок слева, а через 0,2 сек появляется описание немного сверху. При повторном клике всё возвращается в исходное положение.
Для меня тяжелой является настройки шейпа, остальное не ново.

Настройки:
Есть шейп 400x250 px
1 шаг - длительность - 0, шейп уезжает наполовину вверх и влево - влево =-200, вверх=-125, scale =0, прозрачность=0
2 шаг - прозрачность=100
3 шаг - анимация - появление палочки - scale x =100%, scale y =1%, убираем сдвиг х =0, длительность=1сек, изинг - easeInOut.
4 шаг - сдвиг по y=0, scale y =100 %
5 шаг - меняем delay - 0,2
Добавляем триггер на кнопку
Меняем цвет у шейпа.
Добавляем текст и анимацию.
Заголовок - по клику.
Шаг 1 - по х=-20, убираем прозрачность, длительность=0.
Шаг 2 - длительность=0,8 сек, х=0, прозрачность=100%, изинг - easeInOut.
Указываем триггер - кнопка.
Шаг 3 - меняем delay - 0,2
Delay - 1,8 сек
Анимация для описания: по клику. Указываем триггер - кнопка.
Шаг 1 - по y=-20, убираем прозрачность, длительность=0.
Шаг 2 - длительность=0,5 сек, прозрачность=100%, y=0, Delay - 2 сек, изинг - easeInOut
Шаг 3 - меняем длительность - 0, delay - 0,2
LET'S GO!
Curiosity about life in all its aspects, I think, is still the secret of great creative people.
The best ideas come as jokes.
Базовая анимация - текст слева фиксируется по верху страницы и остаётся там пока скролится текст - сейчас немного некорректно, я думаю из-за того, что перед этим блоком есть другой блок, нужно разобраться.
The best ideas come as jokes. Make your thinking as funny as possible. The best ideas come as jokes. Make your thinking as funny as possible.The best ideas come as jokes. Make your thinking as funny as possible.
Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well. Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well.Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well.
Good design is obvious. Great design is transparent.
Good design
Базовая анимация - при появлении на экране элементы появляются :
Заголовок - первое слово без задержки, каждое следующее +0,2 сек.
Заголовок справа налево, описание - внизу.
Design
creates
culture
Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well.
Базовая анимация - параллакс по скролу. Верхнее изображение едет медленнее, чем скролится текст. Так же здесь применён триггер офсет - чтобы анимация проигрывалась не тогда, когда появится на экране, а спустя 200px.
Design creates culture
Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well.
Базовая анимация - параллакс по элемента и текста справа. Скорость установлена 150 - это в полтора раза быстрее, чем основной текст, 100 - это обычная скорость.
У этих же элементов настроена базовая анимация - fade in left, длительность - 0,5 сек. 50 px.

Design creates culture
Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well.
Design creates culture. Culture shapes values. Values determine the future.
Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well.
Базовая анимация - параллакс по мыши 2х элементов, разноцветная идёт за мышью -200(минус), зелёная идёт в противоположную сторону 600.
Базовая анимация - параллакс по мыши 2х элементов, здесь наоборот - зелёная идёт за мышью - 200 (минус), разноцветная идёт в противоположную сторону 600.
Step by step - Этот блок выглядит сейчас несколько некорректно, потому что находится не на верху страницы.
Текст
который
появляется
по
скролу
Текст
который
появляется
по
скролу
Step by step - при наведении на заголовок, который является триггером, он приподнимается, карточка с описанием тоже.
Фоновая картинка в шейпе уходит в прозрачность.
У 2й колонки аналогично с 1й, добавляется анимация картинки весны, она тоже уходит в прозрачность при наведении на второй заголовок, а именно на его подложку.
В 3й колонке прибавляется картинка лета - уходит в прозрачность при наведении на подложку заголовка осени.
Картинки расположены в слоях - сверху фон, ниже весна - лето, в самом низу - осень.
В заголовках на текстах используется pointer events - none.
Разделители - шейпы.
ВЕСНА
Веснапереходный сезон, когда заметно увеличение светового дня, повышается температура окружающей среды и активизируется природная деятельность живых существ и растений.
ЛЕТО
Лето - самое теплое время года, наступающее вслед за весной и сменяющееся осенью.
Дата начала лета варьируется в зависимости от климата, традиций и культуры.
ОСЕНЬ
Осень - переходный сезон, когда заметно уменьшение светового дня, и постепенно понижается температура окружающей среды, самое загадочное и красивое время года
Здесь -карточки изначально находятся ниже, поэтому изначально их не видно.
ВЕСНА
Веснапереходный сезон, когда заметно увеличение светового дня, повышается температура окружающей среды и активизируется природная деятельность живых существ и растений.
ЛЕТО
Лето - самое теплое время года, наступающее вслед за весной и сменяющееся осенью.
Дата начала лета варьируется в зависимости от климата, традиций и культуры.
ОСЕНЬ
Осень - переходный сезон, когда заметно уменьшение светового дня, и постепенно понижается температура окружающей среды, самое загадочное и красивое время года
Step by step - при наведении на кнопку - она меняется, а именно подменяется другой. Они выглядят одинаково, но настроены по-разному.
В первом случае анимированы все объекты, при этом вырхний слой - первоначальный вид кнопки.
Во втором случае анимирована вторая версия кнопок, и они(они) находится на верхнем слое.
В обоих случаях у текста использован
pointer events - none.
Сделано по аналогии со вторым элементом, только текст не анимирован.
Сделано по аналогии со вторым элементом.
Let's go!
Let's go!
Let's go!
Let's go!
Hover on
Play on
Play on
Step by step - при клике на заголовок, который является триггером, карточка с описанием уходят в прозрачность.
А другие карточки и их описания поднимаются и выходят из прозрачности. У них тоже триггер - заголовок.
Манул – это дикий степной кот, который проживает в районе Центральной Азии, а также в Западном Китае, Монголии, Тибете и других странах.
Средняя продолжительность жизни манула в неволе — 11—12 лет, но известны случаи, когда манул доживал до 18 лет. Срок жизни в дикой природе неизвестен.
От обычной кошки он отличается более плотным, массивным телом на коротких толстых лапах и очень густой шерстью .
Манул
Манул — животное размером с домашнюю кошку: длина его тела 52—65 см, хвоста 23—31 см; весит он 2—5 кг.
Step by step - при клике на текст, который является триггером шейпы двигаются.
Почему-то при втором клике двигаются иначе.
Movement
Step by step - при наведении на текст, который является триггером появляется shape - подчёркивание.
При клике на текст - появляется карточка с описанием.
Everything
Curiosity about life in all its aspects, I think, is still the secret of great creative people.
Step by step - при наведении на текст, который является триггером появляется shape.
The best ideas come as jokes. Make your thinking as funny as possible.
Step by step - при наведении на картинку при помощи триггера появляется карточка с описанием.
Great
The work you do while you procrastinate is probably the work you should be doing for the rest of your life.
Step by step - при наведении на текст проявляются элементы из прозрачности и увеличиваются. Это присходит за счёт триггерной анимации, анимация ставится на тех кругах, которые должны появиться при наведении, триггером выступают те элементы, которые видны изначально.
Сделала всё, как в уроке, но почему-то цвет пропадает.
Цвета
Красный
Оранжевый
Жёлтый
Зелёный
Голубой
Синий
Фиолетовый
Тут добавила триггер ещё и на шейп с цветом.
Цвета
Красный
Оранжевый
Жёлтый
Зелёный
Голубой
Синий
Фиолетовый
Базовая анимация - палаллакс кругов/объектов при движении мыши.
Чёрный круг на движения мыши реагирует по оси у, уходя в противоположную от курсора сторону.
Жёлтый, голубой, оранжевый круги движутся по обеим осям, но значения у них разные.
Базовая анимация - палаллакс кругов/объектов при скроле.
The Mercury
Mercury is the smallest and innermost planet in the Solar System. Its orbital period around the Sun of 87.97 days is the shortest of all the planets in the Solar System. It is named after the Roman deity Mercury, the messenger of the gods.
Design
The best ideas come as jokes. Make your thinking as funny as possible.
Step by step - круги увеличиваются при скроле.
О жизни
Цель нашей жизни - быть счастливыми.
| Далай Лама
Жизнь, на самом деле, проста, но люди настойчиво ее усложняют.
| Конфуций| Далай

Самый здоровый ответ на жизнь - это радость. | Дипак Чопра
step by step - элемент зацикленно движется по кругу с определённой скоростью
Первая картинка - step by step - картинка фиксируется на экране с отступом от верха на 20 px, спустя 750 px уходит в прозрачность и перестаёт фиксироваться.

Вторая картинка - базовая анимация - картинка фиксируется на экране с отступом от верха на 20 px на протяжении 700 px.
Everything should be made as simple as possible, but not simpler. Everything should be made as simple as possible, but not simpler. Everything should be made as simple as possible, but not simpler. Everything should be made as simple as possible, but not simpler. Everything should be made as simple as possible, but not simpler.
Everything should be made as simple as possible, but not simpler. Everything should be made as simple as possible, but not simpler. Everything should be made as simple as possible, but not simpler. Everything should be made as simple as possible, but not simpler. Everything should be made as simple as possible, but not simpler.
Everything should be made as simple as possible, but not simpler. Everything should be made as simple as possible, but not simpler. Everything should be made as simple as possible, but not simpler. Everything should be made as simple as possible, but not simpler. Everything should be made as simple as possible, but not simpler.
The work you do while you procrastinate is probably the work you should be doing for the rest of your life.The work you do while you procrastinate is probably the work you should be doing for the rest of your life.The work you do while you procrastinate is probably the work you should be doing for the rest of your life.The work you do while you procrastinate is probably the work you should be doing for the rest of your life.
Everything should be made as simple as possible, but not simpler.
The work you do while you procrastinate is probably the work you should be doing for the rest of your life.The work you do while you procrastinate is probably the work you should be doing for the rest of your life.The work you do while you procrastinate is probably the work you should be doing for the rest of your life.The work you do while you procrastinate is probably the work you should be doing for the rest of your life.
Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well.Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well.Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well.Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well.Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well.
Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well.Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well.Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well.Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well.Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well.
Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well.Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well.Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well.Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well.Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well.
element on screen
Посмотрим
Что
может
получиться
Иллюзия
движения
По скролу
По наведению
По триггеру
Подробнее
Подробнее
Подробнее
Подробнее
Подробнее
Подробнее
The work you do while you procrastinate is probably the work you should be doing for the rest of your life.
The work you do while you procrastinate is probably the work you should be doing for the rest of your life.
Design creates culture. Culture shapes values. Values determine the future.
составление элемента из разных частей
По наведению
По триггеру
LET'S GO!
По скролу
element on screen-->Loop
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands. Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands. Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands. Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands. Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
По наведению
По наведению
По триггеру
Curiosity about life in all its aspects, I think, is still the secret of great creative people.
Everything should be made as simple as possible, but not simpler.
По наведению
По скролу
Tilda Publishing
По наведению
100 Ideas that Changed Graphic Design
Visual communication takes place through pictures, graphs and charts, as well
How to be a graphic designer
Symbolization is an important definition for this perspective.
The view of images in the critical perspective is when the viewers criticise the images
Critical Writings on Graphic Design
100 Ideas that Changed Graphic Design
Visual communication takes place through pictures, graphs and charts, as well
How to be a graphic designer
Symbolization is an important definition for this perspective.
The view of images in the critical perspective is when the viewers criticise the images
Critical Writings on Graphic Design
block on screen
Explore Our Features
Explore Our Features
block on screen-->Loop
По наведению

Московский завод резервуарного оборудования