Анимированный фон для сайта

Статус
В этой теме нельзя размещать новые ответы.

Irval

Главный Модератор
Главный Модератор

Irval

Главный Модератор
Главный Модератор
Статус
Оффлайн
Регистрация
31 Май 2019
Сообщения
245
Реакции
84
Доброго времени суток

Многие начинающие веб разработчики часто задаются вопросом реализации "живого" фона для их сайта, с которым пользователь сможет взаимодействовать. Все же создать данную функцию с нуля достаточно непросто и лучше использовать уже готовые решения от опытных разработчиков. Сегодня я поделюсь с вами интересным динамическим фоном в виде переливающегося тумана (его вы могли увидеть и раньше, ведь тема совершенно не новая). Файл с его реализацией и посмотреть внешний вид вы можете чуть ниже. Динамический фон реализован достаточно просто и понятно, его исходный код представлен ниже.
HTML:
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="icon" href="https://gamesense.pub/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="https://gamesense.pub/favicon.ico" type="image/x-icon" />
<style>
    p {
}
font-size: 40px;
margin:0;
letter-spacing:3px;
    }
</style>
</head>
<body oncontextmenu="if (!window.__cfRLUnblockHandlers) return false; return false;" unselectable="on" onselectstart="if (!window.__cfRLUnblockHandlers) return false; return false;" data-cf-modified-7ace5003f3f04b6b27de1c2e-=""><canvas width="715" height="974"></canvas>
<title>elem</title>
<audio id="audio" preload="" autoplay="" loop="">
<source type="audio/mp3" src="song.mp3" tppabs="song.mp3">
<script type="7ace5003f3f04b6b27de1c2e-text/javascript"> document.getElementById("audio").volume = 0.2;</script>
</audio>
<style>
* {
    cursor: url(https://nafriklopper.club/cursor.cur) !important;
}
        </style>
<script type="7ace5003f3f04b6b27de1c2e-text/javascript">
    window.onkeydown = function(evt) {
        if(evt.keyCode == 123 || evt.keyCode == 85 || evt.keyCode == 17 || evt.keyCode == 16 || evt.keyCode == 74 || evt.keyCode == 116 || evt.keyCode == 73 || evt.keyCode == 8 || evt.KeyCode == 13 || evt.KeyCode == 16 || evt.KeyCode == 17 || evt.KeyCode == 83) return false;
e.preventDefault();
    };

    window.onkeypress = function(evt) {
        if(evt.keyCode == 123 || evt.keyCode == 85 || evt.keyCode == 17 || evt.keyCode == 16 || evt.keyCode == 74 || evt.keyCode == 116 || evt.keyCode == 73 || evt.keyCode == 8 || evt.KeyCode == 13 || evt.KeyCode == 16 || evt.KeyCode == 17 || evt.KeyCode == 83) return false;
  
e.preventDefault();
    };

    window.onkeyup = function(evt) {
        if(evt.keyCode == 123 || evt.keyCode == 85 || evt.keyCode == 17 || evt.keyCode == 16 || evt.keyCode == 74 || evt.keyCode == 116 || evt.keyCode == 73 || evt.keyCode == 8 || evt.KeyCode == 13 || evt.KeyCode == 16 || evt.KeyCode == 17 || evt.KeyCode == 83) return false;
    document.onkeydown = function (e) {
    e = e || window.event;
    if (e.ctrlKey) {
        var c = e.which || e.keyCode;
        switch (c) {
            case 83://Block Ctrl+S
            case 87://Block Ctrl+W
                e.preventDefault();   
                e.stopPropagation();
            break;
        }
    }
};
    };

function disableF5(e) { if ((e.which || e.keyCode) == 116) e.preventDefault(); };
$(document).on("keydown", disableF5);
</script>
<style>
a {
color: inherit;
    text-decoration: none !important;
}

@keyframes fadein-text {
    from {
        text-shadow: 2px 2px 0px black;
        opacity: 0;
    }
    to {
        text-shadow: 2px 2px 20px black;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        -webkit-filter: drop-shadow(0px 0px 5px rgba(0,0,0,0));
        opacity: 0;
    }
    to {
        -webkit-filter: drop-shadow(0px 0px 20px rgba(0,0,0,0.8));
        opacity: 1;
    }
}
canvas {
  display: block;
  vertical-align: bottom;
}
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 }
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom {
  from{ bottom:-100px; opacity:0 }
  to{ bottom:0; opacity:1 }
}
#minden {
  display: none;
  text-align: center;
}
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 50px;
  height: 50px;
  margin: -75px 0 0 -75px;
  border: 16px solid #000000;
  border-radius: 50%;
  border-top: 16px solid #ff0000;
  border-bottom: 16px solid #ff0000;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index:-1;
} 

