1. Дизайн
Самое первое, что я сделала, получив задание — это набросала прототип. Так намного легче визуализировать блоки.
Далее начался долгий и беспощадный процесс поиска контента, идей и референсов. Несколько раз хотелось все бросить, потому что прошло уже чуть больше 5 часов, а ты сидишь и перед тобой практически ничего.
Перебирала несколько концептов. Все не передавало нужной атмосферы. А хотелось, в первую очередь, дать ощущение летнего настроения, морского бриза и предвкушения незабываемого приключения)) Важно не набирать себе слишком много референсов, иначе закопаешься окончательно. Не подходит – сразу удали с артборда.
Далее начался долгий и беспощадный процесс поиска контента, идей и референсов. Несколько раз хотелось все бросить, потому что прошло уже чуть больше 5 часов, а ты сидишь и перед тобой практически ничего.
Перебирала несколько концептов. Все не передавало нужной атмосферы. А хотелось, в первую очередь, дать ощущение летнего настроения, морского бриза и предвкушения незабываемого приключения)) Важно не набирать себе слишком много референсов, иначе закопаешься окончательно. Не подходит – сразу удали с артборда.
Шрифты: PP Neue Montreal и Nyght Serif
Оставлю ссылку на Фигму, чтобы можно было посмотреть макет и использованные рефы более подробно:
https://www.figma.com/design/qvyd2GwssB7Xx1wFT5EfLb/Tilda-Battle-%2F-Spirina?node-id=0-1&t=4pIxhIvFtl0XuG2w-1
Оставлю ссылку на Фигму, чтобы можно было посмотреть макет и использованные рефы более подробно:
https://www.figma.com/design/qvyd2GwssB7Xx1wFT5EfLb/Tilda-Battle-%2F-Spirina?node-id=0-1&t=4pIxhIvFtl0XuG2w-1
2. Верстка
Для ускорения процесса, верстала на двух брейкпоинтах: 320 и 960, включив Автоскейл.
Автоматический перенос из Фигмы в Тильду в этот раз не использовала. Мобилку верстала сразу поблочно, вместе с десктопом.
Автоматический перенос из Фигмы в Тильду в этот раз не использовала. Мобилку верстала сразу поблочно, вместе с десктопом.
Еще ооочень сильно помогли ускориться две вещи:
Подробнее есть в постах на канале @spirina_design
- Копирование и вставка стиля текста от Annexx – сохраняешь стиль, например заголовка, в один из слотов, и применяешь потом к любому тексту. Размеры адаптивов тоже сохраняются. Кайф же. Это я еще с менеджером стилей и групп до конца не разобралась.
- Компрессор фото от Voron. Это лучшая находка за последнее время! Гигантские изображения теперь не нужно прогонять через TinyPng. А еще он работает не только в Зеро, но и в стандартных.
Подробнее есть в постах на канале @spirina_design
3. Коды и скрипты
1. Прелоадер: https://mod.tistols.com/preloader-flash
2. Закругление уголков первого блока при скролле:
– код тоже взяла у ребят (он бесплатный, https://mod.tistols.com/photo-rounding ), и немного модифицировала под себя. Свою версию прикреплю ниже.
2. Закругление уголков первого блока при скролле:
– код тоже взяла у ребят (он бесплатный, https://mod.tistols.com/photo-rounding ), и немного модифицировала под себя. Свою версию прикреплю ниже.
<style>
.tistols-bbord .tn-atom {
transition: border-radius 0.9s ease; /* Плавный переход для border-radius */
}
</style>
<script>
$(document).ready(function() {
// Устанавливаем начальный радиус углов на 0px
$('.tistols-bbord .tn-atom').css('border-radius', '0');
Развернуть полностью
.tistols-bbord .tn-atom {
transition: border-radius 0.9s ease; /* Плавный переход для border-radius */
}
</style>
<script>
$(document).ready(function() {
// Устанавливаем начальный радиус углов на 0px
$('.tistols-bbord .tn-atom').css('border-radius', '0');
Развернуть полностью
3. Кнопки со стрелкой: https://mt-webdesign.ru/btn-arrow
<!--Кнопки со стрелкой
https://mt-webdesign.ru/btn-arrow-->
<!--Зумирование стрелки-->
<style>
/*Настройки кнопки*/
:root {
--ZoomColor: #E7FE89; /*цвет круга*/
--TextColorZoomHover: #343434; /*цвет текста по наведению*/
--ImgZoom: url(https://static.tildacdn.com/tild6434-6637-4362-b763-373735626631/Frame_6757785.png), url(https://static.tildacdn.com/tild6434-6637-4362-b763-373735626631/Frame_6757785.png); /*изображение стрелки*/
}
.arrow-zoom .tn-atom {
overflow: hidden !important;
position: relative;
transition-delay: 0.7s !important;
transition: color 0.2s ease-in-out, background 0s ease-in-out, border-color 1.2s ease-in-out !important;
}
Развернуть полностью
https://mt-webdesign.ru/btn-arrow-->
<!--Зумирование стрелки-->
<style>
/*Настройки кнопки*/
:root {
--ZoomColor: #E7FE89; /*цвет круга*/
--TextColorZoomHover: #343434; /*цвет текста по наведению*/
--ImgZoom: url(https://static.tildacdn.com/tild6434-6637-4362-b763-373735626631/Frame_6757785.png), url(https://static.tildacdn.com/tild6434-6637-4362-b763-373735626631/Frame_6757785.png); /*изображение стрелки*/
}
.arrow-zoom .tn-atom {
overflow: hidden !important;
position: relative;
transition-delay: 0.7s !important;
transition: color 0.2s ease-in-out, background 0s ease-in-out, border-color 1.2s ease-in-out !important;
}
Развернуть полностью
4. Анимация появления заголовка на 1 экране: https://mod.tistols.com/smooth-text (платная модификация)
5. Расширение видео при скролле: https://mod.tistols.com/video-full (тоже немного модифицировала его, вместо видео у меня просто фотография)
И чтобы на увеличенной фотографии появился текст, его добавила через Zero, с overflow:visible.
Код оставить не могу, т.к. он тоже по подписке. Если возьмете подписку у ребят, то скину свой измененный код.
5. Расширение видео при скролле: https://mod.tistols.com/video-full (тоже немного модифицировала его, вместо видео у меня просто фотография)
И чтобы на увеличенной фотографии появился текст, его добавила через Zero, с overflow:visible.
Код оставить не могу, т.к. он тоже по подписке. Если возьмете подписку у ребят, то скину свой измененный код.
То есть расширяющееся изображение — это просто вставленный код. А под ним уже стоит зеро с текстами, вынесенными вверх, за пределы блока. У текста настроена анимация по скроллу. Триггер – 300px от центра. За дистанцию 200px он прозрачный, а затем, за 100px становится видимым.
6. Плавный скролл
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js"></script><script> SmoothScroll({ stepSize: 60, animationTime: 1400, }) </script>
4. Анимации
1. Фиксация и смена заголовков
У первого заголовка, который виден изначально:
а) Start Trigger — Top, Trigger Offset — 119px. Это значит, что анимация запускается, когда текст встанет на 119 пикселей от верха экрана.
б) Шаг 1 — за дистанцию 200px он уходит в Opacity 100%. Обязательно выставляем Fixed
У второго заголовка:
а) Шаг 1 — Дистанция 0px, Opacity 0% (всегда выставляю этот нулевой шаг, иначе изначально объект не скроется)
б) Шаг 2 — за дистанцию 200px Opacity все так же 0%
в) Шаг 3 — за дистанцию 200px Opacity 100% (сначала был не виден, теперь появляется).
На всех этих шагах Fixed был выставлен.
г) Дистанция 200px. Fixed None. (Чтобы он поехал вверх)
У картинки:
а) 1 шаг — Fixed + дистанция 400px, дальше она поедет вверх
И не забываем увеличить высоту блока на то количество пикселей, сколько выставили фиксацию, иначе заедет на другой блок.
У первого заголовка, который виден изначально:
а) Start Trigger — Top, Trigger Offset — 119px. Это значит, что анимация запускается, когда текст встанет на 119 пикселей от верха экрана.
б) Шаг 1 — за дистанцию 200px он уходит в Opacity 100%. Обязательно выставляем Fixed
У второго заголовка:
а) Шаг 1 — Дистанция 0px, Opacity 0% (всегда выставляю этот нулевой шаг, иначе изначально объект не скроется)
б) Шаг 2 — за дистанцию 200px Opacity все так же 0%
в) Шаг 3 — за дистанцию 200px Opacity 100% (сначала был не виден, теперь появляется).
На всех этих шагах Fixed был выставлен.
г) Дистанция 200px. Fixed None. (Чтобы он поехал вверх)
У картинки:
а) 1 шаг — Fixed + дистанция 400px, дальше она поедет вверх
И не забываем увеличить высоту блока на то количество пикселей, сколько выставили фиксацию, иначе заедет на другой блок.
2. Горизонтальный скролл в блоке О туре:
а) объединяем все объекты в группу и меняем на Group — Object
а) объединяем все объекты в группу и меняем на Group — Object
б) настраиваем анимацию по скроллу:
- триггер Top (60px от верха оставим отступ)
- 1 шаг: дистанция 650px, смещение по x на -917px и обязательно ставим Fixed.
- 2 шаг: даем еще 100px постоять на месте, чтобы было время прочитать текст (важный момент, многие его упускают, можно поставить больше, даже 300px, хуже не будет)
3. Анимация в блоке с фотографиями
Мне понравилась идея на сайте, и захотелось ее повторить: https://buddleskincare.com
Мне понравилась идея на сайте, и захотелось ее повторить: https://buddleskincare.com
а) Взяла шейп в фон сайта + шейп в размер фотографии (какой она будет после «сжатия»). Вырезала через Subtract. И сохранила две зеркальных svg.
Именно эти фигуры будут заезжать на фотографию, создавая тот самый эффект.
Именно эти фигуры будут заезжать на фотографию, создавая тот самый эффект.
б) Фигуры на 1 шаге сдвинуты к краю экрана. На 2 шаге – встают на место, тем самым перекрывая основную фотографию под ними. Фиксация здесь не нужна.
в) Объединила изображения по бокам в две группы, у которых настроена анимация по скроллу:
- изначально сдвинуты сбок и не видны
- далее – выезжают и становятся 100% непрозрачности
Что получилось:
Если у вас остались вопросы, напишите мне, я расскажу подробнее: https://t.me/alen_spirina
Нажимая на кнопку, вы соглашаетесь с политикой конфиденциальности
Оставьте пожалуйста контактные данные, и я свяжусь с вами в ближайшее время. Обсудим детали, стоимость и план работы
Связь со мной
