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

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

萨龙龙萨龙龙
WordPress
10年前
0
0
1.50W
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.20M456.65W3.85W
分享:
Woocommerce+Buddypress+Bbpress商城社区论坛头像本地化
Woocommerce+Buddypress+Bbpress商城社区论坛头像本地化上一篇
WordPress附件函数wp_get_attachment_metadata简码获取照片EXIF信息下一篇
WordPress附件函数wp_get_attachment_metadata简码获取照片EXIF信息
相关文章
总数:107

WordPress 插入页面函数 wp_insert_post

萨龙网络已经开发了很多WordPress主题,LensNews主题要创建的页面较多,所以导致很多用户来咨询如何设置用户中心,在最新上线的…
萨龙龙萨龙龙
WordPress
7年前
0
0
2.10W
0

WordPress 简约实用的主题选项框架 Codestar Framework

CodestarFramework,一个轻量且易用的WordPress选项框架,在萨龙龙最新设计开发的企业教育培训类WordPress…
萨龙龙萨龙龙
WordPress
7年前
0
0
3.81W
0

WordPress为所有文章自动添加自定义字段

Sixianqiu主题是专为诗歌设计开发的主题,有一些朋友也需要这样的多形式博客主题,就整理出来了。一开始所有的文章内容都是居中显示,这样对于其…
萨龙龙萨龙龙
WooCommerce
8年前
0
0
1.63W
0

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

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

WordPress 判断是否在循环中的函数 in_the_loop

WordPress主题开发中,很多时间需要在文章与列表中进行判断从而输出不同的内容,比如文章分类,只想在列表中显示,文章中不显示。列表页面可直…
萨龙龙萨龙龙
WordPress
7年前
0
0
1.03W
0

WordPress 功能函数—— add_comments_page(将子菜单页添加到评论主菜单上)

描述 此函数具有一个功能,该功能将用于确定菜单中是否包含页面。 连接到处理页面输出的函数也必须检查用户是否具有所需的…
萨龙龙萨龙龙
WordPress Functions
6年前
0
0
1.66W
0

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

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

WordPress添加标签相关文章简码

自从了解到WordpressMU多站点,就开始一步一步的向多站点发展,也将萨龙网络所有站点都安装在WordpressMU多站点中。在使用多站…
萨龙龙萨龙龙
WordPress
9年前
0
0
1.06W
0

WordPress 主题 Slearn Pro 课程插件之编辑文章时创建和选择课时

在WordPress+Vue.js主题SlearnPro发布2.0重写版本后,用户反馈编辑课程选择课时时不够友好,课时很多时选择就相…
萨龙龙萨龙龙
WordPress
3年前
0
0
2.45W
0

WordPress 功能函数—— add_blog_option(为指定的博客ID添加新选项)

描述 您不需要序列化值。如果需要序列化值,则在将其插入数据库之前将其序列化。请记住,资源不能序列化或作为选项添加。 …
萨龙龙萨龙龙
WordPress Functions
6年前
0
0
9.59K
0

WordPress+Nuxt3前后端分离项目,实现不限层级的多维数组菜单

使用WordPress+Nuxt3做前后端分离项目时,菜单需要多维数组,且不限层级,可以使用递归函数很方便地将wp_get_nav_menu…
萨龙龙萨龙龙
WordPress
2年前
2
1
2.99W
0

WordPress + 宝塔面板速度优化方案 Memcached + Redis

WordPress网站的速度应该上每个站长必须关注的一个问题,对于刚使用WordPress的朋友,优化网站速度是比较困难的事情,找不到好的…
萨龙龙萨龙龙
WordPress, 建站技术
5年前
0
0
2.26W
0
评论表单游客 您好,欢迎参与讨论。
请输入昵称
请输入邮箱
请输入网址
0 / 0
评论列表
总数:0
萨龙网络
没有相关内容