Здесь представлены различные примеры анимации на canvas. Вы сможете сделать с их помощью дождь, фейерверк, звезды или системы частиц.

Примеры анимации либо запускаются сами, либо требуют от вас некоторых действий - клика по canvas или проведения мышью. Пробуйте и изучайте вкладку JS

Нарисованные коты от Sophia 

See the Pen annoyingz catz (TURNZ BACKZ) by Sophia (fractal kitty) (she/her) (@fractalkitty) on CodePen.0

Кнопка, от которой невозможно оторваться от Ivan Grozdic

Наводи и релаксируй ))

See the Pen Liquid button by Ivan Grozdic (@ig_design) on CodePen.0

Дождь от Max Ruigewaard

See the Pen Rain on HTML5 Canvas by Elen (@ambassador) on CodePen.18892

Снег от Abhishek Sachan

See the Pen Clipped Text with Animation by Elen (@ambassador) on CodePen.0

Фейерверк от Luke Shimkus

Можно добавлять фейерверк кликом по странице или подождать, пока он запустится сам.

See the Pen HTML5 canvas and javascript fireworks tutorial by Elen (@ambassador) on CodePen.18892

Фейерверк от Triana Padilla Holguín

See the Pen #codevember - 5 - Light by Triana Padilla Holguín (@trianaph) on CodePen.18892

Фейерверки от Julius Horn

See the Pen Fireworks by Julius Horn (@Supercopra)on CodePen.0

Анимированное появление логотипа Codepen от Chaz

See the Pen codepen star animate (canvas) by Elen (@ambassador) on CodePen.18892

Частицы, складывающиеся в слово Codepen от Lennart Hase

See the Pen CODEPEN in Particles (Html5 Canvas) by Elen (@ambassador) on CodePen.18892

Загрузчик для сайта от Lennart Hase

See the Pen html5 canvas loader by Elen (@ambassador) on CodePen.18892

Рисование текстом от Tim Holman

Кликните и рисуйте кривые текстом разного размера.

See the Pen Drawing with text by Elen (@ambassador) on CodePen.18892

Анимированные  эффекты при прокрутке страницы от Ramsay Lanier

See the Pen Crazy Awesome Canvas Animation by Elen (@ambassador) on CodePen.18892

Система частиц от Vincent Garreau

Код основан на использовании библиотеки particles.js

See the Pen particles.js by Vincent Garreau (@VincentGarreau) on CodePen.18892

Система частиц, как верхняя часть сайта от Sara Mazal

See the Pen Navigation PageDesign/Lesson by Sara Mazal (@Saramazal) on CodePen.0

Вырастающие линии от Sean Free

See the Pen Growth II by Sean Free (@seanfree) on CodePen.18892

Анимация бегущих вниз стрелок от Faisal Jawed

See the Pen Arrowtrix (Matrix Arrows) by Faisal Jawed (@faisal-jawed) on CodePen.18892

Аквариум от Konstantin Balashev

Анимация букв "А", превращающихся то ли в стрелки, то ли в рыб, то ли в червяков.

See the Pen Canvas animetion by Elen (@ambassador) on CodePen.18892

Конфетти по клику от J Scott Smith

See the Pen Confetti Cannon by J Scott Smith (@jscottsmith) on CodePen.18892

Падающие конфетти от Linmiao Xu

Очень натурально падают. Праздничное настроение к Новому году обеспечено. Еще и на движения мыши реагируют.

See the Pen Falling Confetti by Elen (@ambassador) on CodePen.18892

Всплавающие частицы от Naoya

В отличие от конфетти, частицы в этом примере всплывают снизу вверх.

See the Pen particle by Naoya (@nxworld) on CodePen.18892

Деление клеток от Fabio Ottaviani

See the Pen Mitosys Canvas by Fabio Ottaviani (@supah) on CodePen.0

Сияние с паралакс-эффектом от Tibix 

See the Pen 💎 Crystal Parallax 💎 by Tibix (@Tibixx)
on CodePen.0

Космос от Tiffany Rayside

See the Pen Cosmos by Tiffany Rayside (@tmrDevelops) on CodePen.0

Звездное небо от Giana

See the Pen Stars by Elen (@ambassador) on CodePen.18892

Анимация частиц на фоне звездного неба от Marco Guglielmelli

See the Pen Animated Background by Elen (@ambassador) on CodePen.18892

Заставка в виде звездного неба от Nodws

Можно ускорить полет звезд.

See the Pen Stars screensaver by Nodws (@nodws) on CodePen.18892

Анимированная сетка от Tom Miller

Сделано с помощью библиотеки GSAP 3.0

See the Pen GSAP 3.0 - Canvas Color Grid w/ stagger by Tom Miller (@creativeocean) on CodePen.18892

Эффект разлетающихся кругов и частиц при клике от Alex Zaworski

See the Pen Color Changin' by Elen (@ambassador) on CodePen.18892

Летающие частицы от Hiba Codes

Проведите мышкой - и получите хвост из летающих частиц. Чем-то напоминает рой пчел, не так ли?

See the Pen Practice | Gravity balls to mouse study by @FabioG by Hiba Codes (@hibacodes) on CodePen.18892

Интерактивные движущиеся круги от Y.ENDO

See the Pen ParticleVisual by Y.ENDO (@y_endo) on CodePen.18892

Облачная маска от Chris Neale

See the Pen Canvas Cloud by Chris Neale (@onion2k) on CodePen.0

Анимация фона для цитат от isladjan

See the Pen Quotes animation made by particles by isladjan (@isladjan) on CodePen.0

Страница портфолио от Yahia Refaiea

Очень интересная анимация частиц, из которой появляется фото.

See the Pen Personal Website - Yahia Refaiea [Beta] by Yahia Refaiea (@YahiaRefaiea) on CodePen.18892

След за курсором от Daniel 

See the Pen whipper snapper by Daniel (@scorch)
on CodePen.0

Коллекция pen-ов с анимацией в canvas от Dev Loop

Заполнение точками доступного пространства

Пожалуй, такой пример подойдет для медитации

See the Pen Circle Packing by Dev Loop (@dev_loop) on CodePen.18892

Текстовый дождь из SVG-тучки

See the Pen Matrix Rain by Dev Loop (@dev_loop) on CodePen.18892

Интерактивные точки

See the Pen Glowing Particles by Dev Loop (@dev_loop) on CodePen.18892

По морям, по волнам

Пример не закончен согласно комментарию автора. Но все равно работает.

See the Pen Canvas Waves by Dev Loop (@dev_loop) on CodePen.18892

Настраиваемые волны

Автор isladjan

See the Pen Waves animation in Canvas by isladjan (@isladjan) on CodePen.0

Еще один вариант волны от Mipete07 

See the Pen Basic Wind Strip by Mipete07 (@mipete07) on CodePen.0

Вперед, к звездам

See the Pen Into The Stars by Dev Loop (@dev_loop) on CodePen.18892

Удаляющиеся шары

See the Pen Particles And Gravity by Dev Loop (@dev_loop) on CodePen.18892

Автор: Админ

1 Комментарий

  1. Очень красиво, супер!!!

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

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