Добрый день. Возник следующий вопрос: хочется реализовать на сайте эффект анимации логотипа при скроллинге страницы вниз (и наоборот).
Пример такого эффекта: https://hexdigital.com/
Спасибо.
Подскажите как реализовать эффект как на примере.

Добрый день. Возник следующий вопрос: хочется реализовать на сайте эффект анимации логотипа при скроллинге страницы вниз (и наоборот).
Пример такого эффекта: https://hexdigital.com/
Спасибо.
1. Сделать svg файл логотипа.
2. взять какую-то библиотеку для svg-анимаций. например https://maxwellito.github.io/vivus/ или воспользоваться примерами с https://animejs.com/
3. написать js, который будет реагировать на скроллинг окна браузера. и дальше проверять, если окно прокручено больше чем на N пикселей, то запускаем анимацию, которая сворачивает наш SVG в точку, иначе разворачиваем из точки логотип
Также можно сделать анимацию с помощью CSS
Вот тут описано как это делается: https://habr.com/ru/post/450924/
Спасибо большое. Сутки разбирался с советами, посмотрел кучу материала.
Не подскажите почему на мой SVG файл не накладывается анимация? С другими пробовал, вроде все ок. Вот код
для начала расскажите какой способ вы выбрали для анимаций?
ну и на вскидку дело обстоит так, что svg надо подключать не файлом, а встраивать как html тег, потому вот это точно надо убрать:
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
ну и дальше к самой свг и её слоям идут обращения по css-селекторам. потому надо назначать классы и ид нужным слоям, ну и дать нормлальный ID для самой свгшки:
<svg version="1.1" id="svg_id" ...>
ну и для слоев:
<path fill="#F2F2F2" d="..." class="path_class"/>
или
<path fill="#F2F2F2" d="..." id="path_id1"/> <path fill="#F2F2F2" d="..." id="path_id2"/>
и да, чтоб соовсем хорошо разобраться в вашем вопросе, скиньте код хотя бы одной svg, с которой анимации работают, чтоб мы подготовили вашу свгшку в нужный вид
Добрый день. Анимацию закончил, вот ссылка на кодпен https://codepen.io/Malleys/pen/KKdVRLj?editors=1000. Я так понял осталась 3 стадия. Не поможете с написанием скрипта или может где про скролл эффект подробнее прочитать.
js для скролла:
jQuery(window).scroll(function(){ var scroll_top = jQuery(window).scrollTop(); if( scroll_top > 100 ) { jQuery('#logo').removeClass('horizontal_logo'); jQuery('#logo').addClass('vertical_logo'); } else { jQuery('#logo').removeClass('verticlal_logo'); jQuery('#logo').addClass('horizontal_logo'); } });
Дальше css. Ваш пример надо разбить на 2 части, так как логотип надо поворачивать в обратную сторону, то должна быть и обратная анимация:
Со временем и транслейтами там уже можно будет играть как угодно
Спасибо большое. А как правильно разбить на 2 части? Одним файлом или нет? Вот я сделал так, только он особо не работает. https://codepen.io/arakobra/pen/pojedKm
там на кодпен нет скролла страницы. пример надо тестировать на страницах со скроллом.
при прокрутке более чем на 100px от верха сайта должен включится механизм поворота логотипа. ну и наоборот
Спасибо большое все получилось. Единственное, теперь такая проблема возникала: при загрузке страницы анимация автоматически запускается, вроде из-за этой строчки после else ( jQuery(“#logo”).addClass(“horizontal_logo”); . Подскажите пожалуйста как сделать чтобы анимация работала только при скроле вниз=вверх. Спасибо больше заранее.
условие:
jQuery(window).scroll(function(){
означает, что функция будет работать только при скролле окна браузера. Возможно у вас по умолчанию указан в HTML класс запускающий анимацию?
Вот мой html
<?php <svg id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-2000 0 4218.8 661.4" xml:space="preserve" image-rendering="auto" baseProfile="basic" overflow="hidden" version="1.1" x="0px" y="0px"> <g id="logo.vertical_logo" fill="#fff"> <path d="M117.6,1.7c45.6,0,82.6,37.1,82.4,82.8c-0.1,45.4-37.1,82.2-82.5,82.2c-45.6,0-82.5-37.1-82.4-82.8 C35.2,38.5,72.2,1.7,117.6,1.7z M65,84.3c0.1,28.8,23.6,52.4,52.5,52.4c28.8,0,52.4-23.5,52.5-52.4c0-29.1-23.7-52.7-52.8-52.6 C88.5,31.8,65,55.5,65,84.3z" /> <path d="M216.9,193.9c0,10,0,19.5,0,29.8c-2,0-3.9,0-5.8,0c-31,0-62,0-92.9,0.1c-30.3,0.1-53.8,24.2-53,54.3 c0.7,29,25.6,51.8,55.3,50.6c22-0.9,41.7-16.7,47.7-38.4c0.5-1.7,0.9-3.5,1.4-5.3c9.9,0,19.7,0,29.8,0c-0.6,10.5-3.8,20.1-8.5,29.1 c-16.4,31.8-50.5,48.9-86.8,43.6c-33.4-4.9-61.5-32.6-67.8-66.8c-9-49.8,29.2-96.5,79.8-97.1c32.5-0.3,65-0.1,97.4-0.1 C214.5,193.7,215.4,193.8,216.9,193.9z" /> <path d="M216.9,494.8c0,10,0,19.5,0,29.8c-2,0-3.9,0-5.8,0c-31,0-62,0-92.9,0.1c-30.3,0.1-53.8,24.1-53,54.3 c0.7,29,25.6,51.8,55.3,50.6c22-0.9,41.7-16.7,47.7-38.4c0.5-1.7,0.9-3.5,1.4-5.4c9.9,0,19.7,0,29.8,0c-0.6,10.5-3.8,20.1-8.5,29.1 c-16.4,31.8-50.5,48.9-86.8,43.6c-33.4-4.8-61.5-32.6-67.8-66.8c-9-49.8,29.2-96.5,79.8-97.1c32.5-0.3,65-0.1,97.4-0.1 C214.5,494.7,215.4,494.8,216.9,494.8z" /> <path d="M199.4,467.5c-10.5,0-20.1,0-29.8,0c-0.8-4.5-1.4-8.9-2.5-13.2c-6.1-22.6-26.7-38.5-50.1-38.6c-25.3-0.1-50.7-0.1-76-0.1 c-1.8,0-3.6,0-5.7,0c0-10,0-19.6,0-29.7c1.5-0.1,3.1-0.2,4.7-0.2c25.2,0,50.3-0.1,75.5,0c40.8,0.1,73.8,27.1,82,66.9 C198.5,457.2,198.7,462.1,199.4,467.5z" /> <path d="M20.5,166.7c-8.1,0-14.5-6.6-14.4-14.7c0.1-8,6.7-14.5,14.8-14.3c7.8,0.2,14.2,6.6,14.2,14.4 C35.1,160.2,28.5,166.7,20.5,166.7z" /> </g> <g id="logo.horizontal_logo" fill="#fff"> <path d="M117.6,1.7c45.6,0,82.6,37.1,82.4,82.8c-0.1,45.4-37.1,82.2-82.5,82.2c-45.6,0-82.5-37.1-82.4-82.8 C35.2,38.5,72.2,1.7,117.6,1.7z M65,84.3c0.1,28.8,23.6,52.4,52.5,52.4c28.8,0,52.4-23.5,52.5-52.4c0-29.1-23.7-52.7-52.8-52.6 C88.5,31.8,65,55.5,65,84.3z" /> <path d="M216.9,193.9c0,10,0,19.5,0,29.8c-2,0-3.9,0-5.8,0c-31,0-62,0-92.9,0.1c-30.3,0.1-53.8,24.2-53,54.3 c0.7,29,25.6,51.8,55.3,50.6c22-0.9,41.7-16.7,47.7-38.4c0.5-1.7,0.9-3.5,1.4-5.3c9.9,0,19.7,0,29.8,0c-0.6,10.5-3.8,20.1-8.5,29.1 c-16.4,31.8-50.5,48.9-86.8,43.6c-33.4-4.9-61.5-32.6-67.8-66.8c-9-49.8,29.2-96.5,79.8-97.1c32.5-0.3,65-0.1,97.4-0.1 C214.5,193.7,215.4,193.8,216.9,193.9z" /> <path d="M216.9,494.8c0,10,0,19.5,0,29.8c-2,0-3.9,0-5.8,0c-31,0-62,0-92.9,0.1c-30.3,0.1-53.8,24.1-53,54.3 c0.7,29,25.6,51.8,55.3,50.6c22-0.9,41.7-16.7,47.7-38.4c0.5-1.7,0.9-3.5,1.4-5.4c9.9,0,19.7,0,29.8,0c-0.6,10.5-3.8,20.1-8.5,29.1 c-16.4,31.8-50.5,48.9-86.8,43.6c-33.4-4.8-61.5-32.6-67.8-66.8c-9-49.8,29.2-96.5,79.8-97.1c32.5-0.3,65-0.1,97.4-0.1 C214.5,494.7,215.4,494.8,216.9,494.8z" /> <path d="M199.4,467.5c-10.5,0-20.1,0-29.8,0c-0.8-4.5-1.4-8.9-2.5-13.2c-6.1-22.6-26.7-38.5-50.1-38.6c-25.3-0.1-50.7-0.1-76-0.1 c-1.8,0-3.6,0-5.7,0c0-10,0-19.6,0-29.7c1.5-0.1,3.1-0.2,4.7-0.2c25.2,0,50.3-0.1,75.5,0c40.8,0.1,73.8,27.1,82,66.9 C198.5,457.2,198.7,462.1,199.4,467.5z" /> <path d="M20.5,166.7c-8.1,0-14.5-6.6-14.4-14.7c0.1-8,6.7-14.5,14.8-14.3c7.8,0.2,14.2,6.6,14.2,14.4 C35.1,160.2,28.5,166.7,20.5,166.7z" /> </g> </svg> ?>
css использую ваш и js тоже.
это код svg. он в решении вашей задачи никак не поможет 🙁
дайте ссылку на вашу страницу, на которой наблюдается баг
Вот на главной такой баг, а на остальных вроде работает корректно, только не большой пролаг во время первого скрола. http://a0349134.tw1.ru/
попробуйте уменьшить время анимации с 3s до .5s
Попробовал и уменьшить время и увеличить, лаг не убирается. А вот когда отлючил слайдер, он заработал как нужно, не считая лага первого скрола.
надо поиграть с параметрами анимации, чтоб никаких там задержек не было (delay) и т. д.
Я сделал медленнее, чтобы наглядно увидеть. http://a0349134.tw1.ru/ , именно во время первого скролла такая запара. Вот CSS
<?php #logo.vertical_logo { animation: move_vertical 11s linear forwards; } #logo.horizontal_logo { animation: move_horizontal 11s linear forwards; transform: translate(433px, 223px) scale(1) rotate(90deg); } @keyframes move_vertical { from { transform: translate(0px, 0px) scale(1) rotate(0deg); } 49.9% { transform: translate(0px, 0px) scale(0) rotate(0deg); } 50% { transform: translate(0px, 0px) scale(0) rotate(270deg); } to { transform: translate(0px, 0px) scale(1) rotate(270deg); } } @keyframes move_horizontal { from { transform: translate(0px, 0px) scale(1) rotate(270deg); } 49.9% { transform: translate(0px, 0px) scale(0) rotate(270deg); } 50% { transform: translate(0px, 0px) scale(0) rotate(0deg); } to { transform: translate(0px, 0px) scale(1) rotate(0deg); } } ?>
jQuery(window).scroll(function(){ var scroll_top = jQuery(window).scrollTop(); if( scroll_top > 100 ) { jQuery('#logo').removeClass('horizontal_logo'); jQuery('#logo').addClass('vertical_logo'); } else { if( jQuery('#logo').hasClass('vertical_logo') ) { jQuery('#logo').addClass('horizontal_logo'); } jQuery('#logo').removeClass('vertical_logo'); } });
попробуйте js на этот заменить
Спасибо большое, всё работает. Осталось наладить конфликт с слайдером, если не получится, заменю на другой. Спасибо ещё раз:)