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

Question

不用html5是否可以实现视差背景效果?

效果类似:http://gmgard.us/

不过他用了新标签,能不能不用这个来实现同样的 视差背景?

Answer 1

他这个不是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'); } })()