CuratinsJs让照片动起来
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFW NEW PAGE</title> <script id="bfwone" data="dep=curtains.min&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script> <script type="text/javascript"> bready(function() { var webGLCurtain = new Curtains("canvas"); // if there's any error during init, we're going to catch it here webGLCurtain.onError(function() { // we will add a class to the document body to display original images document.body.classList.add("no-curtains"); }); // get our plane element var planeElement = document.getElementsByClassName("plane")[0]; // set our initial parameters (basic uniforms) var params = { vertexShaderID: "plane-vs", // our vertex shader ID fragmentShaderID: "plane-fs", // our fragment shader ID uniforms: { time: { name: "uTime", // uniform name that will be passed to our shaders type: "1f", // this means our uniform is a float value: 0, }, } } // create our plane mesh var plane = webGLCurtain.addPlane(planeElement, params); // if our plane has been successfully created // we use the onRender method of our plane fired at each requestAnimationFrame call plane && plane.onRender(function() { plane.uniforms.time.value++; // update our time uniform value }); }); </script> <style> body { /* make the body fit our viewport */ position: relative; width: 100%; height: 100vh; margin: 0; /* hide scrollbars */ overflow: hidden; } #canvas { /* make the canvas wrapper fit the window */ position: absolute; top: 0; left: 0; width: 100%; height: 100vh; } .plane { /* define the size of your plane */ width: 80%; max-width: 1400px; height: 80vh; position: relative; top: 10vh; margin: 0 auto; } .plane img { /* hide the img element */ display: none; } /*** in case of error show the image ***/ .no-curtains .plane { overflow: hidden; display: flex; align-items: center; justify-content: center; } .no-curtains .plane img { display: block; max-width: 100%; object-fit: cover; } </style> </head> <body> <!-- div that will hold our WebGL canvas --> <div id="canvas"></div> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0