Анимированная кнопка, выполненная с помощью CSS, SVG и JavaScript.

#css #js

Полный код

@about_javascript

Tilting Maze game - игра "Лабиринт", сделанная с использованием CSS и JavaScript. Поведение шариков смоделировано с использованием законов тригонометрии.

#codepen #css #js

@about_javascript

​Слайдер для сайта

#html #css #js #slider

https://codepen.io/thebabydino/pen/rNzRQWq

@about_javascript

Metrognome

Гном-метроном, выполненный с помощью CSS и библиотеки GSAP.js.

#css #js

https://codepen.io/hexagoncircle/pen/JjOaabp

@about_javascript

Planet Picker

Небольшое приложение на JS, в котором реализован просмотр информации о планетах солнечной системы.

#css #js

https://codepen.io/team/keyframers/pen/YoaeGg

@about_javascript

Hamburger Icons Animations

Несколько вариантов анимации иконки-гамбургера, реализованные с помощью CSS и JavaScript.

#js

https://codepen.io/ahmadbassamemran/pen/VQwPGr

Анимация загрузки

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

#js #css #html #coden

https://codepen.io/kira-code/pen/BaYGwYg

Wi-Fi Fail Animation

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

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

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

@about_javascript

Apple Mice

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

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

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

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

Little Gallery

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

#js #css #html #coden

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

Checkbox Animations With Indeterminate State

Анимированный checkbox, выполненный с помощью SVG, CSS и JavaScript.

#css #js

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

🌀 VelocityJS demo

Подвижная анимация для загрузки. Реализована с помощью JavaScript и CSS.

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

https://codepen.io/sol0mka/pen/eYgydO

@about_javascript

Pixi.js — красивые 2D анимации

Изначально Pixi.js использовался для создания игр в браузере, но довольно быстро набрал популярность среди разработчиков. Pixi позволяет создавать красивые анимации для рекламы, баннеров на сайтах, поэтому может быть добавлен в любой проект:

https://pixijs.com/

#js

Полезная библиотека для понимания работы JS

js2flowchart — библиотека визуализации для преобразования любого кода JavaScript в красивую блок-схему SVG. Вы можете изучать чужой код, делать рефакторинг или писать документацию, не путаясь в функциональности. А начинающим — неплохая шпаргалка по foo, while, if:

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

#js

Заказчик: Нужно на нашем сайте сделать кнопки зеркальными, чтобы пользователь заходил и видел своё отражение.

Я: Ни слова больше

CodePen-проект: https://codepen.io/tyeb_11/pen/dygoJow

#js

@about_javascript

90% - SVG Animation

SVG-анимация загрузки. Реализована с помощью JavaScript.

#js

https://codepen.io/Adir-SL/details/zYozoNZ