Извивающаяся цветастая штука на HTML5 Canvas
Не знаю, пригодится ли вам это или нет. Я просто оставлю это здесь
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего CSS вставьте:|
1 2 3 4 5 6 |
.glslCanvas { position: fixed; z-index: 1; top: 0px; left: 0px; } |
2#: На страницах, где нужен этот эффект, в любое место между тегами body и /body вставьте:
|
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 |
<canvas class="glslCanvas" data-fragment="#ifdef GL_ES precision mediump float; #endif uniform float u_time; uniform vec2 u_resolution; #define speed 4. #define freq 2. #define amp 0.25 #define phase 0.0 void main( void ) { vec2 p = ( gl_FragCoord.xy / u_resolution.xy ) - 0.5; p.x *= u_resolution.x / u_resolution.y; p.x += sin(p.y * 60. - 10.4* u_time) * cos(p.x * 100.) * 0.01; float sx = (amp * 0.75) * sin(1.0 * 3.141593 * (freq * 0.5) * p.x - (speed)*u_time); float lw = 0.5; float dy = abs(p.y - sx); float lc = lw / 2. / dy; gl_FragColor = vec4(lc * (0.5 + p.x), lc * 0.2, 0., 1.0);}"></canvas> <script type="text/javascript" src="/js/GlslCanvas.js"></script> <script type="text/javascript"> var canvas = document.querySelector('canvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; window.addEventListener('resize', function () { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); </script> |
Осталось лишь залить JS файл из прикреплённого архива в папку js
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
