This media is not supported in your browser
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Подборка CSS-анимаций с CodePen
Собрали интересные варианты параллакс-анимаций, по ховеру и скроллу. Сохраняйте подборку себе, отправляйте другу-разработчику, а если понравилось — кликайте💜 Параллакс-анимация фона
https://tml.io/j83i5
автор: @isladjan
Многослойная параллакс-анимация
https://tml.io/n7aqf
автор: @patrickwestwood
Анимация по ховеру при взаимодействии с фоном
https://tml.io/fnimj
автор: @soulwire
Анимация кнопок при наведении
https://tml.io/jb7a0
автор: @pirrera
Бесконечная анимация по скроллу
https://tml.io/71m6e
автор: @scottbram
Анимация по скроллу для фона
https://tml.io/xv3gl
автор: @jonathansampson
А чтобы научиться создавать и работать с CSS-анимациями на профессиональном уровне — приходите на курс. Сейчас на него действуйет скидка 30% – https://tml.io/drhbs.
Собрали интересные варианты параллакс-анимаций, по ховеру и скроллу. Сохраняйте подборку себе, отправляйте другу-разработчику, а если понравилось — кликайте💜 Параллакс-анимация фона
https://tml.io/j83i5
автор: @isladjan
Многослойная параллакс-анимация
https://tml.io/n7aqf
автор: @patrickwestwood
Анимация по ховеру при взаимодействии с фоном
https://tml.io/fnimj
автор: @soulwire
Анимация кнопок при наведении
https://tml.io/jb7a0
автор: @pirrera
Бесконечная анимация по скроллу
https://tml.io/71m6e
автор: @scottbram
Анимация по скроллу для фона
https://tml.io/xv3gl
автор: @jonathansampson
А чтобы научиться создавать и работать с CSS-анимациями на профессиональном уровне — приходите на курс. Сейчас на него действуйет скидка 30% – https://tml.io/drhbs.
👍5❤2🔥2
Завтра в 13:00 пройдёт лайв «Зачем фронтенд-разработчику нужен TypeScript?».
Расскажем, что это за зверь такой, где вы с ним столкнётесь и что делать дальше.
Лайв проведут:
— Игорь Антонов — автор профессиональных курсов по JavaScript в HTML Academy.
— Иван Копнин — фронтенд-разработчик в компании «Тензор» и автор курсов для мидлов в HTML Academy.
Записывайтесь и мы напомним о старте лайва: https://tml.io/8kcl9
Расскажем, что это за зверь такой, где вы с ним столкнётесь и что делать дальше.
Лайв проведут:
— Игорь Антонов — автор профессиональных курсов по JavaScript в HTML Academy.
— Иван Копнин — фронтенд-разработчик в компании «Тензор» и автор курсов для мидлов в HTML Academy.
Записывайтесь и мы напомним о старте лайва: https://tml.io/8kcl9
🔥4👍2
Привет! Собрали закреп с самыми полезными материалами о том, как стать мидл фронтенд-разработчиком.
Начать обучение бесплатно
Бесплатный доступ ко всем курсам
База знаний
Узнать свой уровень
Тест для фронтендеров
Как вырасти до мидла
Как стать мидлом
Ключевые навыки фронтендеров в 2023
Что должен уметь мидл в разных компаниях
Как составить план развития: неочевидные советы
Подборки
Бесплатный учебник по Git и GitHub
34 инструмента для веб-разработчика на каждый день
16 полезных плагинов JavaScript в VS Code
5 книг для фронтенд-разработчика
TELEGA-MIDDLEPlease open Telegram to view this post
VIEW IN TELEGRAM
👍4🥰4❤1
Как стать мидлом pinned «🦖 1️⃣ 2️⃣ 3️⃣ 4️⃣ 5️⃣ Привет! Собрали закреп с самыми полезными материалами о том, как стать мидл фронтенд-разработчиком. Начать обучение бесплатно Бесплатный доступ ко всем курсам База знаний Узнать свой уровень Тест для фронтендеров Как вырасти до мидла…»
Зачем нужны анимации в вебе и как их создавать
В статье показываем примеры анимаций, рассказываем, как создать и сделать так, чтобы всё работало, как часы.
Читайте — https://tml.io/kyy52.
В статье показываем примеры анимаций, рассказываем, как создать и сделать так, чтобы всё работало, как часы.
Читайте — https://tml.io/kyy52.
HTML Academy
Зачем нужны анимации в вебе и как их создавать
Плавно, красиво, на чистом CSS.
👍3
Через 15 минут в прямом эфире расскажем, что такое TypeScript и зачем он нужен в работе фронтенд-разработчику.
Вы ещё успеваете присоединиться: https://tml.io/8kcl9
Вы ещё успеваете присоединиться: https://tml.io/8kcl9
Способы создания анимаций
Обычно разработчики создают анимации в паре с дизайнером. Дизайнер придумывает анимацию, рисует её в специальной программе, например After Effects, и затем присылает фронтендеру видео. А вот как реализовать идею — решать разработчику. Он может использовать разные способы создания анимаций — подробнее о каждом варианте рассказали в карточках.
Обычно разработчики создают анимации в паре с дизайнером. Дизайнер придумывает анимацию, рисует её в специальной программе, например After Effects, и затем присылает фронтендеру видео. А вот как реализовать идею — решать разработчику. Он может использовать разные способы создания анимаций — подробнее о каждом варианте рассказали в карточках.
👍6
От какой технологии для создания анимаций на сайте полностью отказались в 2020 году?
Anonymous Quiz
6%
WebGl.
87%
Flash.
2%
JavaScript.
4%
Canvas.
🤔2
🤔1
Какое свойство позволяет настроить CSS-переход?
Anonymous Quiz
79%
transition.
18%
transform.
2%
opacity.
👍1
Какого свойства не существует?
Anonymous Quiz
36%
transition-timing-function.
56%
transition-name.
8%
transition-delay.
За что отвечает значение 0.4s в правиле выше
Anonymous Quiz
65%
За длительность анимации.
18%
За скорость анимации.
17%
За задержку анимации.