您的浏览器需要启用 JavaScript 才能正常访问此网站。
萨龙网络
登录
首页-WordPress文章-WordPress-正文

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

萨龙龙萨龙龙WordPress10年前001.56W
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年从江西骑行来到大理,现栖居于洱海边,食人间烟火,过简单生活,做简约设计!
1412.36M457.17W4.42W
加载中…
分享:
Woocommerce+Buddypress+Bbpress商城社区论坛头像本地化
Woocommerce+Buddypress+Bbpress商城社区论坛头像本地化上一篇
Wordpress附件函数wp_get_attachment_metadata简码获取照片EXIF信息下一篇
Wordpress附件函数wp_get_attachment_metadata简码获取照片EXIF信息
相关文章
总数:114

WordPress MU多站点解决Timthumb.php不显示缩略图

最近在开发Perimg图片主题,用户想要用Timthumb.php插件来实现缩略图,缩略图的顺序是自定义域、文章第一张图片与默认缩略图,而萨龙龙…
萨龙龙萨龙龙WordPress10年前001.23W0

WordPress 主题感染恶意代码function _check_active_widgets

萨龙龙开发主题这么久,第一次感染恶意代码,整个 WordPress 下的主题 functions.php 都被插入了一大段函数代码,百度一下也发…
萨龙龙萨龙龙WordPress8年前001.68W0

修改Buddypress中管理员的显示名与用户名区别开提高账户安全

Buddypress社区中有很多地方会直接显示用户登录名,比如用户个人主题中的名称和链接中,所有来访的用户都知道了管理员的用户名,对于小人知道了…
萨龙龙萨龙龙Buddypress, WordPress11年前001.71W0

WordPress 主题禁用古滕堡编辑器和小工具

WordPress 4.9.8 版本就发布了古滕堡编辑器,很好用,添加文章也比经典编辑器方便很多。在 5.8 版本后又在小工具中增加了古滕堡编辑…
萨龙龙萨龙龙WordPress4年前001.58W0

萨龙网络站点群所有网站使用https访问

HTTPS(全称:Hyper Text Transfer Protocol over Secure Socket Layer),是以安全为目标的…
萨龙龙萨龙龙WordPress10年前001.49W0

使用 wp_add_inline_script 函数向 WordPress 站点输出脚本

前面我们介绍了wpadd_inline_style函数的使用,并为主题添加自定义样式切换功能,既然有函数可以向站点输出 css 样式,同时也可以…
萨龙龙萨龙龙WordPress7年前001.61W0

龙霄主题加盟推广:前端追踪归因、多语言支持,从流量到收益的全链路闭环

前言在数字化商业生态中,联盟营销(Affiliate Marketing)已成为品牌方拓展销售渠道、降低获客成本的核心手段。一套完整的加…
萨龙龙萨龙龙Nuxt.js, Vue.js, WordPress15天前002520

WordPress 出现 Allowed memory size of 134217728 bytes exhausted 错误如何修复

当出现 "Allowed memory size of 134217728 bytes exhausted" 错误时,意味着 PHP 内存限制被…
萨龙龙萨龙龙WordPress3年前002.55W0

WordPress函数wp_nav_menu_items向菜单列表中添加搜索内容

Wordpress的菜单都是通过后台菜单来添加设置,很多时候需要添加一些功能到菜单,比如搜索,或者购物车,这时我们就可以使用wp_nav_men…
萨龙龙萨龙龙WordPress10年前001.07W0

WordPress获取自定义文章类型分类下的文章并循环

Wordpress获取分类文章的函数有query_posts和WP_Query,两个函数的功能都很强大,推荐使用WP_Query函数来查询文章。…
萨龙龙萨龙龙WordPress10年前001.64W0

移除 WooCommerce 商城插件中我的帐户相关页面

WooCommerce 插件默认为我的帐户页面提供了:仪表盘、订单、下载、地址、帐户详情几个页面,以及一个退出登录的按钮,如果出售的是实物或者没…
萨龙龙萨龙龙WooCommerce8年前001.51W0

WordPress MU多站点网络克隆新站点插件Multisite Cloner

Wordpress MU多站点已经使用很久,在本地测试和主机上安装的都是多站点,极大的方便网站搭建以及主题开发。当我们有多个站点,需要创建的新站…
萨龙龙萨龙龙WordPress10年前002.05W0
评论表单游客 您好,欢迎参与讨论。
加载中…
评论列表
总数:0
萨龙网络
没有相关内容