Разноцветный пар в низу вашего сайта на HTML5 Canvas
Очень крутой эффект разноцветного пара, который плавно поднимается к верху экрана
Для начала посмотрите ДЕМО
Установка:
На странице, где должен быть этот эффект, сразу после открывающего тега 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 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 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 |
<div id="container"></div> <script src="/js/three.min.js"></script> <script id="vertexShader" type="x-shader/x-vertex"> uniform float time; uniform vec2 resolution; void main() { gl_Position = vec4( position, 1.0 ); } </script> <script id="fragmentShader" type="x-shader/x-fragment"> // Smoke // Author: Phillip King #ifdef GL_ES precision mediump float; #endif uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; float random (in vec2 st) { return fract(sin(dot(st.xy,vec2(12.9898,78.233)))*43758.5453123); } // Based on Morgan McGuire @morgan3d // https://www.shadertoy.com/view/4dS3Wd float noise (in vec2 st) { vec2 i = floor(st); vec2 f = fract(st); // Four corners in 2D of a tile float a = random(i); float b = random(i + vec2(1.0, 0.0)); float c = random(i + vec2(0.0, 1.0)); float d = random(i + vec2(1.0, 1.0)); vec2 u = f * f * (3.0 - 2.0 * f); return mix(a, b, u.x) + (c - a)* u.y * (1.0 - u.x) + (d - b) * u.x * u.y; } #define OCTAVES 6 float fbm (in vec2 st) { // Initial values float value = 0.0; float amplitud = .5; float frequency = 0.; // // Loop of octaves for (int i = 0; i < OCTAVES; i++) { value += amplitud * noise(st); st *= 2.; amplitud *= .5; } return value; } float mountain(vec2 st, float pct){ return smoothstep( pct-0.02, pct, st.y) - smoothstep( pct, pct+0.02, st.y); } void main() { vec2 st = gl_FragCoord.xy/u_resolution.xy; st.x *= u_resolution.x/u_resolution.y; st *= 2.000; vec3 a = vec3(0.724,0.259,0.400 + sin(u_time)); vec3 b = vec3(0.580,0.104,0.568); float motionA = fbm(st - 0.180 * u_time); float motionB = fbm(st - 0.028 * 2.900 * u_time); float contraints = fbm(st - 0.332 * u_time); float mountainShape = smoothstep(-3.020, -0.604,st.x); vec2 q = vec2(0.); vec2 r = vec2(0.410,-0.210) * (u_time * 0.736); r.x = fbm(st + 1. * q + vec2(-0.410,0.560) + -0.0178 * u_time); float f = fbm(st + r); vec3 color = vec3(0.144 * st.x / st.y - -0.612, 0.901, 2.001); color = mix( f*f+0.968*f*f+0.748*mix(vec3(0.940,0.940,0.940) + cos(3.124), vec3(1.000,0.047,0.009), clamp(length(r.x),0.0,2.248)), vec3(b) - contraints, st.y); gl_FragColor = vec4(color,1.0); } </script> <script id="rendered-js"> var container; var camera, scene, renderer; var uniforms, material, mesh; var mouseX = 0,mouseY = 0, lat = 0,lon = 0,phy = 0,theta = 0; var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; init(); var startTime = Date.now(); animate(); function init() { container = document.getElementById('container'); camera = new THREE.Camera(); camera.position.z = 1; scene = new THREE.Scene(); uniforms = { u_time: { type: "f", value: 1.0 }, u_resolution: { type: "v2", value: new THREE.Vector2() } }; material = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: document.getElementById('vertexShader').textContent, fragmentShader: document.getElementById('fragmentShader').textContent }); mesh = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), material); scene.add(mesh); renderer = new THREE.WebGLRenderer(); container.appendChild(renderer.domElement); uniforms.u_resolution.value.x = window.innerWidth; uniforms.u_resolution.value.y = window.innerHeight; renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { requestAnimationFrame(animate); render(); } function render() { var elapsedMilliseconds = Date.now() - startTime; var elapsedSeconds = elapsedMilliseconds / 1000.; uniforms.u_time.value = 60. * elapsedSeconds * 0.03; renderer.render(scene, camera); } </script> |
Осталось лишь залить JS файл из прикреплённого архива в папку js
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
