Спецэффекты для вашего сайта

www.codepen.io — это незаменимое оружие в арсенале каждого веб-разработчика. Если вы еще не знакомы с этим сайтом, я введу вас в курс дела. CodePen — это полноценная платформа для frontend-разработчиков, готовых поделиться своими достижениями со всем миром и научить других чему-то новому. Исходный код этих достижений распространяется в свободной форме. А это значит, что каждый, кто только пожелает, имеет возможность использовать его в собственных целях — для своих проектов, для удовлетворения заказчиков, для самообразования и т.д. Все ограничивается только вашей фантазией.

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


Закончив вчера вечером с работой, я посмотрел последнюю серию «Шерлока» и решил поискать на CodePen что-то новенькое. Моим находкам и посвящена эта статья.

1. Викинги в море

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

Исходник: «Викинги в море».

CodePen, Викинги в мореВикинги в море
Источник: www.codepen.io
A Pen By Fabio

2. Кот-лоадер

Мне часто приходится работать с прелоадерами. Я рьяный сторонник того, что пользователям не этично показывать процесс загрузки страницы — весь тот кошмар, когда страница скачет и пугает бедных посетителей. Приходилось использовать различные прелоадеры, но такого я еще не встречал. Автор сломал все стереотипы и разработал прелоадер в виде няшного кота, который — несомненно! — развеселит ваших заказчиков и посетителей.

Исходник: «Кот-лоадер».

CodePen, Кот-лоадерКот-лоадер
Источник: www.codepen.io
A Pen By Rplus

3. Морские волны

Название немного не подходит. Я бы назвал эту красоту «Diffusion» («Диффузия») или «Amazing Bubbles» («Удивительные пузырьки»).

Люблю на главной странице делать полноэкранный слайдер (или просто полноэкранное изображение). Уже не модно делать страницы «мертвыми» — их элементы должны шевелиться, проявлять признаки жизни. С помощью «Удивительных пузырьков» или чего-то подобного этого будет добиться очень просто. (Эти пузырьки, кстати, будут хорошим фоном для крупного белого текста.)

Исходник: «Морские волны».

CodePen, Морские волныМорские волны
Источник: www.codepen.io
A Pen By Stefan Weck

4. Эмулятор клавиатуры

Это очень интересная разработка. Я как-то работал над одностраничником для студента, который решил попробовать продавать в интернете дизайнерские клавиатуры. (Он, по сути, делал их сам. Но за основу брал производственные варианты — пружинки, платформы...) Подобную клавиатуру мы решили разместить в самом низу страницы, над футером. Раздел назывался «Подарите мне идею». Писать таким способ текст, конечно, не очень удобно, но посетители залипали на этой клавиатуре надолго — интересная получилась игрушка.

(Сайт, к сожалению, долго не продержался — студенту быстро наскучило это дело.)

Источник: «Эмулятор клавиатуры».

CodePen, Эмулятор клавиатурыЭмулятор клавиатуры
Источник: www.codepen.io
A Pen By Mohamed Shublaq

5. Эмулятор пианино

Мне не приходилось создавать сайты для студентов, которые продают пианино. Да и применять эмулятор пианино на сайте никогда не приходилось. Но смотрится интересно. Может кому-то пригодится.

Источник: «Эмулятор пианино».

CodePen, Эмулятор пианиноЭмулятор пианино
Источник: www.codepen.io
A Pen By Majer @Monoame Design

6. Эмулятор гитары

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

Исходник: «Эмулятор гитары».

CodePen, Эмулятор гитарыЭмулятор гитары
Источник: www.codepen.io
A Pen By Joel T Bennett

7. Множественные связи

Очень красивый эффект. Приходилось встречать его на многих сайтах, занимающихся разработкой программного обеспечения. Как и «Удивительные пузырьки», очень хорошо подойдет для фона презентационного текста.

Источник: «Множественные связи».

CodePen, Множественные связиМножественные связи
Источник: www.codepen.io
A Pen By Vincent Garreau

8. Падающие сердечки

Затягивает, низкий поклон автору. Откуда-то сверху сыпется бесконечное количество сердечек — прямо вам на голову! Уже думаю, где можно было бы применить эту красоту.

Исходник: «Падающие сердечки».

CodePen, Падающие сердечкиПадающие сердечки
Источник: www.codepen.io
A Pen By Anand Davaasuren

У вас в закладках есть много красивых идей с сайта CodePen? Напишите об этом в своем блоге на WikiVeer!