Плагины для frontend разработчика - AnimateCss
HTML-код
- Опубликовано: 16 ноя 2024
- Пройди БЕСПЛАТНО профориентацию в IT - bit.ly/2NLILne
В этом уроке мы рассмотрим с вами небольшой плагин, под название AnimateCss - daneden.github....
С помощью этого плагина можно добиваться очень классных эффектов, и один из подобных мы разберем в этом уроке.
Не ограничивай себя видеоуроками на RUclips!
Узнавайте еще больше полезной информации! Общайтесь с опытными разработчиками, преподавателями и развивайся через личное общение!
Школа онлайн-образования: loftschool.com/
Telegram: telegram.me/lo...
Slack: slack.loftblog.ru/
Сайт: loftblog.ru/
Instagram: / loftblog
Группа вконтакте: loftblog
Facebook: / loftblog
Twitter: / loft_blog
Больше уроков от lofblog: #loftblog
Все уроки по хештегу: #loftblogPlugin
Полезные уроки для веб-программиста: #вебпрограммист
#jquery #html #css
Поставь лайк - смотивируй автора писать еще :)
Отличный урок!!! Автору большой палец вверх! Забираю в избранное:)
Разогнался, чаще всех снимаешь:) Спасибо!
Пожалуйста) Стараюсь, просто много идей :)
Супер спасибо ))) этот урок помог найти удобнее реализацию через data- атрибуты правда без обратки но ее можно всегда дописать. Главное что вы задали мне вектор поиска еще раз огромное спасибо
Очень рад что смог помочь :)
Молодец. Хороший урок. Но больше всего понравилась озвучка. Приятно слушать.
Спасибо, очень приятно :)
Спасибо, огромное! Красавчик ещё снимай!
Класс! Артем спасибо.
+1 за выкладывание кода уроков
Спасибо ,хороший урок ,а самое главное полезный!
Валидация кстати хорошая идея , я бы посмотрел !
Значит сделаем ;)
Спасибо!! очень классный плагин и доходчивая трактовка!!
классная подача!! кстати, мне показалось, что автор смакует работу голосом))) хороший актер дубляжа мог бы получится)))
Спасибо за урок. Полезная информация.
Большое спасибо ! Отличный скрипт ! отличный блог !
Спасибо за комментарий)
Артем, как всегда - все 4 ё T lK O !!! Мы нуждаемся в тебе 1 ноября. Спасибо
Спасибо) Спрошу на счет этого у ребят, может буду выступать :)
Благодарствую!
Всегда пожалуйста)
понравилось! и голос приятный
Все супер! Молодцы!!!
Шикарно!)
молодчик, очень интересно
Спасибо большое)
Чудно) Спасибо.
Ребят, очень круто!!)))
Спасибо большое :)
Выкладывайте, пожалуйста, исходники с урока
+
Можно вопрос, зачем добавлять класс с visibility чем не подходит opacity:0???
Можете добавить opacity, но может быть проблема, так как класс animated делает анимацию плавной. И свойство opacity можно как раз плавно анимировать. А вот с visibility такого не получится.
То есть, в самом начале, у вас блоки могут плавно исчезнуть, а если использовать visibility, то мы этого не увидим.
Спасибо за отличный урок!
А есть ли аналог программы, в которой работали с кодом, но на windows, а то netbeans не подсвечивает так здорово js и css?
atom.io/
Michael Demchenko Спасибо!
Очень кстати, спасибо=)))
Вот это крутяк!!!
По отдельности плагины работают,но когда пытаюсь их "подружить" - ничего не происходит.В чем может быть проблема?
из-за waipoint в хроме не работает background-attachment:fixed; , а точней очень глючит и фон дергается, кто то встречался с такой проблемой?
Ребят, очень круто! Спасибо.
П.С. Кажется waypoint обновился и теперь возвращает не элемент по this, у меня вместо this только с this.element работает скрипт.
Супер!
еще хотел задать вопрос - видео по parallax (как делать) будете снимать?
Я планировал снимать, но есть человек, который знает гораздо лучше. Более вероятно что будет снимать он.
Артём Анашев
это хорошо. поскорее бы! у вас тоже очень и очень неплохо получается ))
Valery Semenencko :) Спасибо, я спрошу у ребят, может я сделаю что-то вроде "Parallax для новичков"
кстати, есть еще одна интересная тема - "тихие" placeholders в Sass. Раскроете эту тему?
Ну она не связана с плагинами. Но, возможно, у нас будут уроки по Sass, там тогда это будет.
а можно еще ссылку на исходники выкладывать, для самых ленивых)) А урок класс, лайк!
В следующий раз постараюсь все выложить ;)
У меня возникла проблема, в консоли выдает ошибку: $(...).waypoint is not a function
+Павел Попов проверте подключен ли Waypoint, более вероятно что waypont просто не подгрузился
почему waypoint не работает через this ?
Если пишу таким образом то все норм
$(".card-rotate").waypoint(function () {
$(".card-rotate").addClass("animated fadeInUp");
}, {
offset: '60%'
})
а если через $(this) то ничего не происходит
а как сделать, чтобы он на мобильных устройствах не работал?
ReferenceError: Waypoint is not defined все время выдает ошибку и ничего не получается. Может вы в чем то ошиблись? Либо не полностью раскрыли информацию?
у меня одного анимация на странице отрабатывает только один раз - вверх-вниз и все, если еще раз вверх - то уже ничего нет. у меня ошибка? а так - урок классный, нечего сказать! за раскрытие темы waypoints - спасибо! ))
Думаю, что проблема в добавлении классов.
Если ошибка осталась, то можете скинуть код, я гляну.
Артём Анашев
ок за подсказку, еще раз сам попробую проверить. уж если не получиться, тогда помощь попрошу ))
Thx man.
На firefox не пашет :(
Я с помощью scrollreveal.js такие штуки делал
Хорошим SASS решением этого плагина будет github.com/tgdev/animate-sass, он модульный. Присутствует в bower
а вот это круто, спасибо за ссылку.
Как на кручу, не получается по цепочке что-либо вызать для отрицательного оффсета. Что я делаю не так? jsfiddle.net/Lkm98ozs/
+Агнаман Шаманский если я не ошибаюсь, то для отрицательного надо написать что-то вроде: "offset: (-10)"
+
зачем изобретать велосипед, когда уже давно есть wow.js
Там есть повторяющаяся анимация?
ужас как громоздко