视觉差：利用background-attachment做视差滚动效果

最新推荐文章于 2022-02-10 23:15:39 发布
最新推荐文章于 2022-02-10 23:15:39 发布
阅读量109 收藏 1
点赞数
原文链接：http://www.cnblogs.com/shimily/articles/4664216.html
版权

 

 

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>滚动视觉差示例</title>
        <style>
            *{
                padding:0;
                margin:0
            }
            body{
                text-align:center;
                background-attachment:fixed;
            }
            #main{
                width: 1280px;
                margin:auto
            }
            .header{
                background:#fff;
                padding: 10px 0
            }
            .bg-attachment{
                background:url(6.jpg) center center no-repeat;     /*图片**/
                box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -webkit-box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -moz-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -o-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -ms-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                background-attachment:fixed;
            }
            .bg-attachment .shadow{
                width:80%;
                height:700px;
                overflow:hidden;
                margin:auto;
            }
            .div2{
                background:url(qingz.jpg) center center no-repeat;   /*图片**/
                background-attachment:fixed;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div class="header">
                <img src="5.jpg">   <！--图片-->
            </div>
            <div class="bg-attachment">
                <div class="shadow"></div>
            </div>
            <div class="header">
                <img src="qi.jpg"><！--图片-->
            </div>
            <div class="bg-attachment div2">
                <div class="shadow"></div>
            </div>
        </div>
    </body>
</html>

 

转载于:https://www.cnblogs.com/shimily/articles/4664216.html

weixin_30692143
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
滚动视差效果background-attachment实战记录
12-13
滚动视差效果的实现原理是在同一个页面上将页面元素分为多层，例如可以分为背景、内容、贴图层，在滚动页面的时候让三者滚动的速度不一，从而在人的视觉上能够形成一种立体的近似效果。最近在做一个项目wiki的时候要用到滚动视差的东西，所以顺便记录一下。一般来说背景层是滚动里面最慢的，内容层可以和页面的滚动速度一致。 较为简单的滚动视差效果两层就可以了，一个背景，然后在背景上滚动内容。CSS中用来定义背景滚动属性的是background-attachment属性，具体取值如下： •scroll: 默认值。背景图像会随着页面其余部分的滚动而移动。 •fixed: 当页面的其余部分滚动时，背景图像不会移动
利用background-attachment做视差滚动效果
weixin_33936401的博客
12-28 136
视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为今年网页设计的热点趋势，越来越多的网站应用了这项技术。 不明白的可以先看看eBay上的效果：http://www.ebay.com/new/ 其实就是固定背景不让它随着滚动轴移动，但包含背景的容器是跟着滚动的，所造成的视觉差异看起来就像跟转换场景一样。（这个解释别嫌混...
滚动视差效果——background-attachment
iteye_8029的博客
08-20 174
滚动视差效果的实现原理是在同一个页面上将页面元素分为多层，例如可以分为背景、内容、贴图层，在滚动页面的时候让三者滚动的速度不一，从而在人的视觉上能够形成一种立体的近似效果。最近在做一个项目wiki的时候要用到滚动视差的东西，所以顺便记录一下。一般来说背景层是滚动里面最慢的，内容层可以和页面的滚动速度一致。 较为简单的滚动视差效果两层就可以了，一个背景，然后在背景上滚动内容。CSS中用来定义背景滚...
滚动视差？CSS 不在话下
weixin_34138139的博客
08-10 364
何为滚动视差 视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。 作为网页设计的热点趋势，越来越多的网站应用了这项技术。 通常而言，滚动视差在前端需要辅助 Javascript 才能实现。当然，其实 CSS 在实现滚动视差效果方面，也有着不俗的能力。下面就让我们来见识一二：   认识 background-att...
视差滚动之background-attachment
nanjwangc的专栏
04-06 1240
视差滚动background-attachment 展示范围、展示位置
parallax-homepage：视差滚动效果
02-13
这段代码中，`.parallax-bg`作为背景元素，通过`position: fixed`保持在窗口固定位置，`background-attachment: fixed`使得背景图随窗口滚动，而`transform: translateZ(-1px) scale(2)`则是为了实现视差滚动效果，...
视差滚动效果：HTML和CSS视差滚动效果
02-28
视差滚动效果是一种在网页设计中广泛采用的创新技术，它可以为用户带来深度感和立体感，提升网站的视觉吸引力。这种效果通过让背景元素以不同的速度移动，相对于前景元素，创造出一种三维空间的错觉。在HTML和CSS中...
2014-11-28-视差滚动实践1
08-04
简单实现视差滚动的一种方法是利用CSS的`background-attachment: fixed`属性。将背景图片设置为fixed，使其在滚动时保持位置不变，从而实现简单的视差效果。但这种方法仅限于单个背景层的处理，无法实现多层元素的...
滚动的视差background-attachment
fxs12138的博客
11-15 179
最近，头条上有一个视图滚动的特效。于是，最近学着做了一下。 scroll：默认值。背景图像会随着页面其余部分的滚动而移动。 fixed：当页面的其余部分滚动时，背景图像不会移动。 local：背景相对于元素固定（和scroll很像，但是有区别），如果元素内有滚动条，背景会随着内容滚动。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&g...
视差滚动-background-attachement
08-11 159
本文转载于:猿2048网站https://www.mk2048.com/blog/blog.php?id=ijc0ib&title=%E8%A7%86%E5%B7%AE%E6%BB%9A%E5%8A%A8-background-attachement 之前项目中没有涉及到视觉滚动的...
使用background-attachment实现视差滚动、水波
weixin_41897680的博客
02-10 915
background-attachment 的简单学习
十分钟教你用 CSS 实现滚动视差 ！（实用）
前端下午茶
02-01 7030
何为滚动视差视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为网页设计的热点趋势，越来越多的网站应用了这项技...
CSS中背景图片滚动属性background-attachment
热门推荐
张波的技术积累
01-08 2万+
该属性用来定义背景图片是否随浏览器滑块的拖动而滚动，在背景图片滚动属性中，可以使用两个属性值，分别为scroll和fixed，      background-attachment: scroll | fixed;      *scroll:   背景图片随滑块的变化而滚动。      *fixed: 背景图片固定不动。          New Document
背景图片设置：视觉差效果的实现background-attachment: fixed；
weixin_49752665的博客
08-08 510
1.background-size background-size:cover; 尽可能显示背景图片，会按照自身的比例伸缩 background-size:contain;将图片完全显示，会按照自身的比例伸缩 background-size：100% 100%;按容器比例撑满，图片变形； background-size：val val;给图片固定的宽高，第二个值不写则为auto 2.视觉差的实现 [class]{ width: 800px; height: 200px;
视差滚动原理及实现
whqet
03-04 7603
作为一种优雅酷炫的页面展示的方式，视差滚动（Parallax Scrolling）正受到越来越多前端设计师的宠爱，优设的2014年网页设计趋势中依然能够看到它的影子，所以我们不得不来好好研究下视差滚动的原理和实现方式。
background-attachment 属性，玩心大起
看风听雨
06-25 2993
今天突然有个搞电商的朋友，问我能不能实现一个背景不动，页面滚动的小特效，当时大脑一顿操作，各种实现方法想了好多，第一个想到的就是js控制，突然想到了css的background-attachment 属性，就想试试。background-attachment的属性：（注意：一定要与背景搭配使用）background-attachment的兼容性：background-attachment的兼容性还...
weixin105文章管理系统+ssm.zip
08-23
随着计算机技术的成熟，互联网的建立，如今，PC平台上有许多关于文章管理方面的应用程序，但由于使用时间和地点上的限制，用户在使用上存在着种种不方便，而开发一款基于微信小程序的文章管理系统，能够有效地解决这个问题。 本基于微信小程序的文章管理系统是针对文章管理而开发，采用微信开发者工具进行微信端开发，使用MYSQL数据库进行系统数据的储存，系统满足用户通过微信客户端进行文章管理的需求。本小程序是以微信为入口的，可以说是在自带接近10亿的流量人口。整个系统不仅操作简单、便捷，而且节约用户的时间及资源成本等，仅需通过一部手机和微信号即可满足用户们的需求。
AIoT星图研究院2024中国物联网产业创新白皮书
最新发布
08-23
物联网产业概述：介绍了物联网的概念、产业结构，以及中国物联网产业的发展现状，包括市场规模、市场结构、用户规模、终端连接数和投融资情况。 物联网产业面临的问题与机遇：分析了产业面临的新挑战，如安全性、标准与互操作性、可扩展性、设备功耗、可靠性和延迟等，并探讨了产业迎来的新机遇。 政策、法律法规及标准：梳理了全国性政策，包括感知层、通信层、平台层和应用层的相关政策，并讨论了物联网数据安全与数据合规问题。 感知层技术：深入分析了RFID无源物联网、毫米波雷达、激光雷达、柔性传感器、智能传感器、3D视觉传感器、MEMS传感器等技术，并探讨了北斗及卫星高精度定位技术。 传输层技术：涵盖了5G、LTE Cat.1、6G、卫星通信、星闪、蓝牙、Wi-Fi、ZigBee、NFC、LiFi、LoRa等通信技术。 平台与软件层：讨论了物联网平台产业、物联网操作系统、物联网数据库和物联网大模型产业的分析。 应用层：分析了产业物联网和消费物联网的应用领域，包括智慧城市、智能工业、车联网、智慧医疗、智慧园区、智慧农业、智慧零售、智慧能源、智慧物流等。 市场运营分析：物联网市场规模、结构、用户规模
前端面试深度解析：CSS实现视差滚动效果
CSS的`background-attachment`属性是实现视差滚动的关键。设置该属性为`fixed`可以使背景图像相对于视口固定，即使元素内部有滚动，背景也不会随之滚动。例如： ```css section { height: 100vh; } .g-img { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值