鼠标悬浮移动过过渡效果-html代码-BFW代码库

鼠标悬浮移动过过渡效果

代码语言：html

所属分类：幻灯片

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>SLIDER</title>

    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }
    </style>

</head>
<body>
    <div id="container"></div>

    <script src='http://repo.bfw.wiki/bfwrepo/js/three.js'></script>
    <script>
        /*------------------------------
Map
------------------------------*/
        const map = (value, x1, y1, x2, y2) => (value - x1) * (y2 - x2) / (y1 - x1) + x2;


        /*------------------------------
                                                                                                                                                                    Mouse
                                                                                                                                                                    ------------------------------*/
        const mouse = {
            x: 0,
            y: 0
        };

        const mouseMove = e => {
            mouse.x = e.clientX || e.touches[0].clientX;
            mouse.y = e.clientY || e.touches[0].clientY;
        };
        window.addEventListener('mousemove', mouseMove);
        window.addEventListener('touchstart', mouseMove);
        window.addEventListener('touchmove', mouseMove);


        /*------------------------------
                                                                                                  GLSL TEMPLATE
                                                                                                  ------------------------------*/
        class GLSLTemplate {
            constructor(opt) {
                Object.assign(this, opt);

                this.loadImages();
            }


            /*------------------------------
      Load Image
      ------------------------------*/
            loadImages() {
                this.textures = [];
                let loadedImages = 0;

                // loop images
                for (let i = 0; i < this.images.length; i++) {
                    const textureLoader = new THREE.TextureLoader();
                    textureLoader.crossOrigin = '';
                    textureLoader.load(this.images[i], img => {
                        img.magFilter = THREE.NearestFilter;
                        this.textures.push({
                            texture: img
                        });
                        this.checkLoadedImages();
                    });
                }
            }

            /*------------------------------
      Check Load Images
      ------------------------------*/
            checkLoadedImages() {
                if (this.textures.length === this.images.length) {
                    this.setTexturesRatio();
                    this.setup();
                }
            }


            /*------------------------------
      Set Textures Ratio
      ------------------------------*/
            setTexturesRatio() {
                this.winRatio = window.innerWidth / window.innerHeight;
                console.log(this.winRatio);
                for (let i = 0; i < this.textures.length; i++) {
                    const t = this.textures[i];
                    const textureRatio = t.texture.image.naturalWidth / t.texture.image.naturalHeight;
                    t.ratio = this.winRatio > textureRatio ? new THREE.Vector2(1.0, textureRatio / this.winRatio): new THREE.Vector2(this.winRatio / textureRatio, 1.0);
                }
            }


            /*------------------------------
      Setup
      ------------------------------*/
            setup() {
                this.uniforms = {
                    time: {
                        type: "f", value: 1.0
                    },
                    resolution: {
                        type: "v2", value: new THREE.Vector2()
                    },
                    u_mouse: {
                        type: "v2", value: new THREE.Vector2(0, 0)
                    },
                    texture_0: {
                        type: "t", value: this.textures[0].texture
                    },
                    ratio_0: {
                        type: "v2", value: this.textures[0].ratio
                    },
                    texture_1: {
                        type: "t", value: this.textures[1].texture
                    },
                    ratio_1: {
                        type: "v2", value: this.textures[1].ratio
                    }
                };

                this.vertexShader = `
                void main.........完整代码请登录后点击上方下载按钮下载查看