开发者社区> 问答> 正文

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

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

展开
收起
小旋风柴进 2016-03-12 09:35:21 1663 0
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'); } })()
    2019-07-17 19:00:08
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
《优酷响应式布局技术全解析》 立即下载
360°全景视频播放器的实现原理 立即下载
WebGL 在前端可视化中的实践 立即下载