基于jQuery实现的单页网页滚动效果

jQuery Page Scroll Effects 鼠标滚动，页面（section）之间切换时，有一个放大和模糊的过渡效果。

jquery，scroll

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 1823
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

jQuery(document).ready(function($) {
    //variables
    var hijacking = $('body').data('hijacking'),
        animationType = $('body').data('animation'),
        delta = 0,
        scrollThreshold = 5,
        actual = 1,
        animating = false;

//DOM elements
    var sectionsAvailable = $('.cd-section'),
        verticalNav = $('.cd-vertical-nav'),
        prevArrow = verticalNav.find('a.cd-prev'),
        nextArrow = verticalNav.find('a.cd-next');

//check the media query and bind corresponding events
    var MQ = deviceType();
    bindEvents(MQ);
    $(window).on('resize', function() {
        MQ = deviceType();
        bindEvents(MQ);
    });

function bindEvents(MQ) {
        if (MQ == 'desktop') {
            //bind the animation to the window scroll event, arrows click and keyboard
            if (hijacking == 'on') {
                initHijacking();
                $(window).on('DOMMouseScroll mousewheel', scrollHijacking);
            } else {
                scrollAnimation();
                $(window).on('scroll', scrollAnimation);
            }
            prevArrow.on('click', prevSection);
            nextArrow.on('click', nextSection);

$(document).on('keyup', function(event) {
                if (event.which == '40' && !nextArrow.hasClass('inactive')) {
                    nextSection();
                } else if (event.which == '38' && (!prevArrow.hasClass('inactive') || (prevArrow.hasClass('inactive') && $(window).scrollTop() != sectionsAvailable.eq(0).offset().top))) {
                    prevSection();
                }
            });
            //set navigation arrows visibility
            checkNavigation();
        } else {
            //reset and unbind
            resetSectionStyle();
            $(window).off('DOMMouseScroll mousewheel', scrollHijacking);
            $(window).off('scroll', scrollAnimation);
            prevArrow.off('click', prevSection);
            nextArrow.off('click', nextSection);
            $(document).off('keyup');
        }
    }

function scrollAnimation() {
        //normal scroll - use requestAnimationFrame (if defined) to optimize performance
        (!window.requestAnimationFrame) ? animateSection(): window.requestAnimationFrame(animateSection);
    }

function animateSection() {
        var scrollTop = $(window).scrollTop(),
            windowHeight = $(window).height(),
            windowWidth = $(window).width();

sectionsAvailable.each(function() {
            var actualBlock = $(this),
                offset = scrollTop - actualBlock.offset().top;

//according to animation type and window scroll, define animation parameters
            var animationValues = setSectionAnimation(offset, windowHeight, animationType);

transformSection(actualBlock.children('div'), animationValues[0], animationValues[1], animationValues[2], animationValues[3], animationValues[4]);
            (offset >= 0 && offset < windowHeight) ? actualBlock.addClass('visible'): actualBlock.removeClass('visible');
        });

checkNavigation();
    }

function transformSection(element, translateY, scaleValue, rotateXValue, opacityValue, boxShadow) {
        //transform sections - normal scroll
        element.velocity({
            translateY: translateY + 'vh',
            scale: scaleValue,
            rotateX: rotateXValue,
            opacity: opacityValue,
            boxShadowBlur: boxShadow + 'px',
            translateZ: 0,
        }, 0);
    }

function initHijacking() {
        // initialize section style - scrollhijacking
        var visibleSection = sectionsAvailable.filter('.visible'),
            topSection = visibleSection.prevAll('.cd-section'),
            bottomSection = visibleSection.nextAll('.cd-section'),
            animationParams = selectAnimation(animationType, false),
            animationVisible = animationParams[0],
            animationTop = animationParams[1],
            animationBottom = animationParams[2];

visibleSection.children('div').velocity(animationVisible, 1, function() {
            visibleSection.css('opacity', 1);
            topSection.css('opacity', 1);
            bottomSection.css('opacity', 1);
        });
        topSection.children('div').velocity(animationTop, 0);
        bottomSection.children('div').velocity(animationBottom, 0);
    }

function prevSection(event) {
        //go to previous section
        typeof event !== 'undefined' && event.preventDefault();

var visibleSection = sectionsAvailable.filter('.visible'),
            middleScroll = (hijacking == 'off' && $(window).scrollTop() != visibleSection.offset().top) ? true : false;
        visibleSection = middleScroll ? visibleSection.next('.cd-section') : visibleSection;

var animationParams = selectAnimation(animationType, middleScroll, 'prev');
        unbindScroll(visibleSection.prev('.cd-section'), animationParams[3]);

if (!animating && !visibleSection.is(":first-child")) {
            animating = true;
            visibleSection.removeClass('visible').children('div').velocity(animationParams[2], animationParams[3], animationParams[4])
                .end().prev('.cd-section').addClass('visible').children('div').velocity(animationParams[0], animationParams[3], animationParams[4], function() {
                    animating = false;
                    if (hijacking == 'off') $(window).on('scroll', scrollAnimation);
                });

actual = actual - 1;
        }

resetScroll();
    }

function nextSection(event) {
        //go to next section
        typeof event !== 'undefined' && event.preventDefault();

var visibleSection = sectionsAvailable.filter('.visible'),
            middleScroll = (hijacking == 'off' && $(window).scrollTop() != visibleSection.offset().top) ? true : false;

var animationParams = selectAnimation(animationType, middleScroll, 'next');
        unbindScroll(visibleSection.next('.cd-section'), animationParams[3]);

if (!animating && !visibleSection.is(":last-of-type")) {
            animating = true;
            visibleSection.removeClass('visible').children('div').velocity(animationParams[1], animationParams[3], animationParams[4])
                .end().next('.cd-section').addClass('visible').children('div').velocity(animationParams[0], animationParams[3], animationParams[4], function() {
                    animating = false;
                    if (hijacking == 'off') $(window).on('scroll', scrollAnimation);
                });

actual = actual + 1;
        }
        resetScroll();
    }

function unbindScroll(section, time) {
        //if clicking on navigation - unbind scroll and animate using custom velocity animation
        if (hijacking == 'off') {
            $(window).off('scroll', scrollAnimation);
            (animationType == 'catch') ? $('body, html').scrollTop(section.offset().top): section.velocity("scroll", {
                duration: time
            });
        }
    }

function resetScroll() {
        delta = 0;
        checkNavigation();
    }

function checkNavigation() {
        //update navigation arrows visibility
        (sectionsAvailable.filter('.visible').is(':first-of-type')) ? prevArrow.addClass('inactive'): prevArrow.removeClass('inactive');
        (sectionsAvailable.filter('.visible').is(':last-of-type')) ? nextArrow.addClass('inactive'): nextArrow.removeClass('inactive');
    }

function resetSectionStyle() {
        //on mobile - remove style applied with jQuery
        sectionsAvailable.children('div').each(function() {
            $(this).attr('style', '');
        });
    }

function deviceType() {
        //detect if desktop/mobile
        return window.getComputedStyle(document.querySelector('body'), '::before').getPropertyValue('content').replace(/"/g, "").replace(/'/g, "");
    }

function selectAnimation(animationName, middleScroll, direction) {
        // select section animation - scrollhijacking
        var animationVisible = 'translateNone',
            animationTop = 'translateUp',
            animationBottom = 'translateDown',
            easing = 'ease',
            animDuration = 800;

switch (animationName) {
            case 'scaleDown':
                animationTop = 'scaleDown';
                easing = 'easeInCubic';
                break;
            case 'rotate':
                if (hijacking == 'off') {
                    animationTop = 'rotation.scroll';
                    animationBottom = 'translateNone';
                } else {
                    animationTop = 'rotation';
                    easing = 'easeInCubic';
                }
                break;
            case 'gallery':
                animDuration = 1500;
                if (middleScroll) {
                    animationTop = 'scaleDown.moveUp.scroll';
                    animationVisible = 'scaleUp.moveUp.scroll';
                    animationBottom = 'scaleDown.moveDown.scroll';
                } else {
                    animationVisible = (direction == 'next') ? 'scaleUp.moveUp' : 'scaleUp.moveDown';
                    animationTop = 'scaleDown.moveUp';
                    animationBottom = 'scaleDown.moveDown';
                }
                break;
            case 'catch':
                animationVisible = 'translateUp.delay';
                break;
            case 'opacity':
                animDuration = 700;
                animationTop = 'hide.scaleUp';
                animationBottom = 'hide.scaleDown';
                break;
            case 'fixed':
                animationTop = 'translateNone';
                easing = 'easeInCubic';
                break;
            case 'parallax':
                animationTop = 'translateUp.half';
                easing = 'easeInCubic';
                break;
        }

return [animationVisible, animationTop, animationBottom, animDuration, easing];
    }

function setSectionAnimation(sectionOffset, windowHeight, animationName) {
        // select section animation - normal scroll
        var scale = 1,
            translateY = 100,
            rotateX = '0deg',
            opacity = 1,
            boxShadowBlur = 0;

if (sectionOffset >= -windowHeight && sectionOffset <= 0) {
            // section entering the viewport
            translateY = (-sectionOffset) * 100 / windowHeight;

switch (animationName) {
                case 'scaleDown':
                    scale = 1;
                    opacity = 1;
                    break;
                case 'rotate':
                    translateY = 0;
                    break;
                case 'gallery':
                    if (sectionOffset >= -windowHeight && sectionOffset < -0.9 * windowHeight) {
                        scale = -sectionOffset / windowHeight;
                        translateY = (-sectionOffset) * 100 / windowHeight;
                        boxShadowBlur = 400 * (1 + sectionOffset / windowHeight);
                    } else if (sectionOffset >= -0.9 * windowHeight && sectionOffset < -0.1 * windowHeight) {
                        scale = 0.9;
                        translateY = -(9 / 8) * (sectionOffset + 0.1 * windowHeight) * 100 / windowHeight;
                        boxShadowBlur = 40;
                    } else {
                        scale = 1 + sectionOffset / windowHeight;
                        translateY = 0;
                        boxShadowBlur = -400 * sectionOffset / windowHeight;
                    }
                    break;
                case 'catch':
                    if (sectionOffset >= -windowHeight && sectionOffset < -0.75 * windowHeight) {
                        translateY = 100;
                        boxShadowBlur = (1 + sectionOffset / windowHeight) * 160;
                    } else {
                        translateY = -(10 / 7.5) * sectionOffset * 100 / windowHeight;
                        boxShadowBlur = -160 * sectionOffset / (3 * windowHeight);
                    }
                    break;
                case 'opacity':
                    translateY = 0;
                    scale = (sectionOffset + 5 * windowHeight) * 0.2 / windowHeight;
                    opacity = (sectionOffset + windowHeight) / windowHeight;
                    break;
            }

} else if (sectionOffset > 0 && sectionOffset <= windowHeight) {
            //section leaving the viewport - still has the '.visible' class
            translateY = (-sectionOffset) * 100 / windowHeight;

switch (animationName) {
                case 'scaleDown':
                    scale = (1 - (sectionOffset * 0.3 / windowHeight)).toFixed(5);
                    opacity = (1 - (sectionOffset / windowHeight)).toFixed(5);
                    translateY = 0;
                    boxShadowBlur = 40 * (sectionOffset / windowHeight);

break;
                case 'rotate':
                    opacity = (1 - (sectionOffset / windowHeight)).toFixed(5);
                    rotateX = sectionOffset * 90 / windowHeight + 'deg';
                    translateY = 0;
                    break;
                case 'gallery':
                    if (sectionOffset >= 0 && sectionOffset < 0.1 * windowHeight) {
                        scale = (windowHeight - sectionOffset) / windowHeight;
                        translateY = -(sectionOffset / windowHeight) * 100;
                        boxShadowBlur = 400 * sectionOffset / windowHeight;
                    } else if (sectionOffset >= 0.1 * windowHeight && sectionOffset < 0.9 * windowHeight) {
                        scale = 0.9;
                        translateY = -(9 / 8) * (sectionOffset - 0.1 * windowHeight / 9) * 100 / windowHeight;
                        boxShadowBlur = 40;
                    } else {
                        scale = sectionOffset / windowHeight;
                        translateY = -100;
                        boxShadowBlur = 400 * (1 - sectionOffset / windowHeight);
                    }
                    break;
                case 'catch':
                    if (sectionOffset >= 0 && sectionOffset < windowHeight / 2) {
                        boxShadowBlur = sectionOffset * 80 / windowHeight;
                    } else {
                        boxShadowBlur = 80 * (1 - sectionOffset / windowHeight);
                    }
                    break;
                case 'opacity':
                    translateY = 0;
                    scale = (sectionOffset + 5 * windowHeight) * 0.2 / windowHeight;
                    opacity = (windowHeight - sectionOffset) / windowHeight;
                    break;
                case 'fixed':
                    translateY = 0;
                    break;
                case 'parallax':
                    translateY = (-sectionOffset) * 50 / windowHeight;
                    break;

}

} else if (sectionOffset < -windowHeight) {
            //section not yet visible
            translateY = 100;

switch (animationName) {
                case 'scaleDown':
                    scale = 1;
                    opacity = 1;
                    break;
                case 'gallery':
                    scale = 1;
                    break;
                case 'opacity':
                    translateY = 0;
                    scale = 0.8;
                    opacity = 0;
                    break;
            }

} else {
            //section not visible anymore
            translateY = -100;

switch (animationName) {
                case 'scaleDown':
                    scale = 0;
                    opacity = 0.7;
                    translateY = 0;
                    break;
                case 'rotate':
                    translateY = 0;
                    rotateX = '90deg';
                    break;
                case 'gallery':
                    scale = 1;
                    break;
                case 'opacity':
                    translateY = 0;
                    scale = 1.2;
                    opacity = 0;
                    break;
                case 'fixed':
                    translateY = 0;
                    break;
                case 'parallax':
                    translateY = -50;
                    break;
            }
        }

return [translateY, scale, rotateX, opacity, boxShadowBlur];
    }
});

/* Custom effects registration - feature available in the Velocity UI pack */
//none
$.Velocity
    .RegisterEffect("translateUp", {
        defaultDuration: 1,
        calls: [
            [{
                translateY: '-100%'
            }, 1]
        ]
    });
$.Velocity
    .RegisterEffect("translateDown", {
        defaultDuration: 1,
        calls: [
            [{
                translateY: '100%'
            }, 1]
        ]
    });
$.Velocity
    .RegisterEffect("translateNone", {
        defaultDuration: 1,
        calls: [
            [{
                translateY: '0',
                opacity: '1',
                scale: '1',
                rotateX: '0',
                boxShadowBlur: '0'
            }, 1]
        ]
    });

//scale down
$.Velocity
    .RegisterEffect("scaleDown", {
        defaultDuration: 1,
        calls: [
            [{
                opacity: '0',
                scale: '0.7',
                boxShadowBlur: '40px'
            }, 1]
        ]
    });
//rotation
$.Velocity
    .RegisterEffect("rotation", {
        defaultDuration: 1,
        calls: [
            [{
                opacity: '0',
                rotateX: '90',
                translateY: '-100%'
            }, 1]
        ]
    });
$.Velocity
    .RegisterEffect("rotation.scroll", {
        defaultDuration: 1,
        calls: [
            [{
                opacity: '0',
                rotateX: '90',
                translateY: '0'
            }, 1]
        ]
    });
//gallery
$.Velocity
    .RegisterEffect("scaleDown.moveUp", {
        defaultDuration: 1,
        calls: [
            [{
                translateY: '-10%',
                scale: '0.9',
                boxShadowBlur: '40px'
            }, 0.20],
            [{
                translateY: '-100%'
            }, 0.60],
            [{
                translateY: '-100%',
                scale: '1',
                boxShadowBlur: '0'
            }, 0.20]
        ]
    });
$.Velocity
    .RegisterEffect("scaleDown.moveUp.scroll", {
        defaultDuration: 1,
        calls: [
            [{
                translateY: '-100%',
                scale: '0.9',
                boxShadowBlur: '40px'
            }, 0.60],
            [{
                translateY: '-100%',
                scale: '1',
                boxShadowBlur: '0'
            }, 0.40]
        ]
    });
$.Velocity
    .RegisterEffect("scaleUp.moveUp", {
        defaultDuration: 1,
        calls: [
            [{
                translateY: '90%',
                scale: '0.9',
                boxShadowBlur: '40px'
            }, 0.20],
            [{
                translateY: '0%'
            }, 0.60],
            [{
                translateY: '0%',
                scale: '1',
                boxShadowBlur: '0'
            }, 0.20]
        ]
    });
$.Velocity
    .RegisterEffect("scaleUp.moveUp.scroll", {
        defaultDuration: 1,
        calls: [
            [{
                translateY: '0%',
                scale: '0.9',
                boxShadowBlur: '40px'
            }, 0.60],
            [{
                translateY: '0%',
                scale: '1',
                boxShadowBlur: '0'
            }, 0.40]
        ]
    });
$.Velocity
    .RegisterEffect("scaleDown.moveDown", {
        defaultDuration: 1,
        calls: [
            [{
                translateY: '10%',
                scale: '0.9',
                boxShadowBlur: '40px'
            }, 0.20],
            [{
                translateY: '100%'
            }, 0.60],
            [{
                translateY: '100%',
                scale: '1',
                boxShadowBlur: '0'
            }, 0.20]
        ]
    });
$.Velocity
    .RegisterEffect("scaleDown.moveDown.scroll", {
        defaultDuration: 1,
        calls: [
            [{
                translateY: '100%',
                scale: '0.9',
                boxShadowBlur: '40px'
            }, 0.60],
            [{
                translateY: '100%',
                scale: '1',
                boxShadowBlur: '0'
            }, 0.40]
        ]
    });
$.Velocity
    .RegisterEffect("scaleUp.moveDown", {
        defaultDuration: 1,
        calls: [
            [{
                translateY: '-90%',
                scale: '0.9',
                boxShadowBlur: '40px'
            }, 0.20],
            [{
                translateY: '0%'
            }, 0.60],
            [{
                translateY: '0%',
                scale: '1',
                boxShadowBlur: '0'
            }, 0.20]
        ]
    });
//catch up
$.Velocity
    .RegisterEffect("translateUp.delay", {
        defaultDuration: 1,
        calls: [
            [{
                translateY: '0%'
            }, 0.8, {
                delay: 100
            }],
        ]
    });
//opacity
$.Velocity
    .RegisterEffect("hide.scaleUp", {
        defaultDuration: 1,
        calls: [
            [{
                opacity: '0',
                scale: '1.2'
            }, 1]
        ]
    });
$.Velocity
    .RegisterEffect("hide.scaleDown", {
        defaultDuration: 1,
        calls: [
            [{
                opacity: '0',
                scale: '0.8'
            }, 1]
        ]
    });
//parallax
$.Velocity
    .RegisterEffect("translateUp.half", {
        defaultDuration: 1,
        calls: [
            [{
                translateY: '-50%'
            }, 1]
        ]
    });

编译

CSS

/* --------------------------------

Primary style

-------------------------------- */

*,
*::after,
*::before {
    box-sizing: border-box;
}
html {
    font-size: 62.5%;
}
body {
    font-size: 1.6rem;
    font-family: "Open Sans", sans-serif;
    color: lightcoral;
    font-weight: 700;
    background-color: #22283f;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body::before {
    content: 'mobile';
    display: none;
}
@media only screen and (min-width: 1050px) {
    body::before {
        content: 'desktop';
    }
}
a {
    color: #267481;
    text-decoration: none;
    /* --------------------------------

Main Components

-------------------------------- */
}
@media only screen and (min-width: 1050px) {
    body[data-hijacking="on"] {
        overflow: hidden;
    }
}
.cd-section {
    height: 100vh;
}
.cd-section h2 {
    line-height: 100vh;
    text-align: center;
    font-size: 2.4rem;
}
.cd-section:first-of-type > div {
    background-color: #2b334f;
}
.cd-section:first-of-type > div::before {
    content: 'Effects not visible on mobile!';
    position: absolute;
    width: 100%;
    text-align: center;
    top: 20px;
    z-index: 2;
    font-weight: bold;
    font-size: 1.3rem;
    text-transform: uppercase;
    color: #6a7083;
}
.cd-section:nth-of-type(2) > div {
    background-color: #2e5367;
}
.cd-section:nth-of-type(3) > div {
    background-color: #267481;
}
.cd-section:nth-of-type(4) > div {
    background-color: #fcb052;
}
.cd-section:nth-of-type(5) > div {
    background-color: #f06a59;
}
[data-animation="parallax"] .cd-section > div,
[data-animation="fixed"] .cd-section > div,
[data-animation="opacity"] .cd-section > div {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
[data-animation="parallax"] .cd-section:first-of-type > div,
[data-animation="fixed"] .cd-section:first-of-type > div,
[data-animation="opacity"] .cd-section:first-of-type > div {
    background-image: url("https://unsplash.imgix.net/photo-1430620081187-c59647bac29e");
}
[data-animation="parallax"] .cd-section:nth-of-type(2) > div,
[data-animation="fixed"] .cd-section:nth-of-type(2) > div,
[data-animation="opacity"] .cd-section:nth-of-type(2) > div {
    background-image: url("https://ununsplash.imgix.net/photo-1430126833726-4a091c572f3c");
}
[data-animation="parallax"] .cd-section:nth-of-type(3) > div,
[data-animation="fixed"] .cd-section:nth-of-type(3) > div,
[data-animation="opacity"] .cd-section:nth-of-type(3) > div {
    background-image: url("https://ununsplash.imgix.net/photo-1428279148693-1cf2163ed67d");
}
[data-animation="parallax"] .cd-section:nth-of-type(4) > div,
[data-animation="fixed"] .cd-section:nth-of-type(4) > div,
[data-animation="opacity"] .cd-section:nth-of-type(4) > div {
    background-image: url("https://unsplash.imgix.net/photo-1429041966141-44d228a42775");
}
[data-animation="parallax"] .cd-section:nth-of-type(5) > div,
[data-animation="fixed"] .cd-section:nth-of-type(5) > div,
[data-animation="opacity"] .cd-section:nth-of-type(5) > div {
    background-image: url("https://unsplash.imgix.net/photo-1428959249159-5706303ea703");
}
@media only screen and (min-width: 1050px) {
    .cd-section h2 {
        font-size: 4rem;
        font-weight: 300;
    }
    [data-hijacking="on"] .cd-section {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    [data-hijacking="on"] .cd-section > div {
        visibility: visible;
    }
    [data-hijacking="off"] .cd-section > div {
        opacity: 0;
    }
    [data-animation="rotate"] .cd-section {
        -webkit-perspective: 1800px;
        -moz-perspective: 1800px;
        perspective: 1800px;
    }
    [data-hijacking="on"][data-animation="rotate"] .cd-section:not(:first-of-type) {
        -webkit-perspective-origin: center 0;
        -moz-perspective-origin: center 0;
        perspective-origin: center 0;
    }
    [data-animation="scaleDown"] .cd-section > div,
    [data-animation="gallery"] .cd-section > div,
    [data-animation="catch"] .cd-section > div {
        box-shadow: 0 0 0 rgba(25, 30, 46, 0.4);
    }
    [data-animation="opacity"] .cd-section.visible > div {
        z-index: 1;
    }
}
@media only screen and (min-width: 1050px) {
    .cd-section:first-of-type > div::before {
        display: none;
    }
}
@media only screen and (min-width: 1050px) {
    .cd-section > div {
        position: fixed;
        top: 0;
        left: 0;
        /* Force Hardware Acceleration */
        
        width: 100%;
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    [data-hijacking="on"] .cd-section > div {
        position: absolute;
    }
    [data-animation="rotate"] .cd-section > div {
        -webkit-transform-origin: center bottom;
        -moz-transform-origin: center bottom;
        -ms-transform-origin: center bottom;
        -o-transform-origin: center bottom;
        transform-origin: center bottom;
    }
}
.cd-vertical-nav {
    position: fixed;
    z-index: 1;
    right: 3%;
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    display: none;
}
.cd-vertical-nav a {
    display: block;
    height: 40px;
    /* image replace */
    
    width: 40px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background: url(../img/cd-icon-arrow.svg) no-repeat center center;
}
.cd-vertical-nav a.cd-prev {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    margin-bottom: 10px;
}
.cd-vertical-nav a.inactive {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s;
    -moz-transition: opacity 0.2s 0s, visibility 0s 0.2s;
    transition: opacity 0.2s 0s, visibility 0s 0.2s;
}
@media only screen and (min-width: 1050px) {
    .cd-vertical-nav {
        display: block;
    }
}

HTML

<body data-hijacking="off" data-animation="opacity">
    <section class="cd-section visible">
        <div>
            <h2>Page Scroll Effects</h2>
        </div>
    </section>

<section class="cd-section">
        <div>
            <h2>Section 2</h2>
        </div>
    </section>

<section class="cd-section">
        <div>
            <h2>Section 3</h2>
        </div>
    </section>

<section class="cd-section">
        <div>
            <h2>Section 4</h2>
        </div>
    </section>

<section class="cd-section">
        <div>
            <h2>Section 5</h2>
        </div>
    </section>

</body>

jQuery Page Scroll Effects 鼠标滚动，页面（section）之间切换时，有一个放大和模糊的过渡效果。

jquery，scroll

编辑器支持Emmet

快捷键

jQuery Page Scroll Effects 鼠标滚动，页面（section）之间切换时，有一个放大和模糊的过渡效果。

jquery，scroll

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：