如何从其他网站获得此GIF？

Question

我创建一个网站，我想那个页面加载自动运行有一定的gif背景，这里是网站

http://contact-festival.com/

的链接，我想用在运动明星背景艺术家阵容名单

我检查了我的开发工具和网络，但似乎无法找到源

Answer 1

这些不gifs。 这些都是用帆布标签和JavaScript编码。

因此，下面是一个示例，您可以使用。

对网站的CSS文件

window.onload = function() { 
 
    
 
    var element = "starfield"; 
 
    var bgColor = "#030304"; 
 
    var FPS = 30; 
 
    var displacementRate = 5; 
 
    var accelerationRate = 10; 
 
    var maxSpeed = 100; 
 
    var maxStars = 1000; 
 

 
    
 
    var speedUp = setInterval(function(){ 
 
    if (accelerationRate > maxSpeed) { 
 
    clearInterval(speedUp); 
 
    } 
 
    accelerationRate = accelerationRate * 1.1; 
 
    },100); 
 

 
\t var Star = function() { 
 
\t \t this.x = 0; 
 
\t \t this.y = 0; 
 
\t \t this.z = 0; 
 
\t \t this.maxDepth = 0; 
 
\t \t this.alpha = 0; 
 
\t \t this.radius = 0; 
 

 
\t \t this.dx = 0; 
 
\t \t this.dy = 0; 
 
\t \t this.dz = 0; 
 
\t \t this.ddx = 0; 
 
\t \t this.ddy = 0; 
 

 
\t \t this.drawInContext = function(ctx, deltaX, deltaY) { 
 
\t \t \t ctx.beginPath(); 
 
\t \t \t ctx.fillStyle = "rgba(255, 255, 255," + this.alpha + ")"; 
 
\t \t \t ctx.arc(this.x + deltaX, this.y + deltaY, this.radius, 0, Math.PI * 2, false); 
 
\t \t \t ctx.fill(); 
 
\t \t }; 
 
\t }; 
 

 
\t var requestAnimationFrame = 
 
\t \t window.requestAnimationFrame || 
 
\t \t window.webkitRequestAnimationFrame || 
 
\t \t window.mozRequestAnimationFrame || 
 
\t \t window.msRequestAnimationFrame || 
 
\t \t window.oRequestAnimationFrame || 
 
\t \t function(callback) { 
 
\t \t \t return window.setTimeout(callback, 1000/FPS); 
 
\t \t }; 
 

 
\t function isCanvasSupported(element) { 
 
\t \t return !!(element.getContext && element.getContext("2d")); 
 
\t } 
 

 
\t function backingScale(context) { 
 
\t \t if ('devicePixelRatio' in window) { 
 
\t \t \t if (window.devicePixelRatio > 1) { 
 
\t \t \t \t return window.devicePixelRatio; 
 
\t \t \t } 
 
\t \t } 
 

 
\t \t return 1; 
 
\t } 
 

 
\t function StarField(canvasID) { 
 
\t \t this.canvas = document.getElementById(canvasID); 
 
\t \t if (!isCanvasSupported(this.canvas)) { 
 
\t \t \t this.canvas.className = "inactive"; 
 
\t \t \t this.canvas.width = window.innerWidth; 
 
\t \t \t this.isCanvasEnabled = false; 
 
\t \t \t return this; 
 
\t \t } 
 

 
\t \t this.isCanvasEnabled = true; 
 

 
\t \t this.ctx = this.canvas.getContext("2d"); 
 
\t \t this.scaleFactor = backingScale(this.ctx); 
 
\t \t this.stars = new Array(); 
 

 
\t \t function newStar() { 
 
\t \t \t var star = new Star(); 
 
\t \t \t star.x = Math.random() * this.canvas.width - this.originX; 
 
\t \t \t star.y = Math.random() * this.canvas.height - this.originY; 
 
\t \t \t star.z = star.max_depth = Math.max(this.canvas.width, this.canvas.height); 
 
\t \t \t star.alpha = Math.random(); 
 
\t \t \t star.radius = Math.random(); 
 

 
\t \t \t var xcoeff = star.x > 0 ? 1 : -1; 
 
\t \t \t var ycoeff = star.y > 0 ? 1 : -1; 
 

 
\t \t \t if (Math.abs(star.x) > Math.abs(star.y)) { 
 
\t \t \t \t star.dx = 1.0; 
 
\t \t \t \t star.dy = Math.abs(star.y/star.x); 
 
\t \t \t } else { 
 
\t \t \t \t star.dx = Math.abs(star.x/star.y); 
 
\t \t \t \t star.dy = 1.0; 
 
\t \t \t } 
 

 
\t \t \t star.dx *= xcoeff * (displacementRate/10); 
 
\t \t \t star.dy *= ycoeff * (displacementRate/10); 
 
\t \t \t star.dz = -1; 
 

 
\t \t \t star.ddx = (accelerationRate * star.dx)/10; 
 
\t \t \t star.ddy = (accelerationRate * star.dy)/10; 
 

 
\t \t \t return star; 
 
\t \t } 
 

 
\t \t function move(star) { 
 
\t \t \t star.x += star.dx; 
 
\t \t \t star.y += star.dy; 
 
\t \t \t star.z += star.dz; 
 
\t 
 
\t \t \t star.dx += star.ddx; 
 
\t \t \t star.dy += star.ddy; 
 
\t \t } 
 

 
\t \t function updateStars(ctx, stars) { 
 
\t \t \t for (var i=0; i<stars.length; i++) { 
 
\t \t \t \t move(stars[i]); 
 

 
\t \t \t \t if (stars[i].x < -this.originX || stars[i].x > this.originX || stars[i].y < -this.originY || stars[i].y > this.originY) { 
 
\t \t \t \t \t // Remove 
 
\t \t \t \t \t stars[i] = newStar(); 
 
\t \t \t \t } else { 
 
\t \t \t \t \t // Paint 
 
\t \t \t \t \t var deltaX = this.originX; 
 
\t \t \t \t \t var deltaY = this.originY; 
 
\t \t \t \t \t stars[i].drawInContext(ctx, deltaX, deltaY); 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t } 
 

 
\t \t this.configureGeometry = function() { 
 
\t \t \t // Ensure we are always at full width 
 
\t \t \t this.canvas.width = window.innerWidth; 
 
\t \t \t this.canvas.style.backgroundColor = bgColor; 
 
\t \t \t var ratio = 1; 
 

 
\t \t \t // Retina support 
 
\t \t \t // See http://www.html5rocks.com/en/tutorials/canvas/hidpi/ 
 
\t \t \t if (this.scaleFactor > 1) { 
 
\t \t \t \t var devicePixelRatio = this.scaleFactor; 
 
\t \t \t \t var context = this.ctx; 
 
\t \t \t \t var backingStoreRatio = context.webkitBackingStorePixelRatio || 
 
\t \t \t \t \t \t \t \t \t \t context.mozBackingStorePixelRatio || 
 
\t \t \t \t \t \t \t \t \t \t context.msBackingStorePixelRatio || 
 
\t \t \t \t \t \t \t \t \t \t context.oBackingStorePixelRatio || 
 
\t \t \t \t \t \t \t \t \t \t context.backingStorePixelRatio || 1; 
 
\t \t \t \t ratio = devicePixelRatio/backingStoreRatio; 
 

 
\t \t \t \t // Upscale the canvas if the two ratios don't match 
 
\t \t \t \t if (devicePixelRatio !== backingStoreRatio) { 
 
\t \t \t \t \t var canvas = this.canvas; 
 
\t \t \t \t \t var oldWidth = canvas.width; 
 
\t \t \t \t \t var oldHeight = canvas.height; 
 

 
\t \t \t \t \t canvas.width = oldWidth * ratio; 
 
\t \t \t \t \t canvas.height = oldHeight * ratio; 
 

 
\t \t \t \t \t canvas.style.width = oldWidth + 'px'; 
 
\t \t \t \t \t canvas.style.height = oldHeight + 'px'; 
 

 
\t \t \t \t \t // Now scale the context to counter the fact that we've manually scaled our canvas element 
 
\t \t \t \t \t context.scale(ratio, ratio); 
 
\t \t \t \t } 
 
\t \t \t } 
 

 
\t \t \t // Starting origin of stars 
 
\t \t \t var logicalWidth = this.canvas.width/ratio; 
 
\t \t \t var logicalHeight = this.canvas.height/ratio; 
 

 
\t \t \t this.originX = logicalWidth/2; 
 
\t \t \t this.originY = logicalHeight/2; 
 

 
\t \t \t var numStars = logicalWidth/2; 
 
\t \t \t this.numStars = numStars > maxStars ? maxStars : numStars; 
 
\t \t } 
 

 
\t \t this.render = function() { 
 
\t \t \t setTimeout(function() { 
 
\t \t \t \t // Drawing 
 
\t \t \t \t this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); 
 

 
\t \t \t \t updateStars(this.ctx, this.stars); 
 

 
\t \t \t \t requestAnimationFrame(render); 
 

 
\t \t \t }, 1000/FPS); 
 
\t \t }; 
 

 
\t \t // Configure origin and frames before creating initial batch of stars 
 
\t \t this.configureGeometry(); 
 

 
\t \t for (var i=0; i<this.numStars; i++) { 
 
\t \t \t this.stars.push(newStar()); 
 
\t \t } 
 

 
\t \t return this; 
 
\t } 
 

 
\t var starfield = StarField(element); 
 
\t if (starfield.isCanvasEnabled) { 
 
\t \t starfield.render(); 
 
\t } 
 

 
\t // Make sure we adjust the canvas whenever the window resizes 
 
\t // Don't rely on CSS rules for 100% width because that causes rendering issues 
 
\t window.addEventListener('resize', resizeCanvas, false); 
 
\t function resizeCanvas() { 
 
\t \t if (starfield.isCanvasEnabled) { 
 
\t \t \t starfield.configureGeometry(); 
 
\t \t } else { 
 
\t \t \t starfield.canvas.width = window.innerWidth; 
 
\t \t } 
 
\t } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas id="starfield" width="100%" height="400px"></canvas>