Эффект цветной волны на JavaScript
Эффект цветной волны на JavaScript
Экспериментировал с canvas, и вот что получилось. Простой, но красивый визуальный эффект - цветная волна. На чистом JavaScript и CSS, без внешних библиотек, работает в любом современном браузере. В основе анимация на canvas: вертикальные полоски бегут по экрану, их высота меняется по трем синусоидам с разной частотой, а цвет плавно перетекает по спектру в зависимости от времени и положения полоски.
Также есть адаптация под размер окна, прозрачные блики сверху и легкое затемнение следов - получается плавное, гипнотическое движение. Код полностью самодостаточный, достаточно скопировать и вставить.
Code (HTML) : Убрать нумерацию
- <style type="text/css">
- body {
- margin:0;
- padding:0;
- height:100vh;
- display:flex;
- justify-content:center;
- align-items:center;
- overflow:hidden;
- }
- #container {
- width:90%;
- height:90%;
- max-width:600px;
- max-height:450px;
- position:relative;
- }
- #wave_canvas {
- width:100%;
- height:100%;
- border-radius:24px;
- box-shadow:0 20px 60px RGBA(0,0,0,0.8);
- background:RGBA(10,10,20,0.3);
- }
- </style>
Code (HTML) : Убрать нумерацию
- <div id="container">
- <canvas id="wave_canvas"></canvas>
- </div>
Code (JavaScript) : Убрать нумерацию
- <script type="text/javascript">
- const canvas=document.getElementById('wave_canvas');
- const ctx=canvas.getContext('2d');
- // Адаптивный размер
- function resize_canvas() {
- canvas.width = canvas.offsetWidth*2;
- canvas.height = canvas.offsetHeight*2;
- ctx.scale(2, 2);
- }
- resize_canvas();
- window.addEventListener('resize', resize_canvas);
- let animation_id;
- let time=0;
- function draw_wave() {
- animation_id=requestAnimationFrame(draw_wave);
- // Затемнение следа
- ctx.fillStyle='rgba(10,10,20,0.15)';
- ctx.fillRect(0,0,
- canvas.offsetWidth,canvas.offsetHeight
- );
- const width=canvas.offsetWidth;
- const height=canvas.offsetHeight;
- const bar_count=120;
- const bar_width=width/bar_count*1.3;
- time+=0.03;
- for(let i=0; i<bar_count; i++) {
- const x=i*bar_width;
- // Волновая функция
- const wave1=Math.sin((i*0.02+time)*2)*0.5+0.5;
- const wave2=Math.sin((i*0.015+time*1.3)*2)*0.3+0.2;
- const wave3=Math.sin((i*0.03+time*0.7)*2)*0.2+0.1;
- const bar_height=(wave1+wave2+wave3)*height*0.7;
- // Динамические цвета
- const hue=(i/bar_count*280+time*20+200)%360;
- const saturation=60+Math.sin(time+i*0.1)*20;
- const lightness=35+wave1*25;
- const gradient=ctx.createLinearGradient(
- x,height,x,height-bar_height
- );
- gradient.addColorStop(
- 0,'hsla('+hue+','+saturation+'%,'+lightness+'%,0.9)'
- );
- gradient.addColorStop(
- 0.5,'hsla('+hue+','+saturation+'%,'+lightness+20+'%,1)'
- );
- gradient.addColorStop(
- 1,'hsla('+hue+','+saturation+'%,70%,0.6)'
- );
- ctx.fillStyle=gradient;
- ctx.fillRect(x,height-bar_height,bar_width,bar_height);
- // Блик сверху
- ctx.fillStyle = 'hsla('+hue+',80%,90%,0.4)';
- ctx.fillRect(
- x,height-bar_height*0.7,bar_width*0.6,bar_height*0.3
- );
- }
- }
- // Запуск
- draw_wave();
- </script>
Просмотров: 265 | Комментариев: 2
Метки: JavaScript, графика
Комментарии
Отзывы посетителей сайта о статье
g0b
(21.04.2026 в 14:52):
Красивый эффект. Хорошо бы смотрелось с перемешением R,G,B.
Добавить комментарий
Заполните форму для добавления комментария
Прокси для Telegram
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 38,154 раза
Поблагодарили 38,154 раза
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 320 |
 |
 |
Вспомнился dj smash (из Перми) "я - волна!":)