- 5
- 39 872
Oh, my site!
เข้าร่วมเมื่อ 14 ต.ค. 2022
На канале я делюсь своими модификациями и полезными фишками для создания сайтов и Web приложений, в том числе на платформе Tilda.
Как анимировать цифры на Tilda за одну минуту
В этом уроке я показываю как анимировать числа в Tilda с помощью вставки кода, написанного с помощью jQuery и JavaScript.
Признаюсь сразу - код я нашел в сети, но модифицировал его немного для более удобного использования.
Вы можете сказать мне "спасибо" на с помощью сервиса boosty boosty.to/ohmysite
Если видео вам помогло - пожалуйста поставьте лайк и оставьте комментарий, а еще лучше - подпишитесь.
Если у вас что - то не работает, тогда пишите мне в инстаграм @maxmitrofanov_ , будем разбираться.
Скрипт для анимации: codepen.io/Max-Mitrofanov/pen/rNKpVPG
Вы можете сказать мне "спасибо" на с помощью сервиса boosty boosty.to/ohmysite
Признаюсь сразу - код я нашел в сети, но модифицировал его немного для более удобного использования.
Вы можете сказать мне "спасибо" на с помощью сервиса boosty boosty.to/ohmysite
Если видео вам помогло - пожалуйста поставьте лайк и оставьте комментарий, а еще лучше - подпишитесь.
Если у вас что - то не работает, тогда пишите мне в инстаграм @maxmitrofanov_ , будем разбираться.
Скрипт для анимации: codepen.io/Max-Mitrofanov/pen/rNKpVPG
Вы можете сказать мне "спасибо" на с помощью сервиса boosty boosty.to/ohmysite
มุมมอง: 7 733
วีดีโอ
Как добиться эффекта рисования SVG кривых на Tilda
มุมมอง 12Kปีที่แล้ว
Друзья, в этом видео я показываю как добиться эффекта рисования кривых SVG при сборке вашего сайта на Tilda с помощью JavaScript кода, Figma и ZeroBlock. Я подготовил три варианта кода: - Рисование по скролу - Рисование по временному триггеру - Рисование по элементу - триггеру Вы можете сказать мне "спасибо" на с помощью сервиса boosty boosty.to/ohmysite Ссылка на код: codepen.io/Max-Mitrofanov...
Как сделать сложную анимацию текста на Tilda
มุมมอง 2.1Kปีที่แล้ว
В этом видео я показываю как создать продвинутую анимацию ваших текстов и заголовков на Tilda. Не секрет, что анимировать каждое слово в заголовках ваших сайтов достаточно утомительно, поэтому я предлагаю свое автоматизированное решение. Если код вам помог, пожалуйста поставьте лайк и оставляйте комментарии, спасибо! Вы можете сказать мне "спасибо" на с помощью сервиса boosty boosty.to/ohmysite...
Как сделать бегущую строку с иконками на Tilda без боли и страданий
มุมมอง 6Kปีที่แล้ว
В этом видео я делюсь с вами простым скриптом, который поможет создать бегущую строку из логотипов/картинок на Tilda. Скрипт реализован средствами JavaScript, HTML и CSS, используя простой синтаксис, который будет понятен всем браузерам. В примере изображения хранятся на сервисе DropBox, но вы можете использовать любой хостинг. Вы можете сказать мне "спасибо" на с помощью сервиса boosty boosty....
Как сделать слайдер с видео на Tilda без плагинов
มุมมอง 13Kปีที่แล้ว
Всем привет! В этом уроке я хотел бы поделиться с вами слайдером/каруселью, который я написал для одного из своего проектов. Слайдер работает в Zero Block на Tilda и прекрасно адаптируется для всех устройств. Вы можете использовать этот код в своих проектах без ограничений, однако большая просьба: не убирайте комментарии с ссылками на автора. Вы можете сказать мне "спасибо" на с помощью сервиса...
Все супер, было бы не круто если бы добавили возможность добавлять в слайдер именно карточки с изо и текстом
Вааааау это просто сказка!!! Огромная БЛАГОДАРНОСТЬ!
Друзья, у меня 2-ой код не работал, поэтому я его откорректировала. Кроме того, мне нужно было, чтобы он рисовался сверху вниз, а не сбоку (у меня получалось, что данный код (исправленный) рисовал снизу вверх. Если у кого-то такая же проблема с кодом - вот мой код. Вдруг, кому-то окажется полезным <script> 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; }); }); </script>
На мобильных устройствах снизу подрезается текст, если он объёмный, не могу понять как это исправить. Размер шейпа увеличивал, не помогло
Спасибо!
большое спасибо!!!!!!! Но может кто-нибудь помочь, как сделать чтобы линия при прокрутке вниз появлялась, как тропинка. А то у меня наоборот она исчезает. И куда вставлять значения, чтобы линия стала пунктирной 🙏 Если изменю строчку " svg.style.strokeDasharray = 10, 10;" То линия перестает рисовать и прокручивается на месте, не исчезая . КАк это можно исправить ? 🙏🙏🙏🙏
Добрый день! Спасибо за ролик! вы- молоды! НО у меня вопрос. в мобильной версии, вместо картинок у меня крутятся квадратики с крестиками.. Картинки не грузятся, как я понимаю. КАК это исправить?
так же идет скачек резкий в конце карусели
Как сделать 2 таких строки? друг под другом? Копирование блока не помогает, там начинается конфликт классов, но что поменять не понятно
Спасибо за полезную информацию! Подскажите пожалуйста как сделать так чтоб код запускался сразу, без надобности скроллить?(Просто хочу сделать загрузку 100%, но код не работает пока не начнешь скроллить, даже если в пикселях там значение 0)
Спасибо ваам🥹🥹 все получилось , работает🥳🥳
Здравствуйте! У меня есть вопрос. Я по вашему инструкцию сделала анимацию цифр, отлично получилось спасибо🥳 теперь в другой блок хотела добавить эффект рисования. Все по коду вроде правильно, но не сработало и анимация цифры тоже не работает. Вопрос: если в одном коде что то не правильно, вся анимация по коду не сработает?
Здравствуйте. как сделать чтобы когда проигрывается видео и перелистываешь на следующее то видео предыдущее останавливалось.
Код показывает ошибку в самой тильде в контенте. Копирую ваш код
Не отображаются видео и текст. Ошибок в консоле нет. В чем может быть проблема?😢
Привет! Подскажите, в чем может быть причина? Сделала по уроку, не рисует линию. Просто картинкой отображается сразу, шейп скрыт, как по видео. Прописала класс шейпу и в скрипте все заменила. Не работает. Вставил обычной картинкой. И намека нет на анимацию(
Очень классная идея! Но почему-то на одном сайте удалось реализовать, а на другом делаю всё так же, но ни один из трёх кодов не работает. Сейчас пробую даже на совершенно пустой странице. И не работает больше(
Спасибо огромное ! Все получилось 👍
Срабатывает только одна анимация на страницу(
Привет! Я может руко..п, но на пустой странице собираю, все работает. Как только копирую блоки с каруселью и кодом (меняя при этом id блока, так как он меняется) и ставлю в то место сайта, которое мне нужно, ничего не работает. Если сразу собирать на сайте, где надо, то тоже не работает. Получается это все работает то только на отдельной созданной странице что ли? Поясните нубу пжст ))
А зачем это нужно, если можно просто анимацию настроить в зероблоке?
А можно полный гайд о том, как сделать анимацию с дизайном, как в начале видео. Это бомба. Но она не получается у меня. Уже 2 дня сижу с этим(
Супер, спасибо!
Мужик, у тебя в видео кода на 190 строчек, а по ссылке всего 40, как так?
привет ,а есили у меня нет текста до цифр ?
Я просто убрала текст из кода "подпись до числа" (кавычки оставила)
Эх, столько ожиданий и такое разочарование: показывает 5 логотипов и потом перелетает в начало ( Но спасибо за код, кому-нибудь с меньшим количеством логотипов он точно поможет )
Большое спасибо за такой классный слайдер. Добавляюсь в желающие получить код картинка+текст, такой вариант тоже очень нужен
Лучший!)
спасибо!!
Благодарю за такое доходчивое видео! Все с первого раза получилось!
Как поставить после числа символ, с ним не работает код
В коде есть строка "Подпись после числа". Можно попробовать туда поставить. Но я ее не сразу заметила, поставила % просто в другой текстовый фрейм справа от числа))
видео классное но я не пользуюсь дропбоксом как сменить его на гуугл дикс?
Убогий код, который крайне плохо работает.
Подскажите, пожалуйста, у меня строка доезжает до конца, и потом резко с самого начала т.е. нет зацикленности. В чем может быть проблема?
Подскажите пожалуйста решили этот вопрос?
@@user-hj9nb6yv9sнет)
Отличная работа Макс, спасибо! С яндекса изображения не догружаются почему то, пришлось тоже на Dropbox загрузить.
Попробовал код, но картинки хотел вставить через гугл диск не получилось. Максимум до чего дошол, так это просто alt тэг отображается, а сами картинки он не показывает((
Как можно ограничить контейнер его размерами? Чтобы не на всю страницу была бегущая строка, а только в пределах контейнера
Здравствуйте Максим! Хотел узнать узнать по поводу Вашего видео о том как сделать анимацию появляющейся линии сама линия у меня получилась и появляется при скролле, но изначально в svg она была прерывистой при анимации она стала сплошной не подскажете как это можно исправить?
Урок крутой, спасибо! Но, как у многих, в первом примере анимации, по скроллу, есть проблема, что пока долистаешь до нужного блока, линия уже отрисована. Пробовала воспользоваться советами других - не помогло, к сожалению. а так все получилось с первого раза)
Спасибо, очень полезное видео без воды! Всё получилось, отлично работает Единственное, можно как-то на ПК сделать так, чтобы при первом видео не было пустого пространства слева, а сразу появилось 3 видео на экране?
Тоже интересно, как сделать так, чтобы старт был с 2 карточки, слева и справа и посередине большая по умолчанию.
Нашел решение, просил у chatGPT) код проверил, работает. Теперь слайдер стартует с 2 картинки, нет пустоты слева. <script> (function () { const slides = document.querySelectorAll(`.slider`); const buttonLeft = document.querySelector(`.slider__btn--left`); const buttonRight = document.querySelector(`.slider__btn--right`); const dots = document.querySelectorAll(`.dot`); let curSlide = 1; // Изменено с 0 на 1, чтобы начать со второго слайда const maxSlide = slides.length - 1; const dotFill = (slide) => { dots.forEach((el, i) => { if (i === slide) { el.classList.add("cur_dot"); } else if (el.classList.contains("cur_dot")) { el.classList.remove("cur_dot"); } }); }; const initCondition = () => { goToSlide(curSlide); // Изменено с 0 на curSlide dotFill(curSlide); // Изменено с 0 на curSlide }; const goToSlide = (slideNum) => { slides.forEach((s, i) => { s.style.transform = `translateX(${(i - slideNum) * 150}%)`; if (i === slideNum) s.classList.add("cur-slide"); else { s.classList.remove("cur-slide"); } }); }; const toNextSlide = () => { curSlide === maxSlide ? (curSlide = 0) : curSlide++; goToSlide(curSlide); dotFill(curSlide); }; const toPrevSlide = () => { curSlide > 0 ? curSlide-- : (curSlide = maxSlide); goToSlide(curSlide); dotFill(curSlide); }; buttonRight.addEventListener(`click`, toNextSlide); buttonLeft.addEventListener(`click`, toPrevSlide); document.addEventListener(`keydown`, (e) => { e.key === `ArrowRight` && toNextSlide(); e.key === `ArrowLeft` && toPrevSlide(); }); dots.forEach((el, i) => el.addEventListener("click", () => { dotFill(i); goToSlide(i); }) ); initCondition(); })(); </script>
все супер, только картинки подгружаются с 3го раза ( каждая по 7 кб весит)
Спасибо вам большое!
Респект за такие видео! Очень круто что есть такая инфа
Здравствуйте. Я начинающий специалист по сайтам. Поставила ваш код на сайт, но почему-то все видео у меня свалились в одну кучу и не листаются, они просто выстроились друг за другом. Нажимаю на кнопки вправо-влево, видно по подсветке, что реагирует, но не листает. Причем это только на десктопной версии, на мобильнике все норм. Можете пояснить, в чем может быть проблема.
Благодарю вас за такой классный код! Благодарю, что делитесь🥰
После 9-го лого не показывает
Спасибо! Отличная модификация! Хотя, думаю здесь можно еще доработать
Здравствуйте !..☀ Очень интересно !.. 👍 А можно это сделать с фото, а лучше типа карусель с фото - очень актуально !..😇 Вы хорошо объясняете !.. Спасибо вам за ваш труд !..🙏
В общем пригодился вариант, стоит на резрешение до 980. Правда свайп не предусмотрен, только пагинация получается. На компе не запускаются ролики дольше 30сек. А на телефоне нормально. Зато блок gl27+popUp на мобилках идет ужасно, с карточками во весь экран. т.ч. у меня два варианта эти .
Зачем делать с Дропбоксом если им никто не пользуется?