問題描述
我發現并正在嘗試使用一個名為 stellar.js 的插件.主要是為網站創建視差效果，但是，我不追求這種效果——我追求的是它提供的另一種效果:
I have found, and am trying to use, a plugin called stellar.js. Primarily it is for creating a parallax effect for websites, but, I am not after this effect - I am after the other effect it offers:
Stellar.js 最強大的功能是它對齊元素的方式.
Stellar.js' most powerful feature is the way it aligns elements.
所有元素都將返回到它們的原始位置offset parent 與屏幕邊緣相交——加或減你自己的可選偏移量.
All elements will return to their original positioning when their offset parent meets the edge of the screen—plus or minus your own optional offset.
偏移定位示例:http://markdalgleish.com/projects/stellar.js/#show-offsets .當您滾動 div 時，它會捕捉/重新對齊到瀏覽器的邊緣.我正試圖讓它適用于垂直網站.
An example of the offset positioning: http://markdalgleish.com/projects/stellar.js/#show-offsets . When you scroll over a div it snaps/realigns to the edge of the browser. I am trying to get this to work for a vertical website.
由于我對 Javascript 和 jQuery 的新手了解，我運氣不佳.我認為這只是將水平交換為垂直的情況.
I am not having much luck - due to my novice knowledge of Javascript and jQuery. I thought it would just be a case of swapping around the horizontals to verticals.
有沒有人玩過這個插件，或者在類似的場景中使用過它，并得到任何提示?
Has anyone played with this plugin before, or used it for a similar scenario, and got any tips?
包含所有代碼的 jsFiddle:http://jsfiddle.net/2SH2T/
The jsFiddle with all the code: http://jsfiddle.net/2SH2T/
以及 Javascript 代碼:
And the Javascript code:
var STELLARJS = {
init: function() {
var self = this;
$(function(){
self.$sections = $('div.section').each(function(index){
$(this).data('sectionIndex', index);
});
self.highlightSyntax();
self.handleEvents();
self.debugOffsets.init();
self.debugOffsetParents.init();
self.initParallax();
});
},
initParallax: function() {
var isHomePage = $('body').hasClass('home'),
$main = $('div.main');
if (isHomePage) {
$main.height($main.height() + $(window).height() - 1000);
}
if ($.browser.msie) {
$('body').removeAttr('data-stellar-background-ratio').append('<div class="ie-bg" />');
}
$(window).stellar({
horizontalOffset: !isHomePage,
verticalScrolling: 40
});
},
highlightSyntax: function() {
$('pre').addClass('prettyprint');
if (window.prettyPrint !== undefined) prettyPrint();
},
handleEvents: function() {
var self = this,
//Debounce function from Underscore.js
debounce = function(func, wait) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
func.apply(context, args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
}
},
handleScroll = function() {
var scrollTop = $(window).scrollTop(),
sectionIndex = Math.round((scrollTop - 40) / self.$sections.first().outerHeight()),
$activeSection = self.$sections.eq(sectionIndex);
if ($activeSection.length === 0) {
$activeSection = self.$sections.last();
}
if ($activeSection.length === 0) return;
$(window).unbind('scroll.stellarsite');
if (scrollLeft === 0) {
$(window).unbind('scroll.stellarsite').bind('scroll.stellarsite', debounce(handleScroll, 500));
} else {
$('html,body').animate({
scrollLeft: $activeSection.offset().left - 40
}, 600, 'easeInOutExpo', function() {
setTimeout(function(){
$(window).unbind('scroll.stellarsite').bind('scroll.stellarsite', debounce(handleScroll, 500));
}, 10);
});
}
$(window).bind('mousewheel', function(){
$('html,body').stop(true, true);
});
$(document).bind('keydown', function(e){
var key = e.which;
if (key === 37 || key === 39) {
$('html,body').stop(true, true);
}
});
};
if (window.location.href.indexOf('#show-offset-parents-default') === -1) {
$(window).bind('scroll.stellarsite', debounce(handleScroll, 500));
}
},
debugOffsets: {
init: function() {
this.$debug = $('#debugOffsets');
if (window.location.href.indexOf('#show-offsets') > -1) {
this.show();
}
},
show: function() {
this.$debug.fadeIn();
$('body').addClass('debugOffsets');
$('h2').append('<div class="debug-h2-label">Offset Parent (All parallax elements align when this meets the offsets)</div>');
},
hide: function() {
this.debug.fadeOut;
$('body').removeClass('debugOffsets');
}
},
debugOffsetParents: {
init: function() {
this.$debug = $('#debugOffsets');
if (window.location.href.indexOf('#show-offset-parents-default') > -1) {
this.removeOffsetParents();
}
if (window.location.href.indexOf('#show-offset-parents') > -1) {
this.show();
}
},
show: function() {
this.$debug.fadeIn();
$('body').addClass('debugOffsetParents');
$('h2').append('<div class="debug-h2-label">New Offset Parent (All parallax elements align when this meets the offsets)</div>');
$('h2').each(function(){
$(this).find('div.constellation:last').append('<div class="debug-constellation-label">Default Offset Parents</div>');
});
$('body').addClass('debug');
},
removeOffsetParents: function() {
$('body').addClass('debugOffsetParentsDefault');
$('h2[data-stellar-offset-parent]').removeAttr('data-stellar-offset-parent');
}
}
};
STELLARJS.init();
推薦答案
我修改了原代碼，得到了和stellarjs.com一樣的效果.相反，它是垂直的:)
I modified the original code and came up with exact effect like in stellarjs.com. Instead it's vertical :)
看看:http://jsfiddle.net/E4uVD/38/
這篇關于stellar.js - 為垂直滾動網站配置偏移量/對齊元素?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！