javascript - 附有 JS 效果的 CSS 动画类型阻塞/阻塞英雄图像

Question

嘿UX设计师在这里学习代码，请原谅我的无知和蹩脚的代码。

我有一个 CSS 动画类型覆盖了一个 Hero Image，它也应用了 JS 效果。

最初我无法同时渲染这两个图像。该类型会呈现，但您看不到其背后的主图，或者主图会出现但您看不到该类型。

起初我以为是某个类应用于在英雄图像上创建不透明背景的类型，但我通过有选择地注释掉一些东西来消除了这种可能性。

然后我意识到我需要将类型 div 放入 Hero Image div 中。我以前做过，但我又试了一次，结果成功了!但它起作用的原因是因为我刚刚有选择地注释掉了应用于英雄形象的 Javascript 效果。

所以问题一定是倾斜效果(javascript 效果)类。然而，我对 Javascript 知之甚少，所以我不确定是什么导致了这个问题。

我猜这与 javascript 处理页面内容的方式有关？我以前遇到过类似的问题，当时我有一个带有页脚的页面和一个由 JS 驱动的响应式图片库。 html 页脚将呈现，然后 JS 库将重新定位页面上的所有对象。所以我想这里可能会发生类似的事情，对吗？

这是代码的 JSFiddle:http://jsfiddle.net/thedonquixotic/8vv7t1as/2/

Tilt FX 是 JS 部分中的第二部分代码，为了便于查找，我已将其标记。

HTML相关部分如下:

<!--Hero image with tilt effect-->

<div class="hero">

        <div class="hero__imgwrap">
            <!--<div class="grid__item">
    <a class="link link--kumya" href="About.html"><span data-letters="David French">David French</span></a>
            </div>-->
            <img class="hero__img tilt-effect" data-tilt-options='{ "opacity" : 0.3, "extraImgs" : 3, "movement": { "perspective" : 1700, "translateX" : -7, "translateY" : -7, "rotateX" : -7, "rotateY" : -7 } }' src="https://cdn.tutsplus.com/craft/uploads/2013/11/14-snowflakes-lay-paper-copy.jpg" alt="Welcome!" />
        </div>
</div>
<!--Hero image with tilt effect-->

这里还有 Javascript:

/**
 * tiltfx.js
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2015, Codrops
 * http://www.codrops.com
 */
