Эффекты для сайта javascript – Эффект шумовых помех на HTML5 Canvas — Уникальные скрипты и готовые решения для сайта

Интересные примеры того, как сделать с помощью JavaScript и CSS текстуры и узоры

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

Но благодаря постоянно развивающимся веб-технологиям мы можем использовать с помощью 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

Практика верстки сайта на CSS Grid с нуля

Смотреть

14 JavaScript библиотек для создания анимации / jQuery плагины и JavaScript решения / Постовой

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

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

Говоря об анимации нельзя не упомянуть известные 12 принципов, сформулированные аниматорами студии Дисней, использование которых исключительно важно для разумного и качественного использования анимационных эффектов.

Говоря о технологиях, обеспечивающих использование анимации в веб-страницах, можно выделить несколько но, пожалуй, ни одна из них не является настолько мощной как JavaScript. Еще несколько лет назад технология Flash-анимации была грозным конкурентом и очень популярной. Но сейчас, похоже, ее лучшие годы позади и она постепенно вытесняется со страниц сайтов более мощными и гибкими Java-скриптами. И если вы решили всерьез использовать анимацию на своем сайте, то ставку следует делать именно на JavaScript. А чтобы сделать разумный выбор библиотеки я и сделал сегодняшний обзор.

Сотрите также:
20 jQuery плагинов для создания анимации при скроллинге
Инструменты для создания HTML5 анимации
10 JavaScript библиотек для SVG анимации

Dynamics.js

Начну я, пожалуй, с Dynamics.js. Это серьезная и мощная библиотека, позволяющая создавать физически достоверную анимацию (как, например, гармонические затухающие колебания точки на главной странице сайта). Библиотека способна управлять CSS и SVG свойствами любого DOM-элемента. Dynamics.js используется для создания меню, кнопок, индикаторов процесса, маркеров. При этом доступны самые разнообразные параметры, такие как частота, декремент затухания, параметры, характеризующие упругость или продолжительность процесса и т.п.

Cta.js

Небольшая по объему библиотека cta.js предназначена для создания на странице анимационных эффектов типа «действие-эффект», т.е. наведение или нажатие указателем мыши на объект приводит к определенному эффекту. Очень удобно использовать при разработке плиточных интерфейсов, когда нажатие на элемент приводит к его раскрытию в виде модального окна, на всю страницу, или в виде боковой слайд-панели.

Beep.js

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

Rainyday.js

Невероятно красивый эффект дождя с каплями разного размера, стекающими вниз. Правда, на мой взгляд, крупным каплям не хватает реалистичности (может той самой физики, которая присутствует в Dynamics.js?). Впрочем, имеющийся API позволяет создать собственные объекты и управлять их поведением, создавая еще более невероятные эффекты.

Iconate.js

lconate.js позволяет производить преобразование одного объекта в другой, используя различные эффекты и движения. Работает с иконочными шрифтами, глифами и пользовательским набором иконок.

Dom-Animator.js

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

Famous

Famous — событийно-ориентированная JS-библиотека для создания современной анимации. Имеет мощное геометрическое ядро, позволяющее манипулировать различными 3D объектами — точечными и объемными — прикладывать к ним силы и ускорения, накладывать ограничения и контролировать соударения.

Bounce.js

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

Snabbt.js

Легкая и быстрая библиотека, выдающая, по заверениям разработчиков, 60 fps даже на мобильных устройствах. При помощи матриц трансформирования CSS позволяет перемещать, вращать, масштабировать и производить другие манипуляции с объектами. Позволяет также применять к объектам специальные эффекты, привлекающие внимание, которые можно использовать при заполнении форм.

Rekapi

Rekapi позволяет использовать как CSS анимацию ключевых кадров (правило @keyframes), так и DOM анимацию при помощи JavaScript. Эта библиотека позволяет создавать довольно сложные динамические объекты, например круговые и линейные диаграммы, временные шкалы и другие элементы пользовательского интерфейса.

Shifty

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

Tween.js

