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

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»