Question

我想知道如何在这个wordpress主题上创建一个视差谷歌地图效果（滚动到底部）

http://themeforest.net/item/3clicks-responsive-multipurpose-wordpress-theme/full_screen_preview/5092225

我尝试使用一些不同的视差jquery脚本和javascripts，但似乎无法获得相同的效果。

Answer 1

仅对地图的效果并不难实现。观察窗口的scroll - 事件并使用地图的panBy - 方法来获得效果。

简单实施：http://jsfiddle.net/doktormolle/dXqhn/

Answer 2

你提供的链接对我来说似乎不是一个视差，但不管怎样，我用Jquery scrollTop（）方法制作了一个简短的小提琴，展示了它是如何实现的，记住它有点儿马车，但也许我们可以找到基于它的更好的解决方法。

以下是Dr.Molle的回答：http://jsfiddle.net/xsz32sy9/

这是Jquery代码：

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)'});
});

Answer 3

看起来该页面采用了谷歌地图，确保地图图层比其显示的空间大，然后在用户滚动时将上边距从0px修改为-150px。

缩放控件位于单独的固定位置div中，以便在背景移动时保持原位。

谷歌地图视差效应

3 个答案: