html 响应全尺寸图像/背景视差效果JQuery插件

Posted 2021-05-11

* { margin: 0; padding: 0; }
.section-container {
    position: relative;
    height: 50vh;
    overflow: hidden;
}
.section-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

jQuery(function($){
  
	// PARALLAX FUNCTIN CALL
  $(".parallax-object").each(function() {
	    parallaxObject($(this));
  });
  
});
	/* ========================================================================= */
	/* PALALLAX FUNCTION */
	/* ========================================================================= */
	function parallaxObject(object) {
	    var speed, resize, reset, originalPos, windowWidth, windowHeight;
	    windowWidth = $(window).width();
	    windowHeight = $(window).height();
	    speed = $(object).data("speed") ? $(object).data("speed") : 0.5;
	    resize = $(object).data("resize") ? $(object).data("resize") : false;
      resetIt(object);
	    resizeIt(object);
	    parallaxIt(object);

	    $(window).bind("scroll",function() {
	        parallaxIt(object);
	    });
      
      function resetIt(object) {
	        var self = $(object);
          originalPos = $(self).data("reset") ? $(self).parent().offset().top : 0;
      }

	    function resizeIt(object) {
	        var self = $(object);
	        var extraHeight;
	        // RESIZE OBJECT TO FULL SIZE
	        if( resize == true ) {
	            extraHeight = parseInt(windowHeight * speed / 2);
	            self.css( "height", '+=' + extraHeight);
	        }
	    }

	    function parallaxIt(object) {
            $(object).each(function() {
                var self = $(this);
                var nm = $("html").scrollTop();
                var nw = $("body").scrollTop();
                var n = (nm > nw ? nm : nw);
                var objectPos = self.parent().offset().top;
                var position = n - objectPos + originalPos;
                var scrollPosition = parseInt( position * speed );

                // ADD TRANSLATE OFFSET TO OBJECT
                self.css({
                    'webkitTransform' : 'translate3d(0, ' + scrollPosition + 'px, 0)',
                    'MozTransform'    : 'translate3d(0, ' + scrollPosition + 'px, 0)',
                    'msTransform'     : 'translateY('     + scrollPosition + 'px)',
                    'OTransform'      : 'translate3d(0, ' + scrollPosition + 'px, 0)',
                    'transform'       : 'translate3d(0, ' + scrollPosition + 'px, 0)',
                });
                // if transform3d isn't available, use top over background-position
                //$('#element').css('top', Math.ceil(n/2) + 'px');
            });
	    }
	}

Responsive Full Size Image/Background Parallax Effect JQueryPlugin
------------------------------------------------------------------
A parallax effect plugin that can ensure the background size covers the whole container without causing any white space around and it is also responsive for any devices.

A [Pen](https://codepen.io/jksakura/pen/WEjYON) by [Jake Zhong](https://codepen.io/jksakura) on [CodePen](https://codepen.io).

[License](https://codepen.io/jksakura/pen/WEjYON/license).

Responsive Full Size Image/Background Parallax Effect JQuery Plugin
-------------------------------------------------------------------
A parallax effect plugin that can ensure the background size covers the whole container without causing any white space around and it is also responsive for any devices.

A [Pen](https://codepen.io/jksakura/pen/WEjYON) by [Jake Zhong](https://codepen.io/jksakura) on [CodePen](https://codepen.io).

[License](https://codepen.io/jksakura/pen/WEjYON/license).

<section class="section-container">
    <div class="section-bg parallax-object" style="background-image: url('http://www.unsplash.it/1000/800');" data-breakpoint="768" data-resize="false" data-speed="0.5"></div>
</section>
<section class="section-container">
    <div class="module-image section-bg parallax-object" style="background-image: url('http://www.unsplash.it/1200/800');" data-breakpoint="768" data-resize="true" data-speed="0.5"></div>
</section>
<section class="section-container">
    <div class="module-image section-bg parallax-object" style="background-image: url('http://www.unsplash.it/1500/800');" data-breakpoint="768" data-resize="true" data-speed="0.5"></div>
</section>
<section class="section-container">
    <div class="module-image section-bg parallax-object" style="background-image: url('http://www.unsplash.it/1000/600');" data-breakpoint="768" data-resize="true" data-speed="0.5"></div>
</section>