Триггерная анимация в Тильде

Поділитися
Вставка
  • Опубліковано 10 гру 2024

КОМЕНТАРІ • 128

  • @icover-coversingaragebanda8079
    @icover-coversingaragebanda8079 3 роки тому +3

    Все супер, но вот когда переводишь курсор с шейпа на текст есть маленький баг, анимация на доли секунды начинает с начала воспроизводиться, то есть как будто происходит разовое моргание

    • @germandolgin
      @germandolgin  3 роки тому +3

      Для решения этого вопроса все покрывается одним прозрачным шейпом который и является триггером для обоих объектов

    • @alixandr86
      @alixandr86 2 роки тому +1

      @@germandolgin спасибо, у меня тоже прыгала кнопка, ничего не мог сделать. Сделал прозрачный шейп и все заработало!!!

    • @-Stand-Alone-Complex
      @-Stand-Alone-Complex 2 роки тому +2

      @@germandolgin есть вариант с текста отключить pointer events. Работает без костылей)

    • @vladoga
      @vladoga Рік тому

      @@-Stand-Alone-Complex ЭТОТ вариант рекомендовал Макс Ширко на Тильде еще пару лет назад

  • @КристинаВелиженкова-н8и

    2 дня сидела, не могла понять,что фоновая фотка нужна. Спасибо тебе огромное, дружище!!!! Успехов тебе в творчестве!!! Ждём от тебя новых полезностей

  • @MikeMikeInt
    @MikeMikeInt 4 роки тому +26

    Класс, спасибо, полезный контент) Запускай свой курс по Тильде, многие пойдут к тебе))

    • @tatayanag
      @tatayanag 4 роки тому +5

      Поддерживаю!!! )))

  • @maiya71
    @maiya71 2 роки тому +1

    Герман, Вы Учитель от Бога!!!!! Тыща миллион до неба лайков и (так как я уже на Вас подписана), подписывают на ВСЁ! Счастья и процветания Вам. 🤩👍✨

  • @АндрейЖуравлев-в5с
    @АндрейЖуравлев-в5с 4 роки тому +9

    Герман, Вы молодец! Спасибо за этот контент и не только. Последнее время качество канала скакануло на порядок. Так держать!

  • @РамзанБерсанукаев-г3ш

    Герман спасибо!Загружай любую полезную инфу.

  • @ТатьянаКоваленко-й6э

    Очень полезная информация! Спасибо за ваш труд 🙌🏼

  • @Inga_01
    @Inga_01 Рік тому

    Фишка огнь, буду использовать для портфолио )) вместо шейпа применила кнопку, чтобы не замарачиваться с отдельными анимациями текста и шейпа. Очень нравятся твои сайты🔥

  • @genieyprav
    @genieyprav 4 роки тому +2

    Спасибо, Герман! Круто объяснил. По-больше бы таких необычных видосов по зероблоку Тильды.

  • @serg1961marhy
    @serg1961marhy 3 місяці тому

    очень подробно и понятно спасибо. Полезная возможность

  • @ЕкатеринаКучина-п5в

    Очень круто!!! Спасибо, искала как реализовать эффект и нашла тебя!! Спасибо! Все четко, по делу и понятно!!!

  • @АндрейЛосюк-к3л
    @АндрейЛосюк-к3л 2 роки тому

    Спасибо! Очень внятно, сразу получилось ! СУПЕР !!!!!!!!!!!!!!!!!!!!!!!!!!

  • @TT-qh9ze
    @TT-qh9ze 3 роки тому

    Большое спасибо за разбор! Очень помогли!

  • @sergeykilchauskas
    @sergeykilchauskas 4 роки тому +1

    Герман, всё доступно описал! Спасибо!!!

  • @pavelyow4852
    @pavelyow4852 2 роки тому

    Герман красавчик!!! Выручил меня, ты бы знал как!!! Благодарность тебе великая!!!

  • @ДенисСимонов-о2н
    @ДенисСимонов-о2н 4 роки тому +1

    Большое спасибо за ваши видео, Герман!

  • @user-digital-cat
    @user-digital-cat 4 роки тому +1

    Круто, все понятно, подробно и доступно объяснил. Спасибо!!!

  • @Kans19
    @Kans19 4 роки тому

    Герман отличный контент, видно экспертизу в этом деле, спасибо за доступность.

  • @Ruslan-wervolf51
    @Ruslan-wervolf51 4 роки тому

    Дай Бог тебе здоровья, добрый человек!))) Обалденный урок!! Спасибо огромное! Я новичок и мне такие видео очень нужны!

  • @СветланаЯркина-и3в

    Спасибо огромное за урок всё очень понятно обьясняете, у меня всё получилось сделать 👍

  • @minornaya
    @minornaya Рік тому

    Спасибо большое за видео, все четко и понятно👍

  • @veronikamezhberg7099
    @veronikamezhberg7099 3 роки тому +3

    Спасибо! Очень внятно, сразу получилось). Но вот вопрос - а как решить задачу демонстрации для остальных экранов кроме десктопа?

  • @АйнагульСултанова-я2п

    Здравствуйте, спасибо за видео!!!

  • @Nataly_Lively
    @Nataly_Lively Рік тому

    отлично объяснили, спасибо большущее!😄

  • @ИзумРуд-к7г
    @ИзумРуд-к7г 3 роки тому

    Благодарю за отличную идею!

  • @user-zz2id4du2c
    @user-zz2id4du2c 4 роки тому

    Герман, узнал о тильде дня 4 назад, короче все понятно и просто. Мне 26 лет, думаю заняться сайтами, начну со своего))) потом как сделаю, пришлю тебе, много интересного увидел в твоём видеоряде (особенно в сайтах твоих подписчиков). Творческих успехов, бесконечного запаса креатива и жизненных сил!

  • @8Nibbler8
    @8Nibbler8 4 роки тому

    Подписался только за это видео! Спасибо! Круто! Хочется еще разборов подобных вариантов анимаций сайтов! ))

  • @margaleks
    @margaleks 2 роки тому

    Благодарю. Очень полезно, сделала - работает

  • @Evgeny_Orlov
    @Evgeny_Orlov 3 роки тому

    Очень круто, и понятно, спасибо, разобрался, до этого триггерило меня а не анимацию

  • @alixandr86
    @alixandr86 2 роки тому

    Спасибо, за 15 минут освоил триггерную анимацию

  • @ayazhanassilbekova448
    @ayazhanassilbekova448 4 роки тому

    Благодарю! Как раз для моего заказа!

  • @fattakhoboris
    @fattakhoboris 4 роки тому

    Жаль нельзя поставить больше одного лайка, респект Герман :)

  • @VovaSumrak
    @VovaSumrak 4 роки тому

    Ну наконец то я нашел как делать этот эффект правильно! Он теперь и адаптивный должен быть под разные мониторы. Спасибо!

    • @staslev1
      @staslev1 4 роки тому

      Пробовал под мобилу делать?

    • @VovaSumrak
      @VovaSumrak 4 роки тому

      @@staslev1 если в настройках страницы отключить оптимизацию под мобилы то он все показывает как на десктопе, и анимации работают по нажатию. Но в моём случае я сделал отдельные блоки под мобилу и там уже без анимации. Моя проблема была в расположение не по гриду а по окну, и в переключении в проценты.

    • @staslev1
      @staslev1 4 роки тому

      VovaSumrak Я новичок в этом.
      Я понимаю что на мобиле по нажатию, но что про оптимизацию? Что то не понял.
      Кинь номер , если не сложно.

  • @СветланаПапеско
    @СветланаПапеско 4 роки тому

    Спасибо большое. Очень полезное видео. Ждём ещё)

  • @agibalova24
    @agibalova24 4 роки тому

    Супер! я такого не встречала еще

  • @tatyanaegorova7669
    @tatyanaegorova7669 2 роки тому

    Супер полезно, огромное спасибо 👍

  • @liudmilaromanova1008
    @liudmilaromanova1008 2 роки тому

    Очень полезно.Спасибо.

  • @Gatta_romana
    @Gatta_romana 2 роки тому

    Супер! спасибо за урок!

  • @ЕгорМакаров-ф3и
    @ЕгорМакаров-ф3и 3 роки тому

    Спасибо!!! Офигенно👍

  • @АлександрПарахин-к9о

    Привет! Классный урок! На этом сайте есть еще крутые элементы, было бы круто что и их показал как делать!! Ты нереально крутой!!!

  • @dmitrykand5142
    @dmitrykand5142 4 роки тому

    Очень полезный видос! Благодарен)

  • @tengri-d7pro
    @tengri-d7pro 3 роки тому

    Благодарю за урок!
    Расскажите пожалуйста про домены, когда сайт заказчика завершаешь и чтобы после этого не было никаких вопросов и проблем про домен!

  • @ekaterinakilikeeva4036
    @ekaterinakilikeeva4036 4 роки тому

    Супер. Спасибо 😃

  • @Nunzar
    @Nunzar 3 роки тому

    Самое понятное видео по анимации и тригерам

  • @the-Humor-House
    @the-Humor-House 4 роки тому

    Спасибо!..от души!

  • @Рафаэль-ш8э
    @Рафаэль-ш8э 4 роки тому

    Чувак, спасибо что так разжовиваешь!!! Ты красавчик!!! 😄 🦾

  • @Ivan-Taiga
    @Ivan-Taiga 4 роки тому +5

    Интересное решение 🤝 Можно было бы продолжить с адаптацией этого фарша под мобилу😉

  • @max-vasilyev
    @max-vasilyev 4 роки тому +1

    Спасибо Герман. Хоть все это знаем сто раз, но смотреть и слушать очень приятно (особенно мысли) И побольше вот таких видео где показана работа в Тильде:) У меня такой вопрос кстати. По какой причине нельзя Alt тег прописать у шейпа?)

  • @ОвикЕгиазарян-ы1й
    @ОвикЕгиазарян-ы1й 4 роки тому

    Спасибо огромное!!!Лайк+Подписка!

  • @Уютныйдом-ц5е
    @Уютныйдом-ц5е 3 роки тому

    Герман, спасибо за такой классный подробный урок. А возможно выставить эти кнопки по виндов конейнер. Если можно подскажите пожалуйста где какие настройки заменить. Заранее спасибо!!!

  • @АринаБарсукова-л4ь

    Спасибо огромное)

  • @ВераШевелева-т5к
    @ВераШевелева-т5к 4 роки тому

    Классно! Спасибо))

  • @Jabberwockyyyy
    @Jabberwockyyyy 4 роки тому

    Спасибо! 👍 нравится пошаговое разъяснение для чайников 😅 то , что нужно) расскажи, как ты прокачиваешь знания? Проходишь курсы или может по статьям Тильды учишься?

  • @angelinaguguchkina4371
    @angelinaguguchkina4371 2 роки тому

    Добрый день! Спасибо за подробный урок, все получилось. только вопрос, при таком размере карточек- в мобильной версии все криво. как настроить мобильную версию?

  • @SmartichUA
    @SmartichUA 4 роки тому

    Герман, ты лучший))) Кроме тебя есть смысл смотреть только Макса Ширко (ИМХО)!!!

  • @stoneless4081
    @stoneless4081 4 роки тому

    Пушка ракета торпеда, спасибо

  • @ОмировВиктор
    @ОмировВиктор 3 роки тому

    Бонжорно) а возможно сделать при скроле чтобы кнопки убегали в сторону и появлялись с другой стороны?????

  • @devralium
    @devralium 4 роки тому

    Очень круто! А как сделать анимацию кривой линии (стрелки) по скроллу? Чтобы не прерывисто, а оставался след. Подскажите, пожалуйста 😢

  • @антоногурцов-ш1у
    @антоногурцов-ш1у 4 роки тому

    Спасибо

  • @valeriepond
    @valeriepond 4 роки тому +2

    Я залипла на сайте на плюсики, скатывающиеся вниз))

  • @VovaSumrak
    @VovaSumrak 4 роки тому

    А можно сделать полную копию варианта тильды? Есть вопросы по этому варианту. Не могу понять как сделать то бы не прыгал текст и адаптивно работал под разные мониторы.

  • @sergeyfrolov9790
    @sergeyfrolov9790 3 роки тому

    Лучший)

  • @moonger9255
    @moonger9255 4 роки тому

    сначала разобрался с анимацией, потом посмотрел видео, не ищу лёгких путей

  • @Станислав_Р
    @Станислав_Р 4 роки тому

    Оч круто).. есть вопрос - как сделать так, чтобы в пяти разных вариантах показа картинки были 5 разных текста?

  • @Stockfishsh
    @Stockfishsh 4 роки тому

    Герман ,добрый день.Как сделать чтобы при наведении курсора на шейп кроме появления соответствующей картинки и анимации шейпа,этот шейп становился кликабельным для перехода на другую страницу?

  • @V-V-R
    @V-V-R 3 роки тому

    спасибо

  • @ZuevMaks1989
    @ZuevMaks1989 Рік тому

    спасибо большое, а это еще можно сделать кнопками с переходом на другую страницу?

    • @germandolgin
      @germandolgin  Рік тому

      назначение ссылок не отражается на анимации, так что можно

  • @TheAkula641
    @TheAkula641 4 роки тому

    Супер, сразу стало ясно ,что это за триггер такой

  • @АннаДанилова-к1ь
    @АннаДанилова-к1ь 4 роки тому

    Спасибо!!!

  • @ВикторСергиенко-ю2и

    Класс!!!

  • @dbazyko
    @dbazyko 4 роки тому

    Спасибо. Ещё анимацию.

  • @АнгелинаВолкова-з1з

    Подскажите, откуда у вас дополнение в настройках - Trigger? У меня такого нет.

  • @olenkaisaen
    @olenkaisaen 4 роки тому +1

    Герман, а под мобильник нельзя сделать подобное? Есть 5 кнопок, при нажатии на каждую смена фото. Почему триггером не корректно работает. То меняет фото , то нет

  • @elinalat557
    @elinalat557 4 роки тому

    Подскажите пожалуйста такой момент. Когда вставляешь картинку в зеро блок или через шейп, она полностью перекрывает видимость рабочего поля. Не понятно как вообще ее выравнивать относительно устройства? Даже если убираешь ее в самый нижний слой, рабочее поле не видно все равно. Как быть?

  • @makc6878
    @makc6878 4 роки тому

    🤘 я просто вспомнил, как я это все на JS писал 😅😅😅

  • @weightstudio4029
    @weightstudio4029 4 роки тому

    Какое должен быть разрешение изображения
    для нормального отображения в Zero Block

  • @julianayablonskaya9350
    @julianayablonskaya9350 4 роки тому

    спасибо. полезно!

  • @hafyyyy
    @hafyyyy 4 роки тому

    Привет, можешь подсказать, как реализована анимация в блоке "Услуги, виды деятельности фотографа". Вопрос конкретно такой: Как сделать так, чтобы карточка при скролле появлялась одновременно вся, то есть со всем содержимым (фотографиями, текстами и кнопками). Или это готовый блок? Спасибо :)

  • @dlyasebya46
    @dlyasebya46 4 роки тому

    Герман а можешь снять видео как сделать качественную обложку для интернет магазина в Заро блоке , думаю многим зайдет видео !

  • @ТаяБожьяКоровка
    @ТаяБожьяКоровка 3 роки тому

    а почему не показали как сделать текст под каждым выпрыгивающим блоком??? я так ждала((

  • @НикитаЧаловский

    Приветствую. Вряд ли ответите конечно, но появился вопрос. Как сделать рабочую url сылку, после проигрывания определенной анимации. Да, прозрачнвй шейп частично решает проблему, но когда появляется больше 1 кнопки, на которую нужно жать, появляется проблема с повторения анимации с самого начала (не очень красиво выглядит). Если способ еще как-то решить эту проблему?

    • @germandolgin
      @germandolgin  2 дні тому

      Отвечаю, но к сожалению вообще не понял вопрос, что? зачем? переформулируйте понятно-тогда я смогу ответ дать)

  • @sianotte
    @sianotte 4 роки тому

    Все прекрасно, видео понятное и полезно. Но забыл уточнить ОГРОМНУЮ проблему - если загружать фото через shape - они хуже загружаются, чем если бы через Image. Столкнулась с этим в работе с клиентами - и теперь много негатива с их стороны(( Приходится все менять, обрезать и уменьшать вес - потому что с Shape - реально очень плохо загружается. Даже Сейчас посмотрела сайт для фотографа, который в описании - та же проблема

  • @terekhov83
    @terekhov83 4 роки тому

    Герман привет меня зовут Сергей. Спасибо за видео . Классная идея. А как можно сделать чтобы при нажатии на кнопку "снимаю свадьбы" внизу ещё выпадало меню из 5 пунктов ?

    • @germandolgin
      @germandolgin  4 роки тому

      Сделаю видео отдельно. Идея-то супер для видоса

    • @terekhov83
      @terekhov83 4 роки тому

      @@germandolgin у многих не раскрыта тема с многоуровнем меню. Классное многоуровневое меню у сервиса для интернет магазинов эквид.

    • @germandolgin
      @germandolgin  4 роки тому

      @@terekhov83 Имхо с точки зрения юзабилити многоуровневое меню это супер неудобно.

    • @terekhov83
      @terekhov83 4 роки тому

      @@germandolgin ua-cam.com/video/aluJXukM5CM/v-deo.html

    • @germandolgin
      @germandolgin  4 роки тому

      @@terekhov83 Да это как бы и несложно, просто неудобно использовать. Когда встречаю такое в интернет магазинах думаю что они издеваются

  • @КириллАлександров-н3т

    А кнопки из них можно сделать?(навел на "свадьбы" -увидел фото- нажал и перешел к другому разделу(например,оплата)

  • @tinawed
    @tinawed Рік тому

    Спасибо за материал! скажите, пожалуйста, как это будет работать для мобильной версии - анимация по наведению. пробую делать триггерную анимацию, чтобы при наведении появлялась подложка и текст над объектом, но в мобильной версии не работает. просто накладывается объект сверху, как в макете

    • @germandolgin
      @germandolgin  Рік тому

      Ну во первых на мобилке надо включить анимацию, насколько я помню на мобилке автоматически меняется триггер с наведения на нажатие в таких ситуациях, не забудьте включить и тогда посмотрите

    • @tinawed
      @tinawed Рік тому

      @@germandolgin затупила) спасибо)))

  • @staslev1
    @staslev1 4 роки тому

    Скажите, тригерна работает на мобильных?

  • @mr_mad_maks
    @mr_mad_maks 4 роки тому

    У меня, возможно, глупый вопрос...а во сколько тебе обходится использование Тильды? Ведь ресурс не бесплатный

  • @youra5391
    @youra5391 2 роки тому

    Всё замечательно, но можно же копировать свойства анимации и вставлять на другой элемент.

  • @nika7149
    @nika7149 4 роки тому

    Герман, на этом сайте стоят не релевантные ссылки на желтых прямоугольниках в мобильной версии: верхний (над свадьбами) переход на концерты, нижний (студийная) переход на контент съемку. Думаю, прямоугольники выполняют декоративную функцию, а ссылки попали туда случайно.

    • @germandolgin
      @germandolgin  4 роки тому +1

      Ника огромное вам спасибо как всегда 👍))

  • @Kudryaashh
    @Kudryaashh 4 роки тому

    Можно пожалуйста многостраничный сайт

  • @dmitriyb4948
    @dmitriyb4948 3 роки тому

    Спасибо, очень крутая задумка!
    но вот у меня проблемка: когда навел на блок все работает - нужная картинка в 100 появляется , но когда наводишь на текст внутри блока то картинка опять в 0 и снова в 100! то есть анимация на картинке запускается с 1 шага при наведении на текст внутри

  • @LeelakateMoscow
    @LeelakateMoscow 2 роки тому

    привет. расскажи пожалуйста как с 0 сделать кодом красивую галерею с работающими кнопками на каждом слайде

    • @germandolgin
      @germandolgin  2 роки тому

      Она же есть и так (слайдер)

  • @MKMinasyan
    @MKMinasyan 11 місяців тому

    Ребят кто-нибудь скажет, почему когда я стравляю картинку или любой элемент на вес холст, то автоматический оставляет отступить по бокам?

    • @germandolgin
      @germandolgin  11 місяців тому

      он ставится в грид контейнер, перенесите его в виндоу контейнер

    • @MKMinasyan
      @MKMinasyan 11 місяців тому

      Я ставлю в виндоу контейнер, но нечего не меняется

  • @danielsiroshtan4975
    @danielsiroshtan4975 4 роки тому

    Номер блока ?

  • @gulnaranarbaeva36
    @gulnaranarbaeva36 4 роки тому

    Герман привет ) смотрю твои видео , и многое для себя открыл возможностей в них.Но одного, вроде простого момента, ни как не повторить. Подскажи как это сделано ? Анимация на витрине проектов с изменением цен и корректной ее работе при клике. wood-brus.ru/doma-iz-brusa
    Заранее спасибо)

  • @sergeykilchauskas
    @sergeykilchauskas 4 роки тому +1

    Кстати, смотрю на скорости х1,5))))))

  • @-Stand-Alone-Complex
    @-Stand-Alone-Complex 2 роки тому

    У кого происходит дрожание при переводе курсора с шейпа на текст, отключите у текста pointer events (none).

  • @ivalya1982
    @ivalya1982 2 роки тому

    скажите пожалуйста а на мобильной версии это должно работать?

    • @germandolgin
      @germandolgin  2 роки тому +1

      Там надо специально ее включить, по умолчанию выключена

  • @ТаяБожьяКоровка
    @ТаяБожьяКоровка 3 роки тому

    Здравствуйте. Вы так быстро рассказываете, и не все показываете что не возможно научиться новичку((( уже час пытаюсь повторить Ваш опыт и ничего не получается, не могу найти где находятся все слои(( у меня в анимации нет добавить триггеры как у Вас((( нужно намного подробнее и медленнее(((

    • @germandolgin
      @germandolgin  3 роки тому

      В зеро блоке в правом верхнем углу нажмите на три точки и включите слои. Там будет написано layers. Может быть другие мои видео по анимации покажутся вам попроще

  • @НиколайПирко-п9г
    @НиколайПирко-п9г 2 роки тому

    Классно, сними пжл вторую часть по адаптации к мобильным версиям данного блока.