Tilda Design Battle 4.0
Разбор проекта, получившего 5 место в Tilda Design Battle.
Больше всего времени ушло на поиск контента. Искренне завидую тем, кто освоил нейросети))
Шрифты: PP Neue Montreal и Nyght Serif
Оставлю ссылку на Фигму: https://www.figma.com/design/qvyd2GwssB7Xx1wFT5EfLb/Tilda-Battle-%2F-Spirina?node-id=0-1&t=3URi6wvwI7ClfvrW-1
Верстала на двух брейкпоинтах: 320 и 960, включив Автоскейл.
- Прелоадер: https://mod.tistols.com/preloader-flash
- Закругление уголков первого блока при скролле: 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'); // Добавляем обработчик события прокрутки с использованием jQuery $(window).scroll(function() { // Получаем высоту окна var windowHeight = $(window).height(); // Получаем центр окна var scrolledPixels = $(window).scrollTop(); var windowCenter = scrolledPixels + (windowHeight / 2); // Получаем верхнюю границу элемента var elementTop = $('.tistols-bbord .tn-atom').offset().top; // Получаем высоту элемента var elementHeight = $('.tistols-bbord .tn-atom').outerHeight(); // Проверяем, достиг ли центр окна верхней границы элемента if (windowCenter >= elementTop && windowCenter <= (elementTop + elementHeight)) { // Устанавливаем радиус углов на 40px $('.tistols-bbord .tn-atom').css('border-radius', '0px'); } else { // Если центр окна не находится в пределах элемента, сбрасываем скругление $('.tistols-bbord .tn-atom').css('border-radius', '40px'); } }); }); </script>
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; } .arrow-zoom .tn-atom:after { content: ''; position: absolute; display: inline-block; width: 34px; height: 34px; align-items: center; right: 3px; border-radius: 1000px; background-color: var(--ZoomColor); background-size: cover; top: 50%; transform: translateY(-50%); transition: all 0.7s cubic-bezier(0.84, -0.01, 0.25, 0.99); } .arrow-zoom .tn-atom:before { content: ""; display: inline-block; height: 10px; width: 10px; background-image: var(--ImgZoom); background-position: -12px 0x, 0px 0px !important; background-repeat: no-repeat; background-size: contain; vertical-align: middle; opacity: 1; transition: opacity 0.5s cubic-bezier(0.84, -0.01, 0.25, 0.99); right: 15px; top: 50%; transform: translateY(-50%); transition: all 0.7s cubic-bezier(0.84, -0.01, 0.25, 0.99); position: absolute; z-index: 9; } @keyframes buttonArrow-2 { 0% { background-position: -12px 0px, 0px 0px; } 100% { background-position: 0px 0px, 12px 0; } } .arrow-zoom:hover .tn-atom:before { animation-name: buttonArrow-2; animation-duration: 0.7s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0.84, -0.01, 0.25, 0.99); opacity: 1; } .arrow-zoom:hover .tn-atom:after { width: 100%; height: 100%; right:0; transition: all 0.7s cubic-bezier(0.84, -0.01, 0.25, 0.99); } .arrow-zoom .tn-atom { overflow: hidden; } .arrow-zoom div { display: inline-block; z-index: 1; right: 10px; position: relative; transition: color 0.5s cubic-bezier(0.84, -0.01, 0.25, 0.99); margin-right: 15px; } .arrow-zoom:hover div { color: var(--TextColorZoomHover); } .arrow-zoom:hover .tn-atom { background: #E7FE89 !important; transition: background 2.3s ease-in-out !important; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $('.arrow-zoom-2').addClass('arrow-zoom'); </script> <script> var btnzoom = document.querySelectorAll('.arrow-zoom .tn-atom'); btnzoom.forEach(function(btnzoom) { var divZoom = document.createElement('div'); divZoom.textContent = btnzoom.textContent; btnzoom.innerHTML = ''; btnzoom.appendChild(divZoom); if (window.innerWidth > 768) { var fontSize = window.getComputedStyle(btnzoom).fontSize; divZoom.style.fontSize = fontSize; } }); </script>Платные. И есть несколько кодов из платной подписки, которыми по понятным причинам не смогу поделиться:
- Анимация появления заголовка на 1 экране: https://mod.tistols.com/smooth-text
- Расширение видео при скролле: https://mod.tistols.com/video-full (тоже много модифицировала его, вместо видео у меня просто фотография)
И чтобы на увеличенной фотографии появился текст, его добавила через Zero, с overflow:visible.
То есть расширяющееся изображение — это просто вставленный код. А под ним уже стоит зеро с текстами, вынесенными вверх, за пределы блока. У текста настроена анимация по скроллу. Триггер – 300px от центра. За дистанцию 200px он прозрачный, а затем, за 100px становится видимым.
а) объединяем все объекты в группу и меняем на Group — Object
б) настраиваем анимацию по скроллу:
- триггер Top (60px от верха оставим отступ)
- 1 шаг: дистанция 650px, смещение по x на -916px и обязательно ставим Fixed.
- 2 шаг: даем еще 100px постоять на месте, чтобы было время прочитать текст
в) и добавляем самому блоку + 750px высоты.
Идея с рефа
Я взяла 2 вырезанные svg (в фигме через Subtract), которые просто заезжают на фотографию снизу. Тем самым создается эффект "сжатия".
А изображения по бокам объединены в группу, у которых настроена анимация по скроллу (изначально сдвинуты сбок и не видны, далее – выезжают и становятся 100% непрозрачности)
Еще анимация появления настроена у шейпа с затемнением и текста.
И дублирую ссылку на проект: tour-to-mauritius.tilda.ws