Google Map Parallax Effect

3 comments

1. The effect only for a map is not hard to achieve. Observe the scroll-event of the window and use the panBy-method of the map to get the effect.

   Simple implementation: http://jsfiddle.net/doktormolle/dXqhn/

   Log in to Reply

2. The link you provided didn’t seem like a parallax to me, but either way, I made a short fiddle using Jquery scrollTop() method showing how it can be achieved, mind it’s a bit buggy, but maybe we could find a better workaround based on it.

   Here is the fiddle forked from Dr.Molle’s answer: http://jsfiddle.net/xsz32sy9/

   And here is the Jquery code:

   var map;
   function initialize() {
     var mapOptions = {
       zoom: 14,
       center: new google.maps.LatLng(52.5498783, 13.425209099999961),
       mapTypeId: google.maps.MapTypeId.ROADMAP,
     };
     map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
     new google.maps.Marker({map:map,position:map.getCenter()});
   }
   google.maps.event.addDomListener(window, 'load', initialize);
   $(window).scroll(function(){
       //THE HEIGHT, PLUS THE MARGIN OR PADDING IT NEEDS TO BE FULLY COVERED
       if($(window).scrollTop() < $('#map_canvas').height() + 21) 
           $('#map_canvas').css({'transform':'translate(0px,'+$(window).scrollTop()+'px)'});
   });
   

   Log in to Reply

3. It looks like the page takes it’s google maps, makes sure that the map layer is larger then the space it displays in, and then modifies the top margin from 0px to -150px as the user scrolls over it.

   The zoom controls are in a separate fixed position div so that they stay in place as the background moves.

   Log in to Reply