;(function(window) {

    'use strict';

    /**
     * **************************************************************************
     * utils
     * **************************************************************************
     */

    // from https://gist.github.com/desandro/1866474
    var lastTime = 0;
    var prefixes = 'webkit moz ms o'.split(' ');
    // get unprefixed rAF and cAF, if present
    var requestAnimationFrame = window.requestAnimationFrame;
    var cancelAnimationFrame = window.cancelAnimationFrame;
    // loop through vendor prefixes and get prefixed rAF and cAF
    var prefix;
    for( var i = 0; i < prefixes.length; i++ ) {
        if ( requestAnimationFrame && cancelAnimationFrame ) {
            break;
        }
        prefix = prefixes[i];
        requestAnimationFrame = requestAnimationFrame || window[ prefix + 'RequestAnimationFrame' ];
        cancelAnimationFrame  = cancelAnimationFrame  || window[ prefix + 'CancelAnimationFrame' ] ||
        window[ prefix + 'CancelRequestAnimationFrame' ];
    }

    // fallback to setTimeout and clearTimeout if either request/cancel is not supported
    if ( !requestAnimationFrame || !cancelAnimationFrame ) {
        requestAnimationFrame = function( callback, element ) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max( 0, 16 - ( currTime - lastTime ) );
            var id = window.setTimeout( function() {
                callback( currTime + timeToCall );
            }, timeToCall );
            lastTime = currTime + timeToCall;
            return id;
        };

        cancelAnimationFrame = function( id ) {
            window.clearTimeout( id );
        };
    }

    function extend( a, b ) {
        for( var key in b ) { 
            if( b.hasOwnProperty( key ) ) {
                a[key] = b[key];
            }
        }
        return a;
    }

    // from http://www.quirksmode.org/js/events_properties.html#position
    function getMousePos(e) {
        var posx = 0;
        var posy = 0;
        if (!e) var e = window.event;
        if (e.pageX || e.pageY)     {
            posx = e.pageX;
            posy = e.pageY;
        }
        else if (e.clientX || e.clientY)    {
            posx = e.clientX + document.body.scrollLeft
                + document.documentElement.scrollLeft;
            posy = e.clientY + document.body.scrollTop
                + document.documentElement.scrollTop;
        }
        return {
            x : posx,
            y : posy
        }
    }

    // from http://www.sberry.me/articles/javascript-event-throttling-debouncing
    function throttle(fn, delay) {
        var allowSample = true;

        return function(e) {
            if (allowSample) {
                allowSample = false;
                setTimeout(function() { allowSample = true; }, delay);
                fn(e);
            }
        };
    }

    /***************************************************************************/

    /**
     * TiltFx fn
     */
    function TiltFx(el, options) {
        this.el = el;
        this.options = extend( {}, this.options );
        extend( this.options, options );
        this._init();
        this._initEvents();
    }

    /**
     * TiltFx options.
     */
    TiltFx.prototype.options = {
        // number of extra image elements (div with background-image) to add to the DOM - min:1, max:5 (for a higher number, it's recommended to remove the transitions of .tilt__front in the stylesheet.
        extraImgs : 2,
        // the opacity value for all the image elements.
        opacity : 0.7,
        // by default the first layer does not move.
        bgfixed : true,
        // image element's movement configuration
        movement : {
            perspective : 1000, // perspective value
            translateX : -10, // a relative movement of -10px to 10px on the x-axis (setting a negative value reverses the direction)
            translateY : -10, // a relative movement of -10px to 10px on the y-axis 
            translateZ : 20, // a relative movement of -20px to 20px on the z-axis (perspective value must be set). Also, this specific translation is done when the mouse moves vertically.
            rotateX : 2, // a relative rotation of -2deg to 2deg on the x-axis (perspective value must be set)
            rotateY : 2, // a relative rotation of -2deg to 2deg on the y-axis (perspective value must be set)
            rotateZ : 0 // z-axis rotation; by default there's no rotation on the z-axis (perspective value must be set)
        }
    }

    /**
     * Initialize: build the necessary structure for the image elements and replace it with the HTML img element.
     */
    TiltFx.prototype._init = function() {
        this.tiltWrapper = document.createElement('div');
        this.tiltWrapper.className = 'tilt';

        // main image element.
        this.tiltImgBack = document.createElement('div');
        this.tiltImgBack.className = 'tilt__back';
        this.tiltImgBack.style.backgroundImage = 'url(' + this.el.src + ')';
        this.tiltWrapper.appendChild(this.tiltImgBack);

        // image elements limit.
        if( this.options.extraImgs < 1 ) {
            this.options.extraImgs = 1;
        }
        else if( this.options.extraImgs > 5 ) {
            this.options.extraImgs = 5;
        }

        if( !this.options.movement.perspective ) {
            this.options.movement.perspective = 0;
        }

        // add the extra image elements.
        this.imgElems = [];
        for(var i = 0; i < this.options.extraImgs; ++i) {
            var el = document.createElement('div');
            el.className = 'tilt__front';
            el.style.backgroundImage = 'url(' + this.el.src + ')';
            el.style.opacity = this.options.opacity;
            this.tiltWrapper.appendChild(el);
            this.imgElems.push(el);
        }

        if( !this.options.bgfixed ) {
            this.imgElems.push(this.tiltImgBack);
            ++this.options.extraImgs;
        }

        // add it to the DOM and remove original img element.
        this.el.parentNode.insertBefore(this.tiltWrapper, this.el);
        this.el.parentNode.removeChild(this.el);

        // tiltWrapper properties: width/height/left/top
        this.view = { width : this.tiltWrapper.offsetWidth, height : this.tiltWrapper.offsetHeight };
    };

    /**
     * Initialize the events on the main wrapper.
     */
    TiltFx.prototype._initEvents = function() {
        var self = this,
            moveOpts = self.options.movement;

        // mousemove event..
        this.tiltWrapper.addEventListener('mousemove', function(ev) {
            requestAnimationFrame(function() {
                    // mouse position relative to the document.
                var mousepos = getMousePos(ev),
                    // document scrolls.
                    docScrolls = {left : document.body.scrollLeft + document.documentElement.scrollLeft, top : document.body.scrollTop + document.documentElement.scrollTop},
                    bounds = self.tiltWrapper.getBoundingClientRect(),
                    // mouse position relative to the main element (tiltWrapper).
                    relmousepos = {
                        x : mousepos.x - bounds.left - docScrolls.left,
                        y : mousepos.y - bounds.top - docScrolls.top
                    };

                // configure the movement for each image element.
                for(var i = 0, len = self.imgElems.length; i < len; ++i) {
                    var el = self.imgElems[i],
                        rotX = moveOpts.rotateX ? 2 * ((i+1)*moveOpts.rotateX/self.options.extraImgs) / self.view.height * relmousepos.y - ((i+1)*moveOpts.rotateX/self.options.extraImgs) : 0,
                        rotY = moveOpts.rotateY ? 2 * ((i+1)*moveOpts.rotateY/self.options.extraImgs) / self.view.width * relmousepos.x - ((i+1)*moveOpts.rotateY/self.options.extraImgs) : 0,
                        rotZ = moveOpts.rotateZ ? 2 * ((i+1)*moveOpts.rotateZ/self.options.extraImgs) / self.view.width * relmousepos.x - ((i+1)*moveOpts.rotateZ/self.options.extraImgs) : 0,
                        transX = moveOpts.translateX ? 2 * ((i+1)*moveOpts.translateX/self.options.extraImgs) / self.view.width * relmousepos.x - ((i+1)*moveOpts.translateX/self.options.extraImgs) : 0,
                        transY = moveOpts.translateY ? 2 * ((i+1)*moveOpts.translateY/self.options.extraImgs) / self.view.height * relmousepos.y - ((i+1)*moveOpts.translateY/self.options.extraImgs) : 0,
                        transZ = moveOpts.translateZ ? 2 * ((i+1)*moveOpts.translateZ/self.options.extraImgs) / self.view.height * relmousepos.y - ((i+1)*moveOpts.translateZ/self.options.extraImgs) : 0;

                    el.style.WebkitTransform = 'perspective(' + moveOpts.perspective + 'px) translate3d(' + transX + 'px,' + transY + 'px,' + transZ + 'px) rotate3d(1,0,0,' + rotX + 'deg) rotate3d(0,1,0,' + rotY + 'deg) rotate3d(0,0,1,' + rotZ + 'deg)';
                    el.style.transform = 'perspective(' + moveOpts.perspective + 'px) translate3d(' + transX + 'px,' + transY + 'px,' + transZ + 'px) rotate3d(1,0,0,' + rotX + 'deg) rotate3d(0,1,0,' + rotY + 'deg) rotate3d(0,0,1,' + rotZ + 'deg)';
                }
            });
        });

        // reset all when mouse leaves the main wrapper.
        /*this.tiltWrapper.addEventListener('mouseleave', function(ev) {
            setTimeout(function() {
            for(var i = 0, len = self.imgElems.length; i < len; ++i) {
                var el = self.imgElems[i];
                el.style.WebkitTransform = 'perspective(' + moveOpts.perspective + 'px) translate3d(0,0,0) rotate3d(1,1,1,0deg)';
                el.style.transform = 'perspective(' + moveOpts.perspective + 'px) translate3d(0,0,0) rotate3d(1,1,1,0deg)';
            }   
            }, 60);

        });*/

        // window resize
        window.addEventListener('resize', throttle(function(ev) {
            // recalculate tiltWrapper properties: width/height/left/top
            self.view = { width : self.tiltWrapper.offsetWidth, height : self.tiltWrapper.offsetHeight };
        }, 50));
    };

    function init() {
        // search for imgs with the class "tilt-effect"
        [].slice.call(document.querySelectorAll('img.tilt-effect')).forEach(function(img) {
            new TiltFx(img, JSON.parse(img.getAttribute('data-tilt-options')));
        });
    }

    init();

    window.TiltFx = TiltFx;

})(window);

Answer 1

我希望我能很好地理解它，所以我创建了一些修改CSS:

    .grid__item {
        position: absolute;
        left: 50%;
        z-index: 1;
        display: flex;
        justify-content: center;
        top: 50%;
    }


    .link--kumya {
        font-family: "Syncopate",sans-serif;
        font-size: 6.5em;
        overflow: hidden;
        color: #242424;
        position: relative;
        left: -50%;
        top: -70px;
        text-align: center;
    }

更改此部分后，会出现类型和动画背景