请问网页的视差背景如何实现?
不用html5是否可以实现视差背景效果?
效果类似:http://gmgard.us/
不过他用了新标签,能不能不用这个来实现同样的 视差背景?
展开
收起
1
条回答
写回答
写回答
-
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'); } })()2019-07-17 19:05:03赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