Tween.js использует технологию ключевых кадров (твиннинг) для манипуляции HTML, JavaScript и CSS свойствами. Можно манипулировать цифровыми и строковыми свойствами, задавать такие параметры как упругость, амплитуду, частоту и соединять отдельные преобразования в конвейеры.

Velocity.js

Очень мощная и хорошо оптимизированная библиотека со множеством функций. Среди них цветовая анимация, циклические преобразования, скручивание, прокрутки сцен и анимация SVG элементов. Velocity.js полностью совместима с jQuery — достаточно добавить ее на страницу и заменить все вызовы $.animate() на $.velocity(). По заверениям разработчиком вы будете поражены приростом производительности.

Move.js

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

Заключение

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

Анимация в веб-дизайне и дальше будет играть исключительно важную, и все возрастающую роль. Сейчас трудно спрогнозировать тенденции развития анимации в будущем, но то, что JavaScript еще долго будет играть ключевую роль в этой сфере — это несомненно.

effect » Страница 3 » Скрипты для сайтов

10.04.2012 2 717 Скрипты / Animation

Adipoli — эффекты при наведении

Adipoli — jQuery плагин позволяющий производить над изображениями стильные эффекты при наведении на них мышкой.

05.04.2012 1 204 Скрипты / Menu & Nav

Меню с эффектом размытия

Пример создания просто CSS3 меню с эффектом размытия (blur).

23.02.2012 6 370 Скрипты / Animation

Эффекты при наведении на изображения

Поговорим о свойствах CSS3 благодаря которым можно создавать различные эффекты появления, например текста, при наведении на изображения и не только. jаvascript при этом не используется, что сказывается на кроссбраузерности, впрочем отображение появляющегося текста будет, но без эффектов.

30.12.2011 1 403 Скрипты / Text

Textualizer — эффекты над текстом

Textualizer — jQuery плагин для создания красивых эффектов над текстом. Поддерживается работа в: Chrome, Safari 4+, Firefox 3.5+, IE 6,7,8,9+, Opera 10.6+, Mobile Safari (iOS 4)  

21.12.2011 4 469 Скрипты / Animation

Последовательность анимаций на CSS3

В уроке речь пойдёт о возможностях анимации CSS3. Поэкспериментируем с последовательно сменяющейся анимацией. Работать будет только в современных браузерах, но если не использовать на своих проектах это, то просто посмотреть, точно рекомендую. Напоминаю, что реализовано всё только с помощью CSS3.

20.11.2011 2 186 Скрипты / Buttons

Анимированные кнопки

Будем создавать анимированные кнопки с помощью свойств CSS3, которые реагируют на наведение мышки и нажатие. Работать должным образом будут только в поддерживаемых CSS3 браузерах. В некоторых примерах будут использоваться иконки от   webiconset.com и символы от Just Be Nice.

17.11.2011 2 657 Скрипты / Text

Интерактивный текст на HTML5

Очень необычно и красиво сделанный интерактивный типографический эффект с использованием canvas. Будем создавать динамические баннеры, для оживления сайта. Работать будет по разному и не во всех браузерах.

22.09.2011 2 281 Скрипты / Text

Динамический 3D текст

В статье посмотрим как можно сделать динамический (изменяющийся) 3D текст в зависимости от положения курсора мыши.

13.07.2011 1 319 Скрипты / Zoom

Эффект фотографирования

В сегодняшней фотосессии принимают участие красивые пейзажи, а Вы будете в качестве фотографа, пытающегося заснять самое интересное… Будем создавать эффект фотографирования с помощью jQuery плагина PhotoShoot 1.0.

28.06.2011 990 Скрипты / Menu & Nav

CSS3 меню с jQuery эффектом

CSS3 меню с эффектом плавного появления, как если бы мы использовали jQuery. Меню реализовано только на CSS, а эффект плавного смещения пунктов навигации работает только в webkit браузерах (например, Google Chrome).

12.06.2011 2 263 Скрипты / Buttons

Увеличение иконки при наведении

