PC横向单屏swiper+视差效果

最新推荐文章于 2023-11-08 19:30:38 发布

小蚂蚁oo

最新推荐文章于 2023-11-08 19:30:38 发布

阅读量1.5k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/qq_39494812/article/details/84557790

版权

3 篇文章 0 订阅

订阅专栏

1.1关键属性

parallax: true(初始化时加上这一条，马上就能开启视差效果的大门)

data-swiper-parallax="-100"(动画的平移值，一般为X)

data-swiper-duration="2000"（动画持续时间）

可不止要注意这些属性呢！！还有一个属性需要注意：

一般来说data-swiper-duration>speed才有效果,且speed不能太慢，一般在1000左右为宜，除非特殊要求

speed: 600(swiper切换所需时间)

1.2效果怎么出来

有时候一边调节位移，一边调节时间，感觉好像没什么软用，所以我们需要固定一个值，去调节另一个值

固定时间：同时到位，速度有快有慢

data-swiper-parallax="-1200" data-swiper-parallax-duration="2000"

data-swiper-parallax="-1000" data-swiper-parallax-duration="2000"

固定距离：速度相同，动画结束时间有前有后

data-swiper-parallax="-1000" data-swiper-parallax-duration="1600"
data-swiper-parallax="-1000" data-swiper-parallax-duration="1200"

2.1部分缩放

一般使用到这种模式的都是单屏，也就是使用了swiper,所以缩放是个大问题,然而缩放会使文字和图片变模糊

logo，分享，以及底部或侧边导航，这些都不会影响到内容区域,所以不需要缩放，有的按钮本身就比较小也不需要缩放，这样才能保证页面在小屏下的清晰度

像这个页面：只有中间区域需要居中处理一下，调节margin来使具体的每一屏居中显示

其他的都按照原来的定位来布局就可以了，

中间这一块内容区域如果大于1200*700,可能就需要缩放了,

.scale-wrap{
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -450px 0 0 -700px;
    width: 1400px;
    height: 800px;
}

2.2@media VS resize 根据宽度缩放 VS 根据高度缩放以及transition-origin

具体采用何种方式需要查看设计稿，如果内容较多但是内容之间空白比较多，或者内容比较集中的情况下可使用@media

2.2.1resize

比较难处理的就是resize,下面我们来说resize的一个小案例:

content1:核心内容区域

content2:按钮和标题区域，不缩放

content3:边缘被切掉的图片，必须靠边显示

你会怎么做？当content1核心区域缩放之后，其他区域只能通过找关系的方式进行定位值的计算,比如:

content2靠右定位，top值需要计算,获取宽度不会受scale的影响，而offset会受其影响,用这种方式很容易也能求出content3的定位

var $top1=$content2.offset().top;
$content1.css({top:$top});

2.2.2 根据宽度缩放 VS 根据高度缩放

根据设计稿进行判断，看哪个方向内容较多

关注