Удивительные эффекты текстур и узоров с помощью CSS и JavaScript

Удивительные эффекты текстур и узоров с помощью CSS и JavaScript

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

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

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

Большой тор, маленький код

Математическая концепция тора — это захватывающий кольцевой круговорот. Этот пример просто потрясающий. Он демонстрирует концепцию лучше, чем кто-либо мог бы ее объяснить. Более того, он использует только 33 строки JavaScript. У вас может возникнуть желание смотреть на него в течение нескольких часов.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Это что, чашка Петри?

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

Ночные огни

Текстуры по-прежнему отлично подходят для фонов. И это ночное небо, полное светящихся (и случайно пролетающих) звезд, показывает, что эффекты фонов не обязательно должны быть статическими. Вы можете создавать что-то, что содержит движение, но при этом отлично смотрится.

Динамический диско-шар

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

Вырасти дерево

Здесь у нас есть анимированное дерево, напоминающее ручной флипбук. Дерево прорастает и на нем появляются листья. Еще лучше то, что для этого примера используется только HTML5 Canvas и JavaScript — никаких изображений не требуется.

Это много точек

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

Возврат к математике

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

Привет, солнце

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

Заключение

Приведенные выше примеры взяли что-то простое (фигура, узор и т. д.) И превратили его во что-то совсем другое. Эти сниппеты очень красочные, интерактивные и невероятные. Они просто показывают, чего можно достичь при правильном сочетание навыков и креативности кодирования.

Автор: Eric Karkovack

Источник: https://speckyboy.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree