it Новости 10 интересных веб-экспериментов на основе HTML, CSS и JavaScript
10 интересных веб-экспериментов на основе HTML, CSS и JavaScript

10 интересных веб-экспериментов на основе HTML, CSS и JavaScript

1 679
26 декабря 2019 в 15:40

Талантливые разработчики и дизайнеры всего мира не перестают выпускать новые удивительные проекты. Приглашаем вас посмотреть на самые захватывающие из них. 

Особенно круто, что каждый элемент этой подборки создан с использованием только простейших технологий: JavaScript, HTML и CSS.

#1 - Интерактивный кассовый аппарат

Вы можете «прикоснуться» к настоящей ретро-машине – старому кассовому аппарату. С помощью кнопок прибавляйте, вычитайте и даже печатайте квитанцию. А при нажатии на «TEND» наслаждайтесь забавной анимацией появляющихся денег в сопровождении звуковых эффектов.  



#2 - Cubewave 10

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



#3 - Кошки-смайлы

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



#4 - Умный домашний температурный ползунок

Перед нами интерактивный водный термометр, ползунок которого пользователь должен самостоятельно передвигать между значениями 0 и 100. С увеличением или уменьшением температуры цвет жидкости внутри прибора тоже будет меняться. 



#5 - Частицы

Демонстрация состоит из огромного количества разноцветных частиц, плавно перемещающихся по заданной траектории. Несмотря на сложное движение элементов и их обилие, проект работает без задержек, отставаний и замедлений. 



#6 - Мобильный Twitter 

На экране смартфона мы видим копию приложения Twitter, созданную с использованием Vue.js. Клон работает точно так же, как настоящая соцсеть, т. е. вы можете листать ленту, публиковать и лайкать твиты, а также загружать свои фотографии.



#7 - Соедините четверку

Логическая игра для двоих. Игроки по очереди должны сбрасывать в любую колонку поля диск своего цвета (красный/черный). Цель – выстроить 4 своих диска подряд в ряд в любом направлении: горизонтально, вертикально или по-диагонали. Если доска заполняется до того, как любому из участников игры удается это сделать, объявляется ничья. 



#8 - Заблудившийся в виртуальном лесу 

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



#9 - Акула Сэмми

Использовав только HTML, SVG и CSS, автор данной демонстрации нарисовал очень милую мультяшную акулу, плавающую среди океанских волн. Изображение прекрасно детализировано, приятно разукрашено и наделено плавной анимацией.



#10 - Концентрические круги

Фантастическое демо с вращающимися концентрическими кругами, которые перетекают из одной формы в другую. Так как анимация построена только на  CSS-переходах, кадры сменяются супер гладко и складно.



Больше интересных новостей

Комментарии для сайта Cackle