Html+Css实现视觉差滚动效果

最新推荐文章于 2024-02-19 08:00:00 发布
最新推荐文章于 2024-02-19 08:00:00 发布
阅读量994 收藏 7
点赞数
分类专栏： HTML+CSS 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43314678/article/details/120826911
版权

Html+Css实现视觉差滚动效果

1、通过对多个元素块设置背景不随页面的滚动从而达到给观看的人形成一种视觉差的效果。

background-attachment: fixed; /*设置背景不随页面滚动而移动*/
background-size: cover; /*设置背景图片的大小，cover属性会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小*/

2、完整代码如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            position: relative;
            width: 100%;
            height: 300px;
            background-color:teal;
            margin-bottom: 10px;
            text-align: center;
            background-attachment: fixed;
        }
        .tp1 div{
            position: absolute;
            width: 200px;
            height: 250px;
            right: 10px;
            top: 20px;
        }
        .tp2 ul{
            display: block;
            position: absolute;
            width: 400px;
            height: 50px;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .tp2 ul li{
            display: block; 
            line-height: 50px ;
            float: left;
            padding: 0 20px;

        }
        .tp3 div{
            position: absolute;
            width: 200px;
            height: 250px;
            left: 10px;
            top: 20px;
        }
        .tp4 div{
            position: absolute;
            width: 200px;
            height: 250px;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        .tp5 ul{
            display: block;
            position: absolute;
            width: 400px;
            height: 80px;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .tp5 ul li{
            display: block ;
            float: left;
            height: 80px;
            width: 80px;
            margin: 0 20px ;
        }
        .tp1{
            background-image: url(http://pic1.win4000.com/wallpaper/e/599ce1e549968.jpg);
            background-size: cover;
        }
        .tp2{
            background-image: url(https://img9.51tietu.net/pic/2019-091017/jc4equxu413jc4equxu413.jpg);
            background-size: cover;
        }
        .tp3{
            background-image: url(http://pic1.win4000.com/wallpaper/8/5850de532eaf9.jpg);
            background-size: cover;
        }
        .tp4{
            background-image: url(http://pic1.win4000.com/wallpaper/6/58d5feabc7869.jpg);
            background-size: cover;
        }
        .tp5{
            background-image: url(http://pic.netbian.com/uploads/allimg/200628/005907-1593277147b968.jpg);
            background-size: cover;
        }
    </style>
</head>
<body>
    <div class="tp1">
        <div>
            <strong>Lorem ipsum dolor sit,</strong> 
            amet consectetur adipisicing elit.
            Voluptatem consectetur eaque veritatis minus hic velit quae, 
            voluptas, laboriosam sint magnam molestiae tempora officia saepe. 
            Temporibus labore accusantium omnis aut nisi.
        </div>
    </div>
    <div class="tp2">
        <ul>
            <li>Voluptatem</li>
            <li>Veritatis</li>
            <li>Molestiae</li>
        </ul>
    </div>
    <div class="tp3">
        <div>
            <strong>Lorem ipsum dolor sit,</strong> 
            amet consectetur adipisicing elit.
            Voluptatem consectetur eaque veritatis minus hic velit quae, 
            voluptas, laboriosam sint magnam molestiae tempora officia saepe. 
            Temporibus labore accusantium omnis aut nisi.
        </div>
    </div>
    <div class="tp4">
        <div>
            <strong>Lorem ipsum dolor sit,</strong> 
            amet consectetur adipisicing elit.
            Voluptatem consectetur eaque veritatis minus hic velit quae, 
            voluptas, laboriosam sint magnam molestiae tempora officia saepe. 
            Temporibus labore accusantium omnis aut nisi.
        </div>
    </div>
    <div class="tp5">
        <ul>
            <li>Voluptatem</li>
            <li>Veritatis</li>
            <li>Molestiae</li>
        </ul>
    </div>
</body>
</html>

3、效果如下所示。
在这里插入图片描述

Big_小小
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
页面视觉差滚动效果
04-08
页面视觉差滚动效果采用html5+css3技术，随着鼠标滑轮滚动触发事件产生视觉差效果
html5页面滚动视差效果特,34个网页视差滚动插件和视差特效教程分享
weixin_31830691的博客
06-03 1398
34个网页视差滚动插件和视差特效教程分享Sponsor视差滚动这个设计趋势从去年开始一直流行到现在，这个特效的视觉体验非常不错，比如前面分享的《19个创意网页设计欣赏》文章，有很多使视差滚动加上HTML5来实现出非常棒的网页设计作品。可以说视差滚动是个时髦的技术，我们通过创建水平或垂直滚动来实现多种很Cool的视觉特效，让人叹为观止。至于视差idea，可以参考《30+漂亮的视差滚动网页设计欣赏》这...
css完成视差滚动效果（详细的代码和效果）
最新发布
贫僧法号依平
02-19 1076
滚动滚动条，由于子元素设置了不同的 transform: translateZ()，那么他们滚动的上下距离 translateY 相对屏幕（我们的眼睛），也是不一样的，这就达到了滚动视差的效果。子元素设置不同的 transform: translateZ()，这个时候，不同元素在 3D Z轴方向距离屏幕（我们的眼睛）的距离也就不一样。视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。也就是说，背景一开始就已经被固定在初始的位置。
HTML视觉差—web篇
m0_62293565的博客
03-31 638
1.视觉差效果图： 解释：（能理解就不用看） 就是现在有两张图片，你给它放上网页中，然后给它们分别设置属性让（每张）能够覆盖整个屏幕，所以两张图片就占两个屏幕的大小，也就是需要滑动鼠标你才能看到第二张图片 现在我们想要让页面出现上图的效果：滑动的过程中上面图片由下到上逐渐被下面图片覆盖（可能说明不太清楚，动手实践下可能会清楚些） 2.正常情况下页面默认设置时background-attacthment默认属性是：scroll 想要出现视觉差，需要用到background-attac...
滚动视觉差
望京十三兄的博客
07-26 1563
什么是滚动视觉差呢？     视差滚动是从英文（Parallax Scroller）翻译过来，是近年来比较流行的一些网页设计应用，它是利用多层背景加上利用鼠标拖动滚动条来形成一些像动画一样的视觉效果，非常有感觉。 应用实例   http://www.putzengel.at/ http://wootten.com.au/process/ 线上demo ：https://codyhou...
CSS3 滚动视觉差效果
05-25
CSS3、返回顶部 + 滚动视觉差效果，滚动视觉差效果，CSS3 Background-Attachment：Fixed 滚动视觉差效果
页面缩放和视觉差滚动效果.zip
06-29
鼠标上下滚动，缩放页面，引起视觉差
炫酷jQuery视觉差滚动效果
12-12
这是一款简单但效果很炫酷的jQuery视觉差滚动效果。当你向下滚动鼠标的时候，背景图片比内容滚动得慢，形成一种3d视觉差效果。这款视觉差效果采用了jQuery、html5和css3技术。
jQuery视觉差效果图片左右滚动轮播特效.rar
01-04
经典的JS特效动画效果，效果实现的全部代码已提供，可供学习借鉴
多种css3滚动下拉动画加载效果
06-12
视觉效果非常不错的css3列表下拉动画效果，附件提供了多达16种不同的动画效果 懒人们可根据需要复制对应的article列表过去使用即可 使用方法： 1、将head中的样式引入到你的样式表中 2、将body中你...
html固定背景视觉差,试着写一个全屏背景视觉差滚动效果的代码
weixin_29280219的博客
06-24 159
试着写一个全屏背景视觉差滚动效果的代码。HTMLpage1page2page3CSShtml,body{height:100%;margin:0;}.wrap{width:100%;height:100%;overflow-x:hidden;overflow-y:scroll;position:relative;}.item{display:block;width:100%;he...
js带滚动惯性的视觉差特效插件
12-10
luxy.js一款js带滚动惯性的视觉差特效插件。该插件可以在页面中制作图片HTML内容滚动视觉差特效，并且在页面滚动时，带有惯性效果，非常炫酷。
html5 6种视觉差网页效果
07-11
使用6种不同视觉差特效的HTML5页面设计效果 效果中也有细节效果
html视差滚动
08-18
非常绚丽震撼的视差滚动效果，希望对大家的学习有所帮助，希望让更多的人知道这个效果
jquery+css3固定背景视觉差滚动效果代码
12-12
这是一个简单的使用css3 background-attachment: fixed和jquery制作的背景图像固定的滚动布局，页面滚动时给人以强烈的视觉差滚动效果。
动效案例：纯手工写一个滚动视差效果
前端达人
04-01 1258
大家好，今天我们一起来实践一个滚动视差的动画效果。虽然我们不是设计师，不擅长PS、AE，但是我们完全可以通过前端技术设计一幅漂亮的画面，今天我们要设计一幅月下山间小道开车的画面。在介绍...
简单的视觉差页面滚动效果
呆瓜丶的菜鸟技术分享
10-09 2750
视觉差滚动效果就是，滚动的时候图片有变化。可以完整的露出图片效果。我不会制作动图，简单结果如下 效果很简单只需要在图片div中添加如下代码： 并且引用js 同时写入js //<![CDATA[ $(window).load(function(){ $.stellar({ horizontalScrolling
css实现视觉差的滚动
anchu7971的博客
01-07 595
　　之前在逛知乎的时候，发现知乎app首页中偶尔掺杂的广告图片，都是做的视觉差的效果，广告图片的向上速度明显比外面页面的上拉速度慢了很多，看起来很炫酷，然后在网上看了下，发现有很多js插件可以实现这种效果。这种就不提了，这次我们是考虑的用css写。（当然，ie是不兼容的） 　　这边参考了张鑫旭大神的一篇文章。视觉差-张鑫旭 　　这边是我参考之后做的demo： demo 　...
前端页面 CSS+HTML5 简单实现视觉差效果 很简单
一起来讨论学习前端技术吧
08-19 379
前端页面 CSS+HTML5 简单实现视觉差效果 很简单
html5+css3+js期末项目
11-03
同时，我们还可以利用CSS3的新特性，如过渡效果、动画和弹性布局等，来提升页面的视觉效果。最后，我们可以使用JavaScript来实现网页的动态交互，如表单验证、页面滚动和数据请求等。 总之，HTML5 CSS3 JS期末项目...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值