.center {
font-family: 'Montserrat', sans-serif;


  position: fixed; /* or absolute */
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
      animation: fadein 3s;
    -moz-animation: fadein 3s; /* Firefox */
    -webkit-animation: fadein 3s; /* Safari and Chrome */
    -o-animation: fadein 3s; /* Opera */
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
a:hover {
cursor: url(https://nafriklopper.club/cursor_hover.cur) !important;
}
</style>
<div id="particles-js"></div>
<div class="center">
<center>
<pre> 
█▀▀ █░░ █▀▀ █▀▄▀█
█▀▀ █░░ █▀▀ █░▀░█
▀▀▀ ▀▀▀ ▀▀▀ ▀░░░▀

        </pre>
<h2>
</h2>
<p id="dcheck"></p>
<div style="letter-spacing: 3;font-size: 15;"><div id="center">
<div class="animated fadeInDown">
</div>
<div class="animated fadeInUp">
<pre><pre align="middle"> 
<a href="#" style="color:purple" tppabs="#" target="_blank">go to the forum</a><br></pre></pre>
</div>
<script type="7ace5003f3f04b6b27de1c2e-text/javascript">
var audio = document.getElementById("audio");


</script>
<style>
html, body {
  overflow: hidden;
  color: #fefeff;
}
body {
  margin: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}
canvas {
  width: 100%;
  height: 100%;
  z-index: -999999999;
}
[class^="letter"] {
  -webkit-transition: opacity 3s ease;
  -moz-transition: opacity 3s ease;
  transition: opacity 3s ease;
}
.letter-0 {
  transition-delay: 0.2s;
}
.letter-1 {
  transition-delay: 0.4s;
}
.letter-2 {
  transition-delay: 0.6s;
}
.letter-3 {
  transition-delay: 0.8s;
}
.letter-4 {
  transition-delay: 1.0s;
}
.letter-5 {
  transition-delay: 1.2s;
}
.letter-6 {
  transition-delay: 1.4s;
}
.letter-7 {
  transition-delay: 1.6s;
}
.letter-8 {
  transition-delay: 1.8s;
}
.letter-9 {
  transition-delay: 2.0s;
}
.letter-10 {
  transition-delay: 2.2s;
}
.letter-11 {
  transition-delay: 2.4s;
}
.letter-12 {
  transition-delay: 2.6s;
}
.letter-13 {
  transition-delay: 2.8s;
}
.letter-14 {
  transition-delay: 3.0s;
}
.letter-15 {
  transition-delay: 3.2s;
}
</style>
<script src="main.js"></script>
<script src="protection.js"></script>
<script src="title.js"></script>
<script src="app.js"></script>
<script src="particles.js"></script>
<script type="7ace5003f3f04b6b27de1c2e-text/javascript">
'use strict';

var canvas = document.getElementsByTagName( 'canvas' )[ 0 ];

canvas.width  = canvas.clientWidth;
canvas.height = canvas.clientHeight;

var config = {
    TEXTURE_DOWNSAMPLE: 1,
    DENSITY_DISSIPATION: 0.98,
    VELOCITY_DISSIPATION: 0.99,
    PRESSURE_DISSIPATION: 0.8,
    PRESSURE_ITERATIONS: 25,
    CURL: 30,
    SPLAT_RADIUS: 0.005
};

var pointers   = [];
var splatStack = [];

var _getWebGLContext     = getWebGLContext( canvas );
var gl                   = _getWebGLContext.gl;
var ext                  = _getWebGLContext.ext;
var support_linear_float = _getWebGLContext.support_linear_float;

function getWebGLContext( canvas ) {

    var params = {
        alpha: false,
        depth: false,
        stencil: false,
        antialias: false
    };

    var gl = canvas.getContext( 'webgl2', params );

    var isWebGL2 = !!gl;

    if ( !isWebGL2 ) gl = canvas.getContext( 'webgl', params ) || canvas.getContext( 'experimental-webgl', params );

    var halfFloat            = gl.getExtension( 'OES_texture_half_float' );
    var support_linear_float = gl.getExtension( 'OES_texture_half_float_linear' );

    if ( isWebGL2 ) {
        gl.getExtension( 'EXT_color_buffer_float' );
        support_linear_float = gl.getExtension( 'OES_texture_float_linear' );
    }

    gl.clearColor( 0.0, 0.0, 0.0, 1.0 );

    var internalFormat   = isWebGL2 ? gl.RGBA16F : gl.RGBA;
    var internalFormatRG = isWebGL2 ? gl.RG16F : gl.RGBA;
    var formatRG         = isWebGL2 ? gl.RG : gl.RGBA;
    var texType          = isWebGL2 ? gl.HALF_FLOAT : halfFloat.HALF_FLOAT_OES;

    return {
        gl: gl,
        ext: {
            internalFormat: internalFormat,
            internalFormatRG: internalFormatRG,
            formatRG: formatRG,
            texType: texType
        },
        support_linear_float: support_linear_float
    };
}

function pointerPrototype() {
    this.id    = -1;
    this.x     = 0;
    this.y     = 0;
    this.dx    = 0;
    this.dy    = 0;
    this.down  = false;
    this.moved = false;
    this.color = [ 30, 0, 300 ];
}

pointers.push( new pointerPrototype() );

var GLProgram = function () {
  
    function GLProgram( vertexShader, fragmentShader ) {

        if ( !(this instanceof GLProgram) )
            throw new TypeError( "Cannot call a class as a function" );

        this.uniforms = {};
        this.program  = gl.createProgram();

        gl.attachShader( this.program, vertexShader );
        gl.attachShader( this.program, fragmentShader );
        gl.linkProgram( this.program );

        if ( !gl.getProgramParameter( this.program, gl.LINK_STATUS ) ) throw gl.getProgramInfoLog( this.program );

        var uniformCount = gl.getProgramParameter( this.program, gl.ACTIVE_UNIFORMS );
      
        for ( var i = 0; i < uniformCount; i++ ) {
          
            var uniformName = gl.getActiveUniform( this.program, i ).name;
          
            this.uniforms[ uniformName ] = gl.getUniformLocation( this.program, uniformName );
          
        }
    }

    GLProgram.prototype.bind = function bind() {
        gl.useProgram( this.program );
    };

    return GLProgram;
  
}();

function compileShader( type, source ) {

    var shader = gl.createShader( type );
  
    gl.shaderSource( shader, source );
    gl.compileShader( shader );

    if ( !gl.getShaderParameter( shader, gl.COMPILE_STATUS ) ) throw gl.getShaderInfoLog( shader );

    return shader;

}

var baseVertexShader               = compileShader( gl.VERTEX_SHADER, 'precision highp float; precision mediump sampler2D; attribute vec2 aPosition; varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB; uniform vec2 texelSize; void main () {     vUv = aPosition * 0.5 + 0.5;     vL = vUv - vec2(texelSize.x, 0.0);     vR = vUv + vec2(texelSize.x, 0.0);     vT = vUv + vec2(0.0, texelSize.y);     vB = vUv - vec2(0.0, texelSize.y);     gl_Position = vec4(aPosition, 0.0, 1.0); }' );
var clearShader                    = compileShader( gl.FRAGMENT_SHADER, 'precision highp float; precision mediump sampler2D; varying vec2 vUv; uniform sampler2D uTexture; uniform float value; void main () {     gl_FragColor = value * texture2D(uTexture, vUv); }' );
var displayShader                  = compileShader( gl.FRAGMENT_SHADER, 'precision highp float; precision mediump sampler2D; varying vec2 vUv; uniform sampler2D uTexture; void main () {     gl_FragColor = texture2D(uTexture, vUv); }' );
var splatShader                    = compileShader( gl.FRAGMENT_SHADER, 'precision highp float; precision mediump sampler2D; varying vec2 vUv; uniform sampler2D uTarget; uniform float aspectRatio; uniform vec3 color; uniform vec2 point; uniform float radius; void main () {     vec2 p = vUv - point.xy;     p.x *= aspectRatio;     vec3 splat = exp(-dot(p, p) / radius) * color;     vec3 base = texture2D(uTarget, vUv).xyz;     gl_FragColor = vec4(base + splat, 1.0); }' );
var advectionManualFilteringShader = compileShader( gl.FRAGMENT_SHADER, 'precision highp float; precision mediump sampler2D; varying vec2 vUv; uniform sampler2D uVelocity; uniform sampler2D uSource; uniform vec2 texelSize; uniform float dt; uniform float dissipation; vec4 bilerp (in sampler2D sam, in vec2 p) {     vec4 st;     st.xy = floor(p - 0.5) + 0.5;     st.zw = st.xy + 1.0;     vec4 uv = st * texelSize.xyxy;     vec4 a = texture2D(sam, uv.xy);     vec4 b = texture2D(sam, uv.zy);     vec4 c = texture2D(sam, uv.xw);     vec4 d = texture2D(sam, uv.zw);     vec2 f = p - st.xy;     return mix(mix(a, b, f.x), mix(c, d, f.x), f.y); } void main () {     vec2 coord = gl_FragCoord.xy - dt * texture2D(uVelocity, vUv).xy;     gl_FragColor = dissipation * bilerp(uSource, coord);     gl_FragColor.a = 1.0; }' );
var advectionShader                = compileShader( gl.FRAGMENT_SHADER, 'precision highp float; precision mediump sampler2D; varying vec2 vUv; uniform sampler2D uVelocity; uniform sampler2D uSource; uniform vec2 texelSize; uniform float dt; uniform float dissipation; void main () {     vec2 coord = vUv - dt * texture2D(uVelocity, vUv).xy * texelSize;     gl_FragColor = dissipation * texture2D(uSource, coord); }' );
var divergenceShader               = compileShader( gl.FRAGMENT_SHADER, 'precision highp float; precision mediump sampler2D; varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB; uniform sampler2D uVelocity; vec2 sampleVelocity (in vec2 uv) {     vec2 multiplier = vec2(1.0, 1.0);     if (uv.x < 0.0) { uv.x = 0.0; multiplier.x = -1.0; }     if (uv.x > 1.0) { uv.x = 1.0; multiplier.x = -1.0; }     if (uv.y < 0.0) { uv.y = 0.0; multiplier.y = -1.0; }     if (uv.y > 1.0) { uv.y = 1.0; multiplier.y = -1.0; }     return multiplier * texture2D(uVelocity, uv).xy; } void main () {     float L = sampleVelocity(vL).x;     float R = sampleVelocity(vR).x;     float T = sampleVelocity(vT).y;     float B = sampleVelocity(vB).y;     float div = 0.5 * (R - L + T - B);     gl_FragColor = vec4(div, 0.0, 0.0, 1.0); }' );
var curlShader                     = compileShader( gl.FRAGMENT_SHADER, 'precision highp float; precision mediump sampler2D; varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB; uniform sampler2D uVelocity; void main () {     float L = texture2D(uVelocity, vL).y;     float R = texture2D(uVelocity, vR).y;     float T = texture2D(uVelocity, vT).x;     float B = texture2D(uVelocity, vB).x;     float vorticity = R - L - T + B;     gl_FragColor = vec4(vorticity, 0.0, 0.0, 1.0); }' );
var vorticityShader                = compileShader( gl.FRAGMENT_SHADER, 'precision highp float; precision mediump sampler2D; varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB; uniform sampler2D uVelocity; uniform sampler2D uCurl; uniform float curl; uniform float dt; void main () {     float L = texture2D(uCurl, vL).y;     float R = texture2D(uCurl, vR).y;     float T = texture2D(uCurl, vT).x;     float B = texture2D(uCurl, vB).x;     float C = texture2D(uCurl, vUv).x;     vec2 force = vec2(abs(T) - abs(B), abs(R) - abs(L));     force *= 1.0 / length(force + 0.00001) * curl * C;     vec2 vel = texture2D(uVelocity, vUv).xy;     gl_FragColor = vec4(vel + force * dt, 0.0, 1.0); }' );
var pressureShader                 = compileShader( gl.FRAGMENT_SHADER, 'precision highp float; precision mediump sampler2D; varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB; uniform sampler2D uPressure; uniform sampler2D uDivergence; vec2 boundary (in vec2 uv) {     uv = min(max(uv, 0.0), 1.0);     return uv; } void main () {     float L = texture2D(uPressure, boundary(vL)).x;     float R = texture2D(uPressure, boundary(vR)).x;     float T = texture2D(uPressure, boundary(vT)).x;     float B = texture2D(uPressure, boundary(vB)).x;     float C = texture2D(uPressure, vUv).x;     float divergence = texture2D(uDivergence, vUv).x;     float pressure = (L + R + B + T - divergence) * 0.25;     gl_FragColor = vec4(pressure, 0.0, 0.0, 1.0); }' );
var gradientSubtractShader         = compileShader( gl.FRAGMENT_SHADER, 'precision highp float; precision mediump sampler2D; varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB; uniform sampler2D uPressure; uniform sampler2D uVelocity; vec2 boundary (in vec2 uv) {     uv = min(max(uv, 0.0), 1.0);     return uv; } void main () {     float L = texture2D(uPressure, boundary(vL)).x;     float R = texture2D(uPressure, boundary(vR)).x;     float T = texture2D(uPressure, boundary(vT)).x;     float B = texture2D(uPressure, boundary(vB)).x;     vec2 velocity = texture2D(uVelocity, vUv).xy;     velocity.xy -= vec2(R - L, T - B);     gl_FragColor = vec4(velocity, 0.0, 1.0); }' );

var textureWidth  = void 0;
var textureHeight = void 0;
var density       = void 0;
var velocity      = void 0;
var divergence    = void 0;
var curl          = void 0;
var pressure      = void 0;

initFramebuffers();

var clearProgram           = new GLProgram( baseVertexShader, clearShader );
var displayProgram         = new GLProgram( baseVertexShader, displayShader );
var splatProgram           = new GLProgram( baseVertexShader, splatShader );
var advectionProgram       = new GLProgram( baseVertexShader, support_linear_float ? advectionShader : advectionManualFilteringShader );
var divergenceProgram      = new GLProgram( baseVertexShader, divergenceShader );
var curlProgram            = new GLProgram( baseVertexShader, curlShader );
var vorticityProgram       = new GLProgram( baseVertexShader, vorticityShader );
var pressureProgram        = new GLProgram( baseVertexShader, pressureShader );
var gradienSubtractProgram = new GLProgram( baseVertexShader, gradientSubtractShader );

function initFramebuffers() {

    textureWidth  = gl.drawingBufferWidth >> config.TEXTURE_DOWNSAMPLE;
    textureHeight = gl.drawingBufferHeight >> config.TEXTURE_DOWNSAMPLE;

    var iFormat   = ext.internalFormat;
    var iFormatRG = ext.internalFormatRG;
    var formatRG  = ext.formatRG;
    var texType   = ext.texType;

    density    = createDoubleFBO( 0, textureWidth, textureHeight, iFormat, gl.RGBA, texType, support_linear_float ? gl.LINEAR : gl.NEAREST );
    velocity   = createDoubleFBO( 2, textureWidth, textureHeight, iFormatRG, formatRG, texType, support_linear_float ? gl.LINEAR : gl.NEAREST );
    divergence = createFBO( 4, textureWidth, textureHeight, iFormatRG, formatRG, texType, gl.NEAREST );
    curl       = createFBO( 5, textureWidth, textureHeight, iFormatRG, formatRG, texType, gl.NEAREST );
    pressure   = createDoubleFBO( 6, textureWidth, textureHeight, iFormatRG, formatRG, texType, gl.NEAREST );

}

function createFBO( texId, w, h, internalFormat, format, type, param ) {

    gl.activeTexture( gl.TEXTURE0 + texId );

    var texture = gl.createTexture();

    gl.bindTexture( gl.TEXTURE_2D, texture );
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, param );
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, param );
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE );
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE );
    gl.texImage2D( gl.TEXTURE_2D, 0, internalFormat, w, h, 0, format, type, null );

    var fbo = gl.createFramebuffer();

    gl.bindFramebuffer( gl.FRAMEBUFFER, fbo );
    gl.framebufferTexture2D( gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0 );
    gl.viewport( 0, 0, w, h );
    gl.clear( gl.COLOR_BUFFER_BIT );

    return [ texture, fbo, texId ];

}

