Progress Button

Кнопка состоит из нескольких svg, анимируемых библиотекой anime.js

#js

​Скучный Интернет и как «бесполезные сайты» могут спасти от этого

Из 1,1 миллиарда веб-сайтов, составляющих Всемирную паутину, только 18% в настоящее время активны. Среди них можно найти настоящие алмазы — веб-сайты, которые активны и тщательно разработаны, но при этом самым забавным образом бесполезны.

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

#ru

Parallax World

Эффект создан на чистом CSS.

#css

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

Ответ

'Making pancake' loader

Анимация загрузки в кулинарном стиле, написана на чистом CSS.

#css

Frosted Glass loader

Оригинальный загрузчик в виде svg картинки, анимируемой библиотекой gsap.

#js

JavaScript. Задача

Дан лицензионный ключ, представленный в виде строки S. Строка разделена на N + 1 подгруппу, разделенных N дефисами. Также дано число K.

Необходимо преобразовать лицензионный ключ таким образом, чтобы каждая подгруппа содержала ровно K символов, за исключением первой подгруппы, которая может быть короче K символов, но должна содержать хотя бы 1 символ. Также между двумя любыми группами должно быть вставлен дефис. Все строчные буквы преобразовать в прописные.

Входные данные: строка S, состоящая только из букв английского алфавита, цифр и дефисов. K - целое число.

Вывод: преобразованная строка.

Примеры:

S = "5F3Z-2e-9-w", K = 4
Output: "5F3Z-2E9W"

S = "2-5g-3-J", K = 2
Output: "2-5G-3J"

Ответ

Custom Tooltip

Меню при нажатии на которое появляется пользовательская подсказка. Написано на чистом CSS.

#css

Mobile Menu Animation

Оригинальный эффект раскрытия меню.

#js

CSS Galaxy Button

Верстка создана на HTML и CSS. На JS создаются частицы с рандомными значениями, которые записываются в CSS-переменные.

#js

Gradient background with waves

Анимированный градиентный фон с волнами, реализованный на чистом CSS.

#css

Fancy Swiper slider

Оригинальный слайдер, созданный с использованием библиотеки Swiper.

#js

Hopdot Loader

Плавный и приятный прелоадер в виде перекатывающихся точек, реализованный с помощью GSAP.

#js

Sharp & Glowing dark card

Создано и анимировано на HTML и SCSS.

#css