基于jQuery和GSAP的图片背景视觉差特效插件 jQuery parallax background plugin based on GSAP

jQuery之家 返回下载页

Parallax background

Installation

  • Include JS
    		                          
		                              <script src="jquery.min.js"></script>
		                              <script src="parallax_background.js"></script>
  • Set HTML
    		                            
		                                <div class="parallax-background">
		                                    <div class="parallax-inner" style="background-image: url('background-image.jpg')">
		                                    </div>
		                                </div>
  • Call the plugin
    		                          
		                              $('.parallax-background').parallaxBackground();

Demo

  • Basic usage 
    		                             
		                                 $('.parallax-demo-1').parallaxBackground();
  • Animation type - rotate 
    		                              
		                                  $('.parallax-demo-2').parallaxBackground({
		                                      animation_type: 'rotate',
		                                      zoom: 50,
		                                      rotate_perspective: 500
		                                  });
  • Event - mouse move 
    		                              
		                                  $('.parallax-demo-3').parallaxBackground({
		                                      event: 'mouse_move',
		                                      animation_type: 'shift',
		                                      animate_duration: 2
		                                  });
  • Event - mouse move with rotate animation 
    		                              
		                                  $('.parallax-demo-4').parallaxBackground({
		                                      event: 'mouse_move',
		                                      animation_type: 'rotate',
		                                      animate_duration: 1,
		                                      zoom: 70,
		                                      rotate_perspective: 1000
		                                  });

  • Alternative background type 

    		                          
		                              $('.parallax-demo-5').parallaxBackground({
		                                  event: 'mouse_move',
		                                  animation_type: 'rotate',
		                                  animate_duration: 1,
		                                  zoom: 70,
		                                  rotate_perspective: 1000
		                              });