function createDoubleFBO( texId, w, h, internalFormat, format, type, param ) {

    var fbo1 = createFBO( texId, w, h, internalFormat, format, type, param );
    var fbo2 = createFBO( texId + 1, w, h, internalFormat, format, type, param );

    return {
        get first() {
            return fbo1;
        },
        get second() {
            return fbo2;
        },
        swap: function swap() {
            var temp = fbo1;

            fbo1 = fbo2;
            fbo2 = temp;
        }
    };

}

var blit = function () {

    gl.bindBuffer( gl.ARRAY_BUFFER, gl.createBuffer() );
    gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( [ -1, -1, -1, 1, 1, 1, 1, -1 ] ), gl.STATIC_DRAW );
    gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer() );
    gl.bufferData( gl.ELEMENT_ARRAY_BUFFER, new Uint16Array( [ 0, 1, 2, 0, 2, 3 ] ), gl.STATIC_DRAW );
    gl.vertexAttribPointer( 0, 2, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( 0 );

    return function ( destination ) {
        gl.bindFramebuffer( gl.FRAMEBUFFER, destination );
        gl.drawElements( gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0 );
    };

}();

var lastTime = Date.now();

update();

function update() {

    resizeCanvas();

    var dt = Math.min( (Date.now() - lastTime) / 1000, 0.016 );
    lastTime = Date.now();

    gl.viewport( 0, 0, textureWidth, textureHeight );

    if ( splatStack.length > 0 ) {
        for ( var m = 0; m < splatStack.pop(); m++ ) {

            var color = [ Math.random() * 10, Math.random() * 10, Math.random() * 10 ];
            var x     = canvas.width * Math.random();
            var y     = canvas.height * Math.random();
            var dx    = 1000 * (Math.random() - 0.5);
            var dy    = 1000 * (Math.random() - 0.5);

            splat( x, y, dx, dy, color );
        }
    }

    advectionProgram.bind();
    gl.uniform2f( advectionProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight );
    gl.uniform1i( advectionProgram.uniforms.uVelocity, velocity.first[ 2 ] );
    gl.uniform1i( advectionProgram.uniforms.uSource, velocity.first[ 2 ] );
    gl.uniform1f( advectionProgram.uniforms.dt, dt );
    gl.uniform1f( advectionProgram.uniforms.dissipation, config.VELOCITY_DISSIPATION );
    blit( velocity.second[ 1 ] );
    velocity.swap();

    gl.uniform1i( advectionProgram.uniforms.uVelocity, velocity.first[ 2 ] );
    gl.uniform1i( advectionProgram.uniforms.uSource, density.first[ 2 ] );
    gl.uniform1f( advectionProgram.uniforms.dissipation, config.DENSITY_DISSIPATION );
    blit( density.second[ 1 ] );
    density.swap();

    for ( var i = 0, len =  pointers.length; i < len; i++ ) {
        var pointer = pointers[ i ];

        if ( pointer.moved ) {
            splat( pointer.x, pointer.y, pointer.dx, pointer.dy, pointer.color );
            pointer.moved = false;
        }
    }

    curlProgram.bind();
    gl.uniform2f( curlProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight );
    gl.uniform1i( curlProgram.uniforms.uVelocity, velocity.first[ 2 ] );
    blit( curl[ 1 ] );

    vorticityProgram.bind();
    gl.uniform2f( vorticityProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight );
    gl.uniform1i( vorticityProgram.uniforms.uVelocity, velocity.first[ 2 ] );
    gl.uniform1i( vorticityProgram.uniforms.uCurl, curl[ 2 ] );
    gl.uniform1f( vorticityProgram.uniforms.curl, config.CURL );
    gl.uniform1f( vorticityProgram.uniforms.dt, dt );
    blit( velocity.second[ 1 ] );
    velocity.swap();

    divergenceProgram.bind();
    gl.uniform2f( divergenceProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight );
    gl.uniform1i( divergenceProgram.uniforms.uVelocity, velocity.first[ 2 ] );
    blit( divergence[ 1 ] );

    clearProgram.bind();

    var pressureTexId = pressure.first[ 2 ];

    gl.activeTexture( gl.TEXTURE0 + pressureTexId );
    gl.bindTexture( gl.TEXTURE_2D, pressure.first[ 0 ] );
    gl.uniform1i( clearProgram.uniforms.uTexture, pressureTexId );
    gl.uniform1f( clearProgram.uniforms.value, config.PRESSURE_DISSIPATION );
    blit( pressure.second[ 1 ] );
    pressure.swap();

    pressureProgram.bind();
    gl.uniform2f( pressureProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight );
    gl.uniform1i( pressureProgram.uniforms.uDivergence, divergence[ 2 ] );
    pressureTexId = pressure.first[ 2 ];
    gl.activeTexture( gl.TEXTURE0 + pressureTexId );

    for ( var _i = 0; _i < config.PRESSURE_ITERATIONS; _i++ ) {
        gl.bindTexture( gl.TEXTURE_2D, pressure.first[ 0 ] );
        gl.uniform1i( pressureProgram.uniforms.uPressure, pressureTexId );
        blit( pressure.second[ 1 ] );
        pressure.swap();
    }

    gradienSubtractProgram.bind();
    gl.uniform2f( gradienSubtractProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight );
    gl.uniform1i( gradienSubtractProgram.uniforms.uPressure, pressure.first[ 2 ] );
    gl.uniform1i( gradienSubtractProgram.uniforms.uVelocity, velocity.first[ 2 ] );
    blit( velocity.second[ 1 ] );
    velocity.swap();

    gl.viewport( 0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight );
    displayProgram.bind();
    gl.uniform1i( displayProgram.uniforms.uTexture, density.first[ 2 ] );
    blit( null );

    requestAnimationFrame( update );

}