Эффект почти такой же, как и у Apple Dock — иконка увеличивается в размерах при наведении. Реализуется только на CSS? поэтому плавности не будет, как если бы мы использовали jQuery.

12.05.2011 1 707 Скрипты / Animation

Необычный эффект при наведении

Ещё один необычный эффект при наведении на изображение

эффект » Скрипты для сайтов

24.04.2019 1 052 Codepen

Эффект искажения на three.js

Эффект перетекания одного изображения в другое на шейдерах, с gsap анимацией на канвасе

24.01.2018 1 193 Codepen

Repellers — крутой эффект над текстом

Очень прикольный эффект взаимодействия с текстом

20.11.2014 2 918 Скрипты / Social Media

Эффекты с социальными кнопками

  Несколько прикольных эффектов появления социальных кнопок при наведении на изображение.

02.09.2014 4 822 Скрипты / Animation

Xoverlay — CSS3 эффекты наведения

Xoverlay представляет из себя набор CSS стилей, который поможет довольно просто добавлять современные эффекты наведения на ваш сайт. Собрано более 50 эффектов, но если вы будете их комбинировать, то вариантов будет еще на несколько десятков больше — более 150 эффектов.

29.08.2014 9 779 Полезно

Hover.css — коллекция CSS3 эффектов при наведении

Hover.css — коллекция CSS3 эффектов воспроизводимых при наведении на любой элемент, к которому применены определенные CSS классы. Доступно более 40 эффектов.

07.01.2014 3 299 Скрипты / Buttons

Эффект при наведении и шрифт с иконками

Воспользуемся сервисом IcoMoon App для того, чтобы создать симпатичный эффект при наведении на иконку.

02.07.2012 4 481 Скрипты / Animation

Необычные эффекты при наведении

В уроке речь пойдет о простых, но необычных эффектах при наведении на миниатюры изображений реализованных с помощью только CSS3 — основой будут css3 transitions.

27.06.2012 2 849 Скрипты / Text

Анимация текста на jQuery

Плагин для анимации текста имющий пять различных режимов: roll, step, jump, puff, highlight, каждый с возможностью дополнительной настройки.

26.06.2012 4 021 Скрипты / Animation

3D эффекты при наведении

Создадим захватывающие 3D эффекты при наведении с использованием CSS3 и jQuery. В примерах использовать будем миниатюры изображений, при наведении на которые будет показываться полезная информация.

18.05.2012 2 622 Скрипты / Animation

CSS3 эффекты при наведении

Урок в котором мы научимся создавать интересные эффекты при наведении на изображения. Особенность заключается в использовании свойства border. Работать такие эффекты будут только в современных, поддерживающих css3, браузерах.

02.05.2012 1 713 Скрипты / Slider

jFancyTile — слайдер с эффектом мозайки

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

10.04.2012 2 717 Скрипты / Animation

Adipoli — эффекты при наведении

Adipoli — jQuery плагин позволяющий производить над изображениями стильные эффекты при наведении на них мышкой.

Интерактивные hover-эффекты для сайта на JS

Прежде всего, мы бы хотели пояснить, для тех, кто не знает, что такое hover-эффекты, мы немного объясним. Это различные виды эффектов (всплывающие подписи, подсказки, плавные переходы, трансформация, ротация, увеличение, смещение.) применяемые к элементам веб-сайта при наведении на них курсора мыши. Реализованы эти эффекты могут как с помощью различных плагинов jQuery, так и на чистом CSS3. Сегодня мы хотели бы поделиться некоторыми экспериментальными эффектами при наведении курсора мыши.

 

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

Мы хотим сделать отзывчивыми элементы, оживить их визуально, а также немного сместить в пространстве, чтобы убедить пользователя сосредоточиться на этом элементе.

Шаг 1. HTML

Разметка достаточно простая, нам необходимо добавить общий  tilter tilter—2, в затем мы добавили якорь с интересующим нас материалом:

