以3D透视视图形式实现的鼠标滚动交互

Perspective Mouse Scroll with preserve-3d transform-style

css3, gsap, mouse, scroll

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2033
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

function _addWheelListener(elem, eventName, callback, useCapture) {
        elem[_addEventListener](prefix + eventName, support == "wheel" ? callback : function(originalEvent) {
            !originalEvent && (originalEvent = window.event);
            // create a normalized event object
            var event = {
                // keep a ref to the original event object
                originalEvent: originalEvent,
                target: originalEvent.target || originalEvent.srcElement,
                type: "wheel",
                deltaMode: originalEvent.type == "MozMousePixelScroll" ? 0 : 1,
                deltaX: 0,
                deltaY: 0,
                deltaZ: 0,
                preventDefault: function preventDefault() {
                    originalEvent.preventDefault ?
                        originalEvent.preventDefault() :
                        originalEvent.returnValue = false;
                }
            };

// calculate deltaY (and deltaX) according to the event
            if (support == "mousewheel") {
                event.deltaY = -1 / 40 * originalEvent.wheelDelta;
                // Webkit also support wheelDeltaX
                originalEvent.wheelDeltaX && (event.deltaX = -1 / 40 * originalEvent.wheelDeltaX);
            } else {
                event.deltaY = originalEvent.deltaY || originalEvent.detail;
            }
            return callback(event);
        }, useCapture || false);
    }
})(window, document);

var topE = document.querySelector(".top .content");
var bottomE = document.querySelector(".bottom .content");
var backE = document.querySelector(".back .content");

addWheelListener(window, function(e) {
    var scrolled = parseInt(e.deltaY * 1.5);
    var currTop = parseInt(window.getComputedStyle(topE).top.split("px")[0]);
    var currBottom = parseInt(window.getComputedStyle(bottomE).bottom.split("px")[0]);
    var currBack = parseInt(window.getComputedStyle(backE).bottom.split("px")[0]);
    TweenMax.to(topE.style, 0.3, {
        top: currTop - scrolled + "px"
    });
    TweenMax.to(backE.style, 0.3, {
        bottom: currBack + scrolled + "px"
    });
    TweenMax.to(bottomE.style, 0.3, {
        bottom: currBottom + scrolled + "px"
    });
    e.preventDefault();
});

编译

CSS

HTML

<section class="top">
    <div class="content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti consequuntur aut nihil exercitationem earum itaque tenetur asperiores vel odio eveniet, nisi quidem, ullam quos vero at iusto facilis, id maxime?
        </p>
        <img src="https://images.unsplash.com/photo-1519406155028-39dbcdf8400c?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti consequuntur aut nihil exercitationem earum itaque tenetur asperiores vel odio eveniet, nisi quidem, ullam quos vero at iusto facilis, id maxime?
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti consequuntur aut nihil exercitationem earum itaque tenetur asperiores vel odio eveniet, nisi quidem, ullam quos vero at iusto facilis, id maxime?
        </p>
    </div>
</section>
<section class="back">
    <div class="content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti consequuntur aut nihil exercitationem earum itaque tenetur asperiores vel odio eveniet, nisi quidem, ullam quos vero at iusto facilis, id maxime?
        </p>
        <img src="https://images.unsplash.com/photo-1519406155028-39dbcdf8400c?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti consequuntur aut nihil exercitationem earum itaque tenetur asperiores vel odio eveniet, nisi quidem, ullam quos vero at iusto facilis, id maxime?
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti consequuntur aut nihil exercitationem earum itaque tenetur asperiores vel odio eveniet, nisi quidem, ullam quos vero at iusto facilis, id maxime?
        </p>
    </div>
</section>
<section class="bottom">
    <div class="content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti consequuntur aut nihil exercitationem earum itaque tenetur asperiores vel odio eveniet, nisi quidem, ullam quos vero at iusto facilis, id maxime?
        </p>
        <img src="https://images.unsplash.com/photo-1519406155028-39dbcdf8400c?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti consequuntur aut nihil exercitationem earum itaque tenetur asperiores vel odio eveniet, nisi quidem, ullam quos vero at iusto facilis, id maxime?
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti consequuntur aut nihil exercitationem earum itaque tenetur asperiores vel odio eveniet, nisi quidem, ullam quos vero at iusto facilis, id maxime?
        </p>
    </div>

</section>

Perspective Mouse Scroll with preserve-3d transform-style

css3, gsap, mouse, scroll

编辑器支持Emmet

快捷键

Perspective Mouse Scroll with preserve-3d transform-style

css3, gsap, mouse, scroll

CSS3单元素实现一个常用的鼠标滚动提示动画图标

使用CSS3 SVG和JS实现的交互式火球动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：