Как добиться эффекта рисования SVG кривых на Tilda
Вставка
- Опубліковано 15 вер 2024
- Друзья, в этом видео я показываю как добиться эффекта рисования кривых SVG при сборке вашего сайта на Tilda с помощью JavaScript кода, Figma и ZeroBlock.
Я подготовил три варианта кода:
- Рисование по скролу
- Рисование по временному триггеру
- Рисование по элементу - триггеру
Вы можете сказать мне "спасибо" на с помощью сервиса boosty boosty.to/ohmy...
Ссылка на код: codepen.io/Max...
Делаю отпись в комментариях, это годнота. Мне было прям интересно посмотреть, как это работает и как это достичь. Плюс - хорошо подано. Реапектую и буду следить за каналом
Спасибо :) дальше будет больше
Супер идея! Автор спасибо за реализацию) единственное в чем трудность возникла - нет параметра отсрочки старта анимации по скролу. Только скорость воспроизведения. Так что я от себя немного изменила код, теперь можно выставить отсрочку анимации в процентах от всей длины страницы
$(document).ready(function () {
const svg = document.getElementById("svgPath");
const length = svg.getTotalLength();
svg.style.strokeDasharray = length;
svg.style.strokeDashoffset = length;
// Задаем отсрочку в процентах от высоты страницы
const startOffsetPercent = 10; // Например, 10%
window.addEventListener("scroll", function () {
const windowHeight = document.documentElement.clientHeight;
const startOffset = (windowHeight * startOffsetPercent) / 100;
const scrollY = window.scrollY || window.pageYOffset;
const scrollPosition = Math.max(0, scrollY - startOffset);
const scrollpercent = scrollPosition / (document.documentElement.scrollHeight - windowHeight);
const draw = length * scrollpercent;
svg.style.strokeDashoffset = length - draw;
});
});
*строго код не судите, дополнять помогал chatGPT) возможны ошибки, если есть что добавить - велкоме))
Классный урок! Спасибо)
Простой, но эффектный прием
Согласен, мне тоже очень нравится)
Спасибо!!! давно искала доступным языком
Рад помочь!
Благодарю за такое доходчивое видео! Все с первого раза получилось!
У вас просто топ контент 🎉сколько не искала на ютубе такой инфы нигде нет . Очень ждём новых видео
спасибо большое! очень помогло)
На здоровье!
Спасибо! Интересный эффект
Все работает. Эффект супер! Прямо лег в мой проект. Спасибо!
я прям новичок, модно сказать неделю увлеченно что делаю. и благодаря вашему уроку у меня получилась прорисовка линии, я была в таком восторге. ПРОСТО РЕСПЕК....
Спасибо. Полезно👍
Рад помочь)
Поставила первый и третий скрипт (по триггеру). Первый отлично работает, а с третьим скриптом картинка начала стираться, а не рисоваться. В чем проблема не могу понять.
очень крутая штука, спасибо!
Спасибо!👍🏻👍🏻👍🏻
Спасибо! Попробую обязательно, интересный эффект
Огромное спасибо за видео! Очень полезное и крутое!
спасибо
Друзья, у меня 2-ой код не работал, поэтому я его откорректировала. Кроме того, мне нужно было, чтобы он рисовался сверху вниз, а не сбоку (у меня получалось, что данный код (исправленный) рисовал снизу вверх. Если у кого-то такая же проблема с кодом - вот мой код. Вдруг, кому-то окажется полезным
document.addEventListener('DOMContentLoaded', function() {
const svg = document.querySelector("#svgPath");
const length = svg.getTotalLength();
svg.style.strokeDasharray = length;
svg.style.strokeDashoffset = length;
window.addEventListener("scroll", function () {
const scrollY = window.scrollY || window.pageYOffset;
const scrollPercent = scrollY / (document.documentElement.scrollHeight - window.innerHeight);
const draw = length * scrollPercent * 1.5;
svg.style.strokeDashoffset = draw - length;
});
});
Оооочень полезно! Спасибо!
Спасибо!
Урок крутой, спасибо! Но, как у многих, в первом примере анимации, по скроллу, есть проблема, что пока долистаешь до нужного блока, линия уже отрисована. Пробовала воспользоваться советами других - не помогло, к сожалению. а так все получилось с первого раза)
Супер! Спасибо!
Классный контент🔥
Пушка! Спасибо)
видео -огонь! но у меня подпись работает в обратном порядке. сначала видна, потом стирается и больше не появляется. не знаю, как исправить
класс, спасибо большое
Здравствуйте!
У меня есть вопрос. Я по вашему инструкцию сделала анимацию цифр, отлично получилось спасибо🥳 теперь в другой блок хотела добавить эффект рисования. Все по коду вроде правильно, но не сработало и анимация цифры тоже не работает.
Вопрос: если в одном коде что то не правильно, вся анимация по коду не сработает?
Спасибо, подписался! Можно ли такое сделать с пунктирной линией?
2024 год, код по скроллу и по тригеру у меня не завелся. а так классный эффект
Почему, когда я дохожу до нужного блока, линия уже больше чем на половину отрисована? Также при увеличении скорости с 2 и выше, траектория движения меняется и линия двигается снизу-вверх, а не наоборот. Кто-то сталкивался с данной проблемой и знает, как исправить?
Август 2024, работает у кого-нибудь? Месяца три назад делала, все было идеально, сейчас не работает ни один код
спасибо!!
Всё делала по видео, а всё равно анимации линии нет на опубликованной версии, уже всю голову сломала почему((
На пк все срабатывает по тригеру, а на моб, версии стирается в обратную сторону. Как это можно пофиксить? буду признателен и спасибо за видео
Ничего не понятно, но очень интересно! :) А откуда всё-таки взялись скрипты? Я еще только погружаюсь вл все это ..
Спасибо, подписалась
большое спасибо!!!!!!! Но может кто-нибудь помочь, как сделать чтобы линия при прокрутке вниз появлялась, как тропинка. А то у меня наоборот она исчезает. И куда вставлять значения, чтобы линия стала пунктирной 🙏 Если изменю строчку " svg.style.strokeDasharray = 10, 10;" То линия перестает рисовать и прокручивается на месте, не исчезая . КАк это можно исправить ? 🙏🙏🙏🙏
Привет! Подскажите, в чем может быть причина? Сделала по уроку, не рисует линию. Просто картинкой отображается сразу, шейп скрыт, как по видео. Прописала класс шейпу и в скрипте все заменила. Не работает. Вставил обычной картинкой. И намека нет на анимацию(
Очень классная идея! Но почему-то на одном сайте удалось реализовать, а на другом делаю всё так же, но ни один из трёх кодов не работает. Сейчас пробую даже на совершенно пустой странице. И не работает больше(
Слушай, анимацию простого появления линий, можно делать также ? Или это можно сделать простой SBT анимацией ?
- Рисование по скролу. Не понятно как добиться этого эффекта когда элемент на 6-7 блоке. Пока до туда долистываешь там уже все нарисовалось. Как-то можно по тригеру это сделать?
поиграйте с формулой, я сделала для своего сайта вот так const draw = length * 2.5 * (scrollpercent*2); и стало рисоваться на моих глазах )))
@@TaniyLysenko помогло!! спасибо большое)
Людиии подскажите, почему у меня в фигме нету COPY AS SVG? Уже замучилась, пытаюсь повторить
А можно сделать такую же анимацию, но справа налево?
Срабатывает только одна анимация на страницу(
очень большое спасибо! круто, но у меня почему-то скрипт по тригерру работает в обратную сторону - он линию стирает((( что может быть не так?
мне помогло вот так сделать в конце svg.style.strokeDashoffset = draw; вместо length - draw
Спасибо
Спасибо