JavaScript®: The New Toys

Автор: T.J. Crowder
Год издания: 2020

#javascript #english

Helical dust

Бесконечная анимация, созданная на JS. Все частицы отрисовываются на canvas.

#canvas #js

Detect Mouse Position

Красивый эффект при наведении на кнопку, реализованный с помощью Pixi.js.

#js

JavaScript. Что будет выведено в консоль?

Ответ

Light/Dark Toggle With Morphing Icon

Переключатель темы на HTML и CSS. Иконка сверстана и анимирована автором вручную.

#css

Grid Items Share Background

Сетка с анимированными блоками, выполненная с помощью SCSS и JavaScript.

#css #js

JavaScript. Что будет выведено в консоль?

Ответ

Literally Linked Lists

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

#css #js

JavaScript. Что будет выведено в консоль?

Ответ

Time Comparison

Картинка меняется в зависимости от выбранной таймзоны.

#css #js #vue

JavaScript. Что будет выведено в консоль?

Ответ

Spaceboy Animation Text

Анимация текста, реализованная с помощью GSAP.

#gsap

Minimal keyboard

Виртуальная клавиатура, выполненная с помощью Pug, SCSS и JavaScript. Клавиатура реагирует на нажатие клавиш.

#css #js

JavaScript. Что будет выведено в консоль?

Ответ

Player/User Cards

Верстка карточек на HTML и CSS. При наведении задействуются CSS-трансформации.

#css

Bouncing Text Animation

Анимация отскока текста, реализованная с помощью CSS и Splitting.js.

#css #js

Digital clock with separate indicators

Необычные часы, сделанные из трех svg-картинок, параметры которых задаются через JS с помощью логики вычисления текущего времени пользователя.

#css #js

Sassy Search Bar

Строка поиска с подсказками, выполненная с помощью SCSS и TypeScript.

#css #js

JavaScript. Что будет выведено в консоль?

Ответ

Morphing Submit Button

Содержимое кнопки - svg-картинка. При нажатии на кнопку изменяются CSS-классы на элементах кнопки.

#css #js