function splat( x, y, dx, dy, color ) {

    splatProgram.bind();
    gl.uniform1i( splatProgram.uniforms.uTarget, velocity.first[ 2 ] );
    gl.uniform1f( splatProgram.uniforms.aspectRatio, canvas.width / canvas.height );
    gl.uniform2f( splatProgram.uniforms.point, x / canvas.width, 1.0 - y / canvas.height );
    gl.uniform3f( splatProgram.uniforms.color, dx, -dy, 1.0 );
    gl.uniform1f( splatProgram.uniforms.radius, config.SPLAT_RADIUS );
    blit( velocity.second[ 1 ] );
    velocity.swap();

    gl.uniform1i( splatProgram.uniforms.uTarget, density.first[ 2 ] );
    gl.uniform3f( splatProgram.uniforms.color, color[ 0 ] * 0.3, color[ 1 ] * 0.3, color[ 2 ] * 0.3 );
    blit( density.second[ 1 ] );
    density.swap();

}

function resizeCanvas() {

    ( canvas.width !== canvas.clientWidth || canvas.height !== canvas.clientHeight ) && ( canvas.width  = canvas.clientWidth, canvas.height = canvas.clientHeight, initFramebuffers() );

}

var count    = 0;
var colorArr = [ Math.random() + 0.2, Math.random() + 0.2, Math.random() + 0.2 ];

