萨龙网络
登录
首页-WordPress文章-WordPress-正文

CSS3 background-attachment:fixed实现滚动视差效果

萨龙龙萨龙龙
WordPress
10年前
0
0
1.54W
CSS3 background-attachment:fixed实现滚动视差效果一直都想设计一个有滚动视差效果的主题,而网上所有的介绍和有视差效果的主题都是使用jQuery来实现,而且由于视差背景图是一张满屏的大小,所以一直没有实现这个功能。最近在开发一个摄影/作品展示的主题,使用CSS3 background-attachment:fixed相当轻松地添加了视差滚动效果。[infobox]background-attachment 属性包括:[/infobox]
  • scroll,默认值,背景图像会随着页面其余部分的滚动而移动。
  • fixed,当页面的其余部分滚动时,背景图像不会移动。
  • inherit,规定应该从父元素继承 background-attachment 属性的设置
通过设定background-attachment属性值为fixed,滚动页面时就能实现视差效果,如此简单的一个功能,而且主流浏览器都支持 background-attachment 属性,为什么那么多作品中都是使用jQuery呢? 相信一个功能CSS3和jQuery都能实现的,所有前端开发人员都会选择CSS3吧,萨龙龙已经找到最佳的实现视差的方法就是CSS3的background-attachment:fixed属性。 PS:Deephoto摄影/作品展示主题已经使用了CSS3的视差效果,以及CSS3滚动动画,视觉效果与之前的主题都完全不一样。同时最大的一个亮点就是添加了自动获取图片的EXIF信息,这对于搞摄影的朋友来说是很振奋人心的功能,预计9月底上线。 [scbutton link="https://demo.salongweb.com/parallax/index.html" target="blank" variation="red"]演示效果[/scbutton][scbutton link="https://deephoto.salongweb.com" target="blank" variation="yellow"]Deephoto主题企业版本视差演示[/scbutton]
标签:
本文原创,作者:萨龙龙,其版权均为萨龙网络所有。
如需转载,请注明出处:https://salongweb.com/background-attachment-fixed.html
萨龙龙

萨龙龙

侠客
一个平平常常的人,热爱生活、旅行和摄影,骑行去过西藏,一直计划再去。14年从江西骑行来到大理,现栖居于洱海边,食人间烟火,过简单生活,做简约设计!
1342.32M457.10W4.42W
加载中…
分享:
Woocommerce+Buddypress+Bbpress商城社区论坛头像本地化
Woocommerce+Buddypress+Bbpress商城社区论坛头像本地化上一篇
Wordpress附件函数wp_get_attachment_metadata简码获取照片EXIF信息下一篇
Wordpress附件函数wp_get_attachment_metadata简码获取照片EXIF信息
相关文章
总数:107

在WooCommerce中添加“立即购买”按钮直接跳转到结算页面

MNews主题集成了WooCommerce商城插件,有些用户要求增加一个『立即购买』按钮,这篇文章介绍下如何在WooCommerce中添加…
萨龙龙萨龙龙
WooCommerce
8年前
0
0
3.18W
0

WordPress MU多站点从子域名转子目录

使用WordPressMU多站点来管理所有的站点确实很方便,可以省去很多重复的工作,节省资源。萨龙网络使用MU多站点已经很久,已经爱不释手,也…
萨龙龙萨龙龙
WordPress
10年前
0
0
2.48W
0

WooCommerce商城首页获取自定义字段

WooCommerce商城首页默认被插件转换成归档页面archive-product.php,但是添加的依然是页面,所以通过get_post_m…
萨龙龙萨龙龙
WooCommerce
9年前
0
0
1.28W
0

WooCommerce 注册表单添加本站名称为字段的验证方式

萨龙网络使用的Youji原创企业主题注册登录都是使用WooCommerce商城插件自带的表单,使用简单方便。最近苦于国外机器人注册多,且…
萨龙龙萨龙龙
WooCommerce
7年前
0
0
1.46W
0

WordPress 最简便的边栏调用方法与提示

WordPress主题文章类型较多,想实现不同的文章类型页面调用不同的边栏,一般的方法是将代码写在主题根目录下的sidebar.php文件…
萨龙龙萨龙龙
WordPress
8年前
0
0
1.20W
0

WordPress 主题获得评论深度的2种方法

一、通过使用全局变量获取评论深度 我相信您应该知道wp_list_comments()函数,它可以将评论打印在网站页面上。 为什么这个功…
萨龙龙萨龙龙
WordPress
4年前
0
0
2.34W
0

WordPress 功能函数——absint(将值转换为非负整数)

用法 absint(mixed$maybeint) 将值转换为非负整数。 参数 $maybeint (mixed)(必需)您希望…
萨龙龙萨龙龙
WordPress Functions
7年前
0
0
1.13W
0

WordPress添加 span 标签到分类目录和文章归档文章数量上

WordPress默认提供了分类目录,文章归档等小工具,在前台开发中,由于分类目录和文章归档显示的文章数量没有添加标签,导致写样式比较麻烦,如…
萨龙龙萨龙龙
WordPress
6年前
0
0
1.45W
0

WordPress 主题选项框架 Codestar Framework Pro 2.0专业版使用

萨龙网络在2018年9月份就写了一篇《WordPress简约实用的主题选项框架CodestarFramework》文章来介绍Codest…
萨龙龙萨龙龙
WordPress
7年前
0
0
3W
0

WordPress获取不同用户、类型文章和自定义字段下的文章数量

萨龙网络开发的MNews主题中,集成了个人中心功能,需要获取文章、视频、下载、专题和商城的文章数量,这个是比较简单,使用wp_count_p…
萨龙龙萨龙龙
WordPress
7年前
0
0
1.09W
0

萨龙网络集成Buddypress+Bbpress社区论坛功能

前段时间已经发布Purity2.0主题更新的文章,主题已经集成了作品展示、商城,通过半个来月的时间把Buddypress+Bbpress社区论坛…
萨龙龙萨龙龙
Bbpress, Buddypress
10年前
0
0
1.80W
0

AMH面板安装配置Memcached加速WordPress站点

前面写过AMH面板安装配置redis加速WordPress站点一文,来介绍redis的安装与配置,对于WordPress站点的加速效果是相当的明…
萨龙龙萨龙龙
WordPress, 软件系统
9年前
0
0
1.41W
0
评论表单游客 您好,欢迎参与讨论。
加载中…
评论列表
总数:0
萨龙网络
没有相关内容