Как добиться эффекта рисования SVG кривых на Tilda
ฝัง
- เผยแพร่เมื่อ 10 พ.ย. 2022
- Друзья, в этом видео я показываю как добиться эффекта рисования кривых SVG при сборке вашего сайта на Tilda с помощью JavaScript кода, Figma и ZeroBlock.
Я подготовил три варианта кода:
- Рисование по скролу
- Рисование по временному триггеру
- Рисование по элементу - триггеру
Вы можете сказать мне "спасибо" на с помощью сервиса boosty boosty.to/ohmysite
Ссылка на код: codepen.io/Max-Mitrofanov/pen...
![ภาพนี้ก็ฮาเหมือนกันนะเนี้ย #2 SS8 [ พากย์นรก MEME.EXE ] | easy boy](http://i.ytimg.com/vi/RMhUgxxD49Q/mqdefault.jpg)
я прям новичок, модно сказать неделю увлеченно что делаю. и благодаря вашему уроку у меня получилась прорисовка линии, я была в таком восторге. ПРОСТО РЕСПЕК....
Спасибо! Интересный эффект
Спасибо! Попробую обязательно, интересный эффект
Огромное спасибо за видео! Очень полезное и крутое!
Благодарю за такое доходчивое видео! Все с первого раза получилось!
У вас просто топ контент 🎉сколько не искала на ютубе такой инфы нигде нет . Очень ждём новых видео
Делаю отпись в комментариях, это годнота. Мне было прям интересно посмотреть, как это работает и как это достичь. Плюс - хорошо подано. Реапектую и буду следить за каналом
Спасибо :) дальше будет больше
Все работает. Эффект супер! Прямо лег в мой проект. Спасибо!
Оооочень полезно! Спасибо!
Спасибо!!! давно искала доступным языком
Рад помочь!
Супер! Спасибо!
Классный урок! Спасибо)
Простой, но эффектный прием
Согласен, мне тоже очень нравится)
Супер идея! Автор спасибо за реализацию) единственное в чем трудность возникла - нет параметра отсрочки старта анимации по скролу. Только скорость воспроизведения. Так что я от себя немного изменила код, теперь можно выставить отсрочку анимации в процентах от всей длины страницы
$(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;
});
});
Спасибо!
класс, спасибо большое
спасибо
спасибо!!
Спасибо
Спасибо, подписалась
Спасибо, подписался! Можно ли такое сделать с пунктирной линией?
Поставила первый и третий скрипт (по триггеру). Первый отлично работает, а с третьим скриптом картинка начала стираться, а не рисоваться. В чем проблема не могу понять.
Урок крутой, спасибо! Но, как у многих, в первом примере анимации, по скроллу, есть проблема, что пока долистаешь до нужного блока, линия уже отрисована. Пробовала воспользоваться советами других - не помогло, к сожалению. а так все получилось с первого раза)
Здравствуйте!
У меня есть вопрос. Я по вашему инструкцию сделала анимацию цифр, отлично получилось спасибо🥳 теперь в другой блок хотела добавить эффект рисования. Все по коду вроде правильно, но не сработало и анимация цифры тоже не работает.
Вопрос: если в одном коде что то не правильно, вся анимация по коду не сработает?
Слушай, анимацию простого появления линий, можно делать также ? Или это можно сделать простой SBT анимацией ?
Ничего не понятно, но очень интересно! :) А откуда всё-таки взялись скрипты? Я еще только погружаюсь вл все это ..
видео -огонь! но у меня подпись работает в обратном порядке. сначала видна, потом стирается и больше не появляется. не знаю, как исправить
Очень классная идея! Но почему-то на одном сайте удалось реализовать, а на другом делаю всё так же, но ни один из трёх кодов не работает. Сейчас пробую даже на совершенно пустой странице. И не работает больше(
А можно сделать такую же анимацию, но справа налево?
На пк все срабатывает по тригеру, а на моб, версии стирается в обратную сторону. Как это можно пофиксить? буду признателен и спасибо за видео
Всё делала по видео, а всё равно анимации линии нет на опубликованной версии, уже всю голову сломала почему((
большое спасибо!!!!!!! Но может кто-нибудь помочь, как сделать чтобы линия при прокрутке вниз появлялась, как тропинка. А то у меня наоборот она исчезает. И куда вставлять значения, чтобы линия стала пунктирной 🙏 Если изменю строчку " svg.style.strokeDasharray = 10, 10;" То линия перестает рисовать и прокручивается на месте, не исчезая . КАк это можно исправить ? 🙏🙏🙏🙏
Людиии подскажите, почему у меня в фигме нету COPY AS SVG? Уже замучилась, пытаюсь повторить
очень большое спасибо! круто, но у меня почему-то скрипт по тригерру работает в обратную сторону - он линию стирает((( что может быть не так?
мне помогло вот так сделать в конце svg.style.strokeDashoffset = draw; вместо length - draw
Привет! Подскажите, в чем может быть причина? Сделала по уроку, не рисует линию. Просто картинкой отображается сразу, шейп скрыт, как по видео. Прописала класс шейпу и в скрипте все заменила. Не работает. Вставил обычной картинкой. И намека нет на анимацию(
Срабатывает только одна анимация на страницу(
- Рисование по скролу. Не понятно как добиться этого эффекта когда элемент на 6-7 блоке. Пока до туда долистываешь там уже все нарисовалось. Как-то можно по тригеру это сделать?
поиграйте с формулой, я сделала для своего сайта вот так const draw = length * 2.5 * (scrollpercent*2); и стало рисоваться на моих глазах )))
@@TaniyLysenko помогло!! спасибо большое)
Спасибо