Підбірка цікавих проектів з Google Chrome Experiments для тих, у кого творчий застій


Дізнайтесь більше про нові кар'єрні можливості в EchoUA. Цікаві проекти, ринкова оплата, гарний колектив. Надсилайте резюме та приєднуйтеся до нас.

Іноді робота веб-дизайнера буває стресовою.
Ця стаття присвячена тим, у кого зараз творчий застій.

Wormz

Скриншот з Wormz

Посилання на демо

WormZ написана з використанням HTML5 і Canvas. Тут Ви можете перетягувати зображення (текст, вектори, силуети) на екран, і він показуватиме циклічне слайд-шоу із завантажених зображень. Найцікавіше – Ваші фотографії можуть перетворитися на мільйон зелених флуоресцентних черв’яків!  Пограти на великому екрані, в повній темряві, з гучним звуком можна, наприклад, наступного Хелловіна.


Heavenly Glory

Заставка Heavenly Glory

Посилання на демо

Ви коли-небудь хотіли, щоб Ваш найменший рух супроводжувався звуком,  що розтинає повітря? Завжди хотіли, щоб Ваші удари руками і ногами створювали звуки дошки, що ламається? Майстри бойових мистецтв тренуються протягом багатьох років – часто десятиріч – щоб освоїти навички, необхідні для створення цих дивовижних звукових ефектів. Завдяки потужності сучасної веб-платформи, Ви можете випробувати, яке це набути таких навичок! У цьому проекті використовувалися Google API, getUserMedia і Web Audio для реалізації виявлення простого руху, який викликає відтворення звуку. Потік з веб-камери користувача аналізується в режимі реального часу, і при виявленні руху використовується Web Audio API для забезпечення супроводжуваних звукових ефектів.


Stereographic Streetview

Скриншот зі Stereographic Streetview

Посилання на демо

Stereographic Streetview використовує WebGL & JavaScript. Виберіть будь-яке місце у світі, і Ви зможете побачити його в стереографічній проекції або сферичній панорамі. Якщо Ви ознайомлені з фотографією, то ефект цієї програми поєднує в собі особливості круглих лінз, що дають повноекранне представлення, “риб’яче око”. Іншими словами, це дає Вам напівсферичне представлення повного кадру, яке можна отримати за допомогою фільтра в Photoshop.


Glass Shader

Скриншот зі Glass Shader

Посилання на демо

Glass Shader також використовує WebGL і JavaScript. Він має такі властивості, як заломлення, відображення, ефект Френеля і хроматична дисперсія. Уявіть собі, що знаходитеся в небі (небо – це межа, і світ біля Ваших ніг, у буквальному розумінні). Програма є довкіллям у форматі 3D зі скляним черепом у центрі екрана. За допомогою миші Ви можете оглядатися на 360°.


CSS Zoetrope

Скриншот із CSS Zoetrope

Посилання на демо

Перший анімаційний проект, який був повністю створений за допомогою CSS (ЗD-перетворення і анімації). CSS Zoetrope є симулятором старого механізму, що обертає чорно-білі зображення. Встановіть чорний фон, вимкніть світло, і скористайтеся опцією Steamboat Willie (серед інших опцій, доступних на сайті). Ви можете пограти з періодами обертання і кутами відображення, щоб побачити анімацію на рубежі століть.


Pronunciation Game

Скриншот зі Pronunciation Game

Посилання на демо

Pronunciation Game використовує JavaScript і HTML5 для уловлювання мовлення. Слоган на цьому сайті забавний: “Якщо Google може зрозуміти Вас, то і будь-хто зможе”. Цей сайт використовує технологію розпізнавання мови, так що все, що Вам треба робити, це говорити в мікрофон і читати кожне слово, яке з’являється. Ви отримаєте 3 спроби для кожного слова. Деякі з Вас, напевно, будуть заінтриговані й говоритимуть із безглуздим акцентом або бурмотати на перших 2 спробах. Спробуйте самі!


WebGL Water Simulation

Скриншот WebGL Water

Посилання на демо

Ви чули твердження, що вода дає Вам світло і спокій? Можливо, Ви вважаєте, що, можете просто запустити відповідний музичний файл або піти до річки. У WebGL Water Simulation Вам, як дитині, захочеться плескатися та експериментувати.

Ця демо-версія працюватиме тільки на WebGL реалізації з відеокартами, що підтримують крапки текстури з плаваючою комою, з екранно-просторовими частковими похідними і вибірками верхніх текстур. Нині (2015 рік – прим. редактора) Google Chrome – це єдиний браузер, який задовольняє вищепереліченим вимогам.


FontBomb

Скришншот роботи FontBomb

Посилання на демо

Для створення Font Bomb використовувалися JavaScript і CSS. Хіба Вам не хочеться що-небудь підірвати, коли Ви знаходитеся в стані стресу? Цей сайт дозволяє підірвати сторінку (на жаль, тільки візуально, але це краще, ніж нічого, чи не так?). Ви можете встановити стільки бомб, скільки хочете. Кожна з них має 3-секундний таймер.


Sticky Thing

Скриншот зі Sticky Thing

Посилання на демо

Ви можете кидати цю рожеву клейку річ по екрану монітора, а також відрегулювати її кістки, жорсткість, розмір і рівень гравітації. Sticky Thing використовує JavaScript, Canvas і CSS3. Якщо Вам подобаються подібні липкі іграшки, що повільно сповзають вниз по стіні, то цей сайт для Вас!


P.S. Цю статтю ми писали понад рік тому, і, ймовірно, відтоді з’явилося багато інших цікавих проектів, що заслуговують на Вашу увагу. Якщо Ви знаєте цікаві свіжі (чи просто не згадані тут) проекти, то сміливо пишіть у коментарі!

Київ, Харків, Одеса, Дніпро, Запоріжжя, Кривий Ріг, Вінниця, Херсон, Черкаси, Житомир, Хмельницький, Чернівці, Рівне, Івано-Франківськ, Кременчук, Тернопіль, Луцьк, Ужгород, Кам'янець-Подільський, Стрий - за статистикою саме з цих міст програмісти найбільше переїжджають працювати до Львова. А Ви розглядаєте relocate?


Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *