Подозреваем, что тебе надоело читать постоянную рекламу. Поэтому предлагаем просто подписаться на наших хороших друзей!

Тебе не нужно больше тратить время на поиски материала — достаточно отслеживать то, что интересно именно тебе! А материала там очень много: как теоретического, так и практического.

💾 Fluid Text Hover – жидкий эффект для текста. Текстура фонового изображения тянется за мышкой, благодаря чему текст переливается.

Texture Transition Hover Effect — текстурный переход между изображениями при наведении, реализованный с помощью Three.js и TweenMax.js.

#hover #3D #threejs #TweenMaxjs

https://codepen.io/frost084/pen/NZdwZO

Svg.js- легкая библиотека для управления и анимации графики SVG

Упрощает создание и управление SVG с помощью JavaScript.

https://github.com/svgdotjs/svg.js

https://svgjs.dev/docs/3.0/


@about_javascript

Эй, заголовок, подвинься! Тут босс свой email вводит.

Пример применения:
🔶 ввод электронной почты для входа в аккаунт;
🔶 ввод электронной почты для отправки документов;
🔶 ввод электронной почты для подтверждения аккаунта при регистрации.

#формы

https://codepen.io/coelho-na/pen/wveOqde

Wi-Fi Fail Animation

Анимация ошибки при подключении к Wi-Fi, реализованная на CSS и SVG, c применением JavaScript

#codepen #css #svg #js #ui_элементы

https://codepen.io/jkantner/pen/OJEMxZR

@about_javascript

​Как программисту записать свой трек

Наиболее привычным инструментом для программиста является редактор кода. Поэтому и музыку создавать будем там. Для этого нам потребуется Slang — язык программирования звук на основе, созданный с применением JavaScript.

Подробнее о языке, а также инструкция по использованию здесь:

https://github.com/kylestetz/slang

#slang #javascript

Apple Mice

Анимация разных вариантов мышек, написана с помощью javascript и css.

#анимация #css #js

https://codepen.io/joshbader/pen/njKxzB

💾 Changing Face Rating – шкала для оценки с анимированным смайликом, который меняется в зависимости от величины рейтинга.

@about_javascript

Bongo Cat Codes

Вы наверняка видели этот забавный мем в виде gif’ок или видео. Автор этого проекта решил реализовать его с помощью HTML и CSS, а вернее препроцессоров Pug и SCSS. Рисунок, разумеется, сделан с помощью SVG, а анимация реализована силами CSS.

Посмотреть код можно тут:

https://codepen.io/carolineartz/pen/VwYwZaP

#codepen #pug #scss

@about_javascript

Glass Morphism

Приятная анимация кнопок. 

#js #css #html #coden

https://codepen.io/katarzynamarta/pen/rNdbbVq

@about_javascript

Decryption Effect with Pseudo Elements

Эффект расшифровки с псевдоэлементами. Реализован с помощью CSS и JavaScript.

#анимация #css #js

https://codepen.io/georgehastings/pen/YNMEbe

js2flowchart – Инструмент для визуализации JS-кода в виде flowchart диаграммы.

https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart

​mojs – очень интересный инструмент для создания моушн-графики на JavaScript с очень красивыми демками

Библиотека обладает декларативным API и хорошим списком демок и туториалов

⤷ Ссылка на проект

@about_javascript | #JavaScript #Interesting

​Запросы на сервер. Fetch, XMLHttpRequest (XHR), Ajax

Умение работать с запросами — один из главных навыков разработчика, потому что запросы отправляются и принимаются постоянно различными частями приложений. В этом виде вы в простой и понятной форме сможете разобраться в том, как работают запросы, какие варианты существуют и как их применять:

https://youtu.be/eKCD9djJQKc

#javascript #виде

@about_javascript

Little Gallery

Небольшой пак фотографий/картинок в виде карточек, которые анимируются вот таким способом. Непонятно на сколько это практично, но как минимум это забавно.

#js #css #html #coden

https://codepen.io/yoann-b/pen/abEjWgq