swipe的基础使用（二十六）

最新推荐文章于 2024-06-19 15:26:09 发布

花开艳丽终消散

最新推荐文章于 2024-06-19 15:26:09 发布

阅读量1.2k

点赞数

分类专栏： swiper介绍文章标签： html5 web前端框架移动 swiper

本文链接：https://blog.csdn.net/never__ends/article/details/52035897

版权

这篇博客探讨了如何在Swiper框架中创建视差效果。通过设置背景图片层，调整滑动距离和方向，以及配置页面内容的移动距离，结合JavaScript初始化页面，可以实现炫酷的视差滚动体验。

摘要由CSDN通过智能技术生成

本次内容我们介绍swiper当中的视差效果。首先我们按照流程先要创建好swiper的基础页面构成。

<div class="swiper-container">
            <div class="parallax-bg" style="background-image:url(4.jpg)"
            data-swiper-parallax="-23%"></div>
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="title" data-swiper-parallax="-100">H5EDU 1</div>
                    <div data-swiper-parallax="-300"><img src="logo.png"></div>
                </div>
                <div class="swiper-slide">
                    <div class="title" data-swiper-parallax="-100">H5EDU 2</div>
                    <div data-swiper-parallax="-300"><img src="logo.png"></div>