<a href=»#»> <figure> <img src=»img/3.jpg» alt=»img03″ /> <div><div></div></div> <div></div> <figcaption> <h4>Заголовок</h4> <p>Описание</p> </figcaption> <svg viewBox=»0 0 300 415″> <path d=»M20.5,20.5h360v375h-260V20.5z» /> </svg> </figure> </a>

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

Шаг 2. CSS

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95

.tilter { position: relative; display: block; flex: none; width: 300px; height: 415px; margin: 1.5em 2.5em; color: #fff; perspective: 1000px; }   .tilter * { pointer-events: none; }   .tilter:hover, .tilter:focus { color: #fff; outline: none; }   .tilter__figure, .tilter__image { display: block; width: 100%; height: 100%; margin: 0; }   .tilter__figure > * { transform: translateZ(0px); /* Force correct stacking order */ }   .tilter__figure { position: relative; }   .tilter__figure::before { content: »; position: absolute; top: 5%; left: 5%; width: 90%; height: 90%; box-shadow: 0 30px 20px rgba(35,32,39,0.5); }   .tilter__deco { position: absolute; top: 0; left: 0; overflow: hidden; width: 100%; height: 100%; }   .tilter__deco—overlay { background-image: linear-gradient(45deg, rgba(226, 60, 99, 0.4), rgba(145, 58, 252, 0.4), rgba(16, 11, 192, 0.4)); }   .tilter__deco—shine div { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%); }   .tilter__deco—lines { fill: none; stroke: #fff; stroke-width: 1.5px; }   .tilter__caption { position: absolute; bottom: 0; width: 100%; padding: 4em; }   .tilter__title { font-family: ‘Abril Fatface’, serif; font-size: 2.5em; font-weight: normal; line-height: 1; margin: 0; }   .tilter__description { font-size: 0.85em; margin: 1em 0 0 0; letter-spacing: 0.15em; }

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

Шаг 3. JS

В настройках мы можем определить, какие движения будут происходить для каждого элемента при наведении курсора:

• Мы можем установить следующие значения: движение и вращение для всех осей и анимация (продолжительность, ослабление и эластичность — таким же образом, как варианты anime.js), чтобы вернуться к стилю по умолчанию.
• Для поступательного и вращательного движения, мы можем определить значения каждой оси следующим образом:
  • number: Например, перевод: {х: 10, у: -10} означает, что элемент будет перемещаться вдоль оси х от -10px до 10px (как мы перемещаем мышь слева направо) и на оси у от 10px до -10px (как мы перемещаем мышь сверху вниз).
  • array: Например, перевод: {г: [10100]} означает, что элемент будет перемещаться вдоль оси от 10px до 100px (как мы перемещаем мышь сверху вниз).

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

Инициляция:   new TiltFx(el, [options]);   Опции:   var options = { movement: { imgWrapper : { translation : {x: 10, y: 10, z: 30}, rotation : {x: 0, y: -10, z: 0}, reverseAnimation : {duration : 200, easing : ‘easeOutQuad’} }, lines : { translation : {x: 10, y: 10, z: [0,70]}, rotation : {x: 0, y: 0, z: -2}, reverseAnimation : {duration : 2000, easing : ‘easeOutExpo’} }, caption : { rotation : {x: 0, y: 0, z: 2}, reverseAnimation : {duration : 200, easing : ‘easeOutQuad’} }, overlay : { translation : {x: 10, y: -10, z: 0}, rotation : {x: 0, y: 0, z: 2}, reverseAnimation : {duration : 2000, easing : ‘easeOutExpo’} }, shine : { translation : {x: 100, y: 100, z: 0}, reverseAnimation : {duration : 200, easing : ‘easeOutQuad’} } } }

В результате мы получили замечательные hover-эффекты, которые станут отличным дополнением для Вашего проекта и удивлять неординарных подходом посетителей.

Вот и все. Готово!

Читайте также:

Движущиеся частицы на JS

const canvas = document.querySelector(‘canvas’);

const ctx = canvas.getContext(‘2d’);

const RESOLUTION = 1;

let w = canvas.width = canvas.offsetWidth * RESOLUTION;

let h = canvas.height = canvas.offsetHeight * RESOLUTION;

const PARTICLE_COUNT = 400;

const CONNECT_DISTANCE = w * 0.06;

const FORCE_DISTANCE = w * 0.2;

const r = (n = 1) => Math.random() * n;

const PI = Math.PI;

const TAU = PI * 2;

let time = new Date;

const lerp = (start, end, amt) => {

    return (1-amt)*start+amt*end

};

const distance = (x1, y1, x2, y2) => {

    const a = x1 — x2;

    const b = y1 — y2;

    return Math.sqrt( a*a + b*b );

};

const angle = (cx, cy, ex, ey) => {

    return Math.atan2(ey — cy, ex — cx);

};

const particlePrototype = () => ({

    x: w * 0.5 + (Math.cos(r(TAU)) * r(w* 0.5)),

    y: h * 0.5 + (Math.sin(r(TAU)) * r(h* 0.5)),

    angle: r(TAU),

    speed: r(0.15),

    normalSpeed: r(0.15),

    oscAmplitudeX: r(2),

    oscSpeedX: 0.001 + r(0.008),

    oscAmplitudeY: r(2),

    oscSpeedY: 0.001 + (r(0.008)),

    connectDistance: r(CONNECT_DISTANCE),

    color: {

        r: Math.round(200 + r(55)),

        g: Math.round(150 + r(105)),

        b: Math.round(200 + r(55))

    }

});

const particles = (new Array(PARTICLE_COUNT))

.fill({})

.map(particlePrototype);

const update = () => {

    particles.forEach(p1 => {

        p1.x += (Math.cos(p1.angle) + (Math.cos(time * p1.oscSpeedX) * p1.oscAmplitudeX)) * p1.speed;

        p1.y += (Math.sin(p1.angle) + (Math.cos(time * p1.oscSpeedY) * p1.oscAmplitudeY)) * p1.speed;

        p1.speed = lerp(p1.speed, p1.normalSpeed * RESOLUTION, 0.1);  

        if (p1.x > w || p1.x < 0) {

            p1.angle = PI — p1.angle;

        }

        if (p1.y > h || p1.y < 0) {

            p1.angle = -p1.angle;

        }        

        if (r() < 0.005)

        p1.oscAmplitudeX = r(2);

        if (r() < 0.005)

        p1.oscSpeedX = 0.001 + (r(0.008));

        if (r() < 0.005)

        p1.oscAmplitudeY = r(2);

        if (r() < 0.005)

        p1.oscSpeedY = 0.001 + r(0.008);

        

        p1.x = Math.max(-0.01,Math.min(p1.x, w + 0.01));

        p1.y = Math.max(-0.01,Math.min(p1.y, h + 0.01));

    });

};

const render = () => {

    ctx.clearRect(0,0,w,h);    

    particles.map(p1 => {

        particles

        .filter(p2 => {

            if (p1 == p2)

            return false;

            if (distance(p1.x, p1.y, p2.x, p2.y) > p1.connectDistance)

            return false;

            return true;

        })

        .map(p2 => {

            const dist = distance(p1.x, p1.y, p2.x, p2.y);

            p1.speed = lerp(p1.speed, p1.speed + (0.05 / p1.connectDistance * dist), 0.2);

            return {

                p1,

                p2,

                color: p1.color,

                opacity: Math.floor(100 / p1.connectDistance * (p1.connectDistance — dist)) / 100

            };

        })

        .forEach((line, i) => {

            const colorSwing = Math.sin(time * (line.p1.oscSpeedX));

            ctx.beginPath();

            ctx.globalAlpha = line.opacity;

            ctx.moveTo(line.p1.x, line.p1.y);

            ctx.lineTo(line.p2.x, line.p2.y);

            ctx.strokeStyle = `rgb(

            ${Math.floor(line.color.r * colorSwing)},

            ${Math.floor((line.color.g * 0.5) + ((line.color.g * 0.5) * colorSwing))},

            ${line.color.b}

            )`

            ctx.lineWidth = (line.opacity * 4);

            ctx.stroke();

            ctx.closePath();

        });

    });

};

const loop = () => {

    time = new Date;

    update();

    render();

    window.requestAnimationFrame(loop);

};

loop();

window.addEventListener(‘mousemove’, e => {

  const mouseX = (e.clientX — canvas.getBoundingClientRect().left) * RESOLUTION;

  const mouseY = (e.clientY — canvas.getBoundingClientRect().top) * RESOLUTION;

  particles.forEach(p => {

    const dist = distance(mouseX, mouseY, p.x, p.y);  

    if (dist < FORCE_DISTANCE && dist > 0) {

      p.angle = angle(mouseX, mouseY, p.x, p.y)

      const force = (FORCE_DISTANCE — dist) * 0.1;

      p.speed = lerp(p.speed, force, 0.2);

    }

  });    

});

Эффект шумовых помех на HTML5 Canvas — Уникальные скрипты и готовые решения для сайта

<canvas></canvas>

<img src=»ССЫЛКА_НА_КАРТИНКУ»>

 

<script>

function _classCallCheck(instance, Constructor) {

if (!(instance instanceof Constructor)) {

throw new TypeError(«Cannot call a class as a function»);

}

}

var Grain = function() {

function Grain(el) {

_classCallCheck(this, Grain);

/**

* Options

*/

this.patternSize = 150;

this.patternScaleX = 1;

this.patternScaleY = 1;

this.patternRefreshInterval = 3; // 8

this.patternAlpha = 15; // int between 0 and 255,

/**

* Create canvas

*/

this.canvas = el;

this.ctx = this.canvas.getContext(‘2d’);

this.ctx.scale(this.patternScaleX, this.patternScaleY);

/**

* Create a canvas that will be used to generate grain and used as a

* pattern on the main canvas.

*/

this.patternCanvas = document.createElement(‘canvas’);

this.patternCanvas.width = this.patternSize;

this.patternCanvas.height = this.patternSize;

this.patternCtx = this.patternCanvas.getContext(‘2d’);

this.patternData = this.patternCtx.createImageData(this.patternSize, this.patternSize);

this.patternPixelDataLength = this.patternSize * this.patternSize * 4; // rgba = 4

this.resize = this.resize.bind(this);

this.loop = this.loop.bind(this);

this.frame = 0;

window.addEventListener(‘resize’, this.resize);

this.resize();

window.requestAnimationFrame(this.loop);

}

Grain.prototype.resize = function resize() {

this.canvas.width = window.innerWidth * devicePixelRatio;

this.canvas.height = window.innerHeight * devicePixelRatio;

};

Grain.prototype.update = function update() {

var patternPixelDataLength = this.patternPixelDataLength;

var patternData = this.patternData;

var patternAlpha = this.patternAlpha;

var patternCtx = this.patternCtx;

// put a random shade of gray into every pixel of the pattern

for (var i = 0; i < patternPixelDataLength; i += 4) {

// const value = (Math.random() * 255) | 0;

var value = Math.random() * 255;

patternData.data[i] = value;

patternData.data[i + 1] = value;

patternData.data[i + 2] = value;

patternData.data[i + 3] = patternAlpha;

}

patternCtx.putImageData(patternData, 0, 0);

};

Grain.prototype.draw = function draw() {

var ctx = this.ctx;

var patternCanvas = this.patternCanvas;

var canvas = this.canvas;

var viewHeight = this.viewHeight;

var width = canvas.width;

var height = canvas.height;

// clear canvas

ctx.clearRect(0, 0, width, height);

// fill the canvas using the pattern

ctx.fillStyle = ctx.createPattern(patternCanvas, ‘repeat’);

ctx.fillRect(0, 0, width, height);

};

Grain.prototype.loop = function loop() {

// only update grain every n frames

var shouldDraw = ++this.frame % this.patternRefreshInterval === 0;

if (shouldDraw) {

this.update();

this.draw();

}

window.requestAnimationFrame(this.loop);

};

return Grain;

}();

var el = document.querySelector(‘.grain’);

var grain = new Grain(el);

</script>