【前端】使用jQuery完成简单的内视差效果、内视差效果

最新推荐文章于 2024-08-22 11:06:05 发布

TWICE-Nayeon

最新推荐文章于 2024-08-22 11:06:05 发布

阅读量60

点赞数

分类专栏：前端文章标签：前端 jquery sass html5

本文链接：https://blog.csdn.net/qq_53131684/article/details/131914031

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用简单的前端完成内视差效果

效果图如下：

在这里插入图片描述

本案例使用html+sass+jQuery，很简单哒！

HTML代码：

    <section class="section-1">
        <div class="section-top">
            // 选择你要插入的图片，一定要确保路径正确
            <div class="img parallax" 
            style="background-image: url(./images/image-2.jpg);">
            </div>
        </div>
        <div class="section-bottom">
           // 略...自己要啥写啥
        </div>
    </section>

sass代码：

.section-1 {
    display: flex;
    flex-direction: column;

    .section-top {
        width: 100%;

        .img {
            /* 自己可以自定义图片的大小，我是按照我需要的来写的 */
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            width: 100%;
            padding-top: 38.21%;
        }
    }

    .section-bottom {
     /* ...自己要啥写啥 */
    }
}

jQuery代码：

function parallax() {
    // 此处写的范围是屏宽大于等于768px的时候特效才生效
    if (jQuery(window).width() >= 768) {
        // 获取窗口高度与你滚动时的高度
        var wh = jQuery(window).height();
        var sh = jQuery(window).scrollTop();

        jQuery(".parallax").each(function () {
            var parallax_h = jQuery(this).offset().top;
            var item_h = jQuery(this).outerHeight();
            var parallax_y;
            if (sh > (parallax_h - wh) && sh < parallax_h + item_h) {
                parallax_y = 100 * (sh - (parallax_h - wh)) / (wh + item_h);
            } else if (sh > parallax_h + item_h) {
                parallax_y = 0;
            }
            // 使用jQuery添加你需要滚动的高度
            jQuery(this).css('background-position', 'center bottom ' + parallax_y + '%');
        });
    } else {
        // 如果屏宽小于768px的时候就不生效了
        jQuery('.parallax').css('background-position', 'center top 0');
    }
}