请问网页的视差背景如何实现?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

请问网页的视差背景如何实现?

2016-03-12 09:35:21 1163 1

不用html5是否可以实现视差背景效果?
效果类似:http://gmgard.us/
不过他用了新标签,能不能不用这个来实现同样的 视差背景?

取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:00:08

    他这个不是html5实现的,只是用js设置了背景图片的位置而已

    body{background-attachment: fixed;background-repeat: no-repeat;background-image: url("http://static.gmgard.us/Images/banner7_1440.jpg");}
    (function () { function bgpos($e, x, y) { if (x && y) $e.css('background-position', x + ' ' + y); return $e.css('background-position').split(' '); } if (window.screen.availWidth > 1024) { var $h = $('html'), $b = $('body'), wrapper = $('.totop-wrapper'), hoffset = 0, _adjustbg = function (pos) { bgpos($h, bgpos($h)[0], (pos + hoffset) + 'px'); bgpos($b, bgpos($b)[0], pos + 'px'); }, adjustbg = $.noop; $(window).scroll(function () { var top = $(window).scrollTop(); if (top > 400 && wrapper.hasClass('hidden')) { wrapper.removeClass('hidden'); wrapper.addClass('active'); } else if (top <= 400 && wrapper.hasClass('active')) { wrapper.addClass('hidden'); wrapper.removeClass('active'); } adjustbg(-top * 0.05); }).on('initoffset', function () { adjustbg = localStorage['parallax'] == 'off' ? $.noop : _adjustbg; hoffset = parseInt(bgpos($h.removeAttr('style'))[1], 10); $(this).trigger('scroll'); }).on('resize', function () { $b.removeAttr('style'); $(this).trigger('scroll'); }).trigger('initoffset'); } })()
    0 0
相关问答

19

回答

【分享】如何提高网站的打开速度?

enj0y 2012-11-17 14:35:22 57013浏览量 回答数 19

1

回答

支付宝H5 下载的时候,提示 【请确保该下载文件来源安全,如需浏览,请长按网址复制后使用浏览器访问】

游客ptexzird3doe2 2019-10-14 15:29:54 69596浏览量 回答数 1

28

回答

钉钉开放平台“常见问题常见问题常见问题“重要请关注

竹梅 2015-12-03 00:39:14 93877浏览量 回答数 28

65

回答

第一期阿里云高校工作坊申办启动

柚子菌 2017-08-10 17:04:08 43815浏览量 回答数 65

19

回答

【分享】如何提高网站的打开速度?

enj0y 2012-11-17 14:35:22 47123浏览量 回答数 19

1

回答

H5 直播的疯狂点赞动画是如何实现的?(附完整源码)

剑曼红尘 2020-04-15 19:03:48 35318浏览量 回答数 1

58

回答

技术入门问答集锦,涉及多种技术方向,解决新人学习困惑

管理贝贝 2016-08-03 10:13:27 52773浏览量 回答数 58

13

回答

【云服务器分享】如何节省网站流量

dreamdoo 2012-10-15 10:36:09 80501浏览量 回答数 13

61

回答

阿里云OSS需求汇总帖,有需求请进来说说

enj0y 2012-09-05 08:40:29 41534浏览量 回答数 61

46

回答

H5技术百问——不懂H5你就OUT啦

yq传送门 2017-09-09 11:03:04 47455浏览量 回答数 46
2736
文章
6591
问答
问答排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载