12 интересных веб-экспериментов

13469

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

В статье представлены лучшие элементы пользовательского веб-интерфейса (UI) и анимации, которые были размещены на сайте CodePen.  Все проекты были созданы с помощью CSS и JavaScript.

Animated solar system

Разработанная Юлианом Гарнье (Julian Garnier) анимированная модель представляет восемь планет, вращающихся вокруг Солнца в 3D (Boffins недавно решил, что официально Плутон больше не является планетой). На создание этого демо автора вдохновили проекты Алекса Гирона (Alex Giron) и Николаса Гэлледжера (Nicolas Gallager).

На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.

 Whale

Основанная на этой флэш-анимации кита, который следует за указателем мыши по экрану, версия Диего Леме (Diego Leme) на CodePen создана с использованием SVG и JavaScript. Это отличный пример того, как некоторые простые формы могут работать вместе, создавая нечто совершенно удивительное.

На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.

Jelly menu

Оно выглядит, как и любое другое меню, пока вы не прокрутите его и увидите, что оно сделано из желе! Пункты меню изгибаются при движении и с протяжным звуком возвращаются на место в неподвижное состояние.

На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.

Draggable overflow

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

На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.

Fluid grid using text align: justify

В проекте используются свойства «выравнивание» текста  для создания подвижной таблицы на веб-странице, что избавляет вас от необходимости определять горизонтальные поля, позиционирование элементов или отменять оное. Вы можете узнать о методе больше в блоге Патрика Канка (Patrick Kunka).

На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.

Squishy buttons

Этот невероятный проект создает эффект псевдотактильного касания, даже если на кнопки воздействуют с помощью мыши.

На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.

Pure CSS peeling sticky

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

На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.

Color Smoke

Анимация цветных частиц, следующих за курсором мыши.

На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.

Balls of fear

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

На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.

Tearable cloth

Это занавес, который вы можете встряхнуть. Нет, даже больше. Вы можете встряхнуть ткань действительно сильно. Можно даже сделать отверстия и оторвать куски, которые будут разлетаться по экрану. Вы можете полностью разрушить занавес и почувствовать себя настоящим вандалом.

На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.

JavaScript train

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

На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.

Gravity points

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

Перевод статьи: «12 web experiments that show you don’t need Flash»

13469