html 视差插件

Posted 2021-05-11

/* ========================================================================= */	 
$.fn.paralmax=function(){var t;return $(window).width(),t=$(window).height(),this.each(function(){function e(){$(window).width()>n.breakpoint?r.data("speed")||0===r.data("speed")?n.speed=r.data("speed"):n.speed=.5:n.speed=0}function a(){var t=r,e=$("html").scrollTop(),a=$("body").scrollTop(),s=(e>a?e:a)-n.start,o=parseInt(s*n.speed)+n.offset;t.css({webkitTransform:"translate3d(0, "+o+"px, 0)",MozTransform:"translate3d(0, "+o+"px, 0)",msTransform:"translateY("+o+"px)",OTransform:"translate3d(0, "+o+"px, 0)",transform:"translate3d(0, "+o+"px, 0)"})}var s,r=$(this),n={start:(s=r.offset()).top,stop:s.top+r.outerHeight(),speed:0,resizable:!!r.data("resize")&&r.data("resize"),breakpoint:r.data("breakpoint")?r.data("breakpoint"):0,offset:r.data("offset")?r.data("offset")*r.outerHeight():0};e(),function(){var e,a=r;1==n.resizable&&(e=parseInt(t*n.speed),a.css("height","+="+e))}(),a(),$(window).bind("scroll",function(){a()}),$(window).bind("resize",function(){e()})})};

.section-bg {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

<section>
    <div class="section-bg parallax-object" style="background-image: url('http://www.unsplash.it/1500/800?image=669');" data-breakpoint="768" data-resizable="true" data-speed="0.5"></div>
</section>