canvas.addEventListener( 'mousemove', function ( e ) {

    count++;

    ( count > 25 ) && (colorArr = [ Math.random() + 0.2, Math.random() + 0.2, Math.random() + 0.2 ], count = 0);

    pointers[ 0 ].down  = true;
    pointers[ 0 ].color = colorArr;
    pointers[ 0 ].moved = pointers[ 0 ].down;
    pointers[ 0 ].dx    = (e.offsetX - pointers[ 0 ].x) * 10.0;
    pointers[ 0 ].dy    = (e.offsetY - pointers[ 0 ].y) * 10.0;
    pointers[ 0 ].x     = e.offsetX;
    pointers[ 0 ].y     = e.offsetY;

} );

canvas.addEventListener( 'touchmove', function ( e ) {

    e.preventDefault();

    var touches = e.targetTouches;

    count++;

    ( count > 25 ) && (colorArr = [ Math.random() + 0.2, Math.random() + 0.2, Math.random() + 0.2 ], count = 0);

    for ( var i = 0, len = touches.length; i < len; i++ ) {

        if ( i >= pointers.length ) pointers.push( new pointerPrototype() );

        pointers[ i ].id    = touches[ i ].identifier;
        pointers[ i ].down  = true;
        pointers[ i ].x     = touches[ i ].pageX;
        pointers[ i ].y     = touches[ i ].pageY;
        pointers[ i ].color = colorArr;

        var pointer = pointers[ i ];

        pointer.moved = pointer.down;
        pointer.dx    = (touches[ i ].pageX - pointer.x) * 10.0;
        pointer.dy    = (touches[ i ].pageY - pointer.y) * 10.0;
        pointer.x     = touches[ i ].pageX;
        pointer.y     = touches[ i ].pageY;

    }

}, false );
</script>
<script type="7ace5003f3f04b6b27de1c2e-text/javascript">
      function renderTime() {
      var currentTime = new Date();
      var diem = "AM";
      var h = currentTime.getHours();
      var m = currentTime.getMinutes();
      var s = currentTime.getSeconds();
      setTimeout('renderTime()',1000);
      if (h == 0) {
        h = 12;
      } else if (h > 12) {
        h = h - 12;
        diem="PM";
      }
      if (h < 10) {
        h = "0" + h;
      }
      if (m < 10) {
        m = "0" + m;
      }
      if (s < 10) {
        s = "0" + s;
      }
      var myClock = document.getElementById('clockDisplay');
      myClock.textContent = h + ":" + m + ":" + s + " " + diem;
      myClock.innerText = h + ":" + m + ":" + s + " " + diem;
      }
      renderTime();
    </script>
<script src="https://ajax.cloudflare.com/cdn-cgi/scripts/a2bd7673/cloudflare-static/rocket-loader.min.js" data-cf-settings="7ace5003f3f04b6b27de1c2e-|49" defer=""></script>

Конечно, вы можете просто заменить необходимый текст на примере, если вам это будет необходимо. Пример сайта с динамическим фоном выглядит так:
screenshot_18.0pNHv.png

Демо версию сайта вы можете увидеть по следующей ссылке:
Пожалуйста, авторизуйтесь для просмотра ссылки.

Файл с реализацией фона:
Пожалуйста, авторизуйтесь для просмотра ссылки.
 
Статус
В этой теме нельзя размещать новые ответы.
Сверху