Horizontal mouse parallax

http://sa cre dsf.f in als ite.c om/
At the bottom, with the city reconstruction…Look at the code in “inspect element”. I’m trying to the center point of this plugin in the middle, instead of on the left like it is. Basically, I want to be able to have my mouse on the left, and on the right, and different parts of this city show.

$('.parallax-1').mouseParallax({ moveFactor: 25 });
$('.parallax-2').mouseParallax({ moveFactor: 25 });
$('.parallax-3').mouseParallax({ moveFactor: 25 });
$('.parallax-4a').mouseParallax({ moveFactor: 25 });
$('.parallax-4b').mouseParallax({ moveFactor: 25 });
$('.parallax-5').mouseParallax({ moveFactor: 25 });
$('.parallax-6').mouseParallax({ moveFactor: 25 });

Then the plugin which I’ve modified some…

/*
Mouse Parallax
==============
A simple jQuery plugin to allow given elements to be used as backgrounds that respond to mouse movement.  Could easily be further extended or modified.
--------------
Author: "Pip Beard Design," Benjamin Alan Robinson
LICENSE: The MIT License (MIT)
*/

(function ( $ ) {
  $.fn.extend({
  
    mouseParallax: function(options) {
    
      var defaults = { moveFactor: 5, zIndexValue: "1", targetContainer: 'body' };
    
      var options = $.extend(defaults, options);
    
      return this.each(function() {
        var o = options;
        var background = $(this);
        
        $(o.targetContainer).on('mousemove', function(e){
        
          mouseX = e.pageX;
          
          windowWidth = $(window).width();
          windowHeight = $(window).height();
          
          percentX = ((mouseX/windowWidth)*o.moveFactor) - (o.moveFactor/2);
  
          leftString = (0-percentX-o.moveFactor)+"%";
          rightString = (0-percentX-o.moveFactor)+"%";
  
          background[0].style.left = leftString;
          background[0].style.right = rightString;
          if(o.zIndexValue) { 
            background[0].style.zIndex = o.zIndexValue;
          }
        });
      });
    }         
  });
} (jQuery) );

Can anyone understand what I’m after, and help me? This is driving me crazy.

Thanks @fretburner . Solved. Modified the moveFactor (staggered values).

So have to ask. What framework are you using for this site?

D

No framework :slight_smile: .Too restrictive for our needs.

Ryan have you noticed the bug with the menu at small widths? It keeps disappearing and is even worse when you scroll after opening the menu.

Please ignore if this is a work in progress :slight_smile:

2 Likes

Work in progress :slight_smile: . Thank you though; I did not notice that (although this would have been caught in QA - at least this is caught early so I can fix it! Thanks).

Ok, should be fixed (assuming I saw the same bug as you). The desktop animation was applying to the cloned off canvas menu. Only applied it to the desktop version. Thanks again!

Yes seems to be fixed now :smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.