Javascript 文本视差不工作
我使用jquery.parallax-1.1.3.js实现视差效果。地点: 问题:它适用于css背景位置。这适用于背景图像,但不适用于我的html中的文本 我想要的是:在这个js文件中添加一些代码,允许我在html文本H1、H2上使用视差效果。我更喜欢ID,所以H1周围会有一个div,ID和视差效果有关 这是js:Javascript 文本视差不工作,javascript,html,css,parallax,Javascript,Html,Css,Parallax,我使用jquery.parallax-1.1.3.js实现视差效果。地点: 问题:它适用于css背景位置。这适用于背景图像,但不适用于我的html中的文本 我想要的是:在这个js文件中添加一些代码,允许我在html文本H1、H2上使用视差效果。我更喜欢ID,所以H1周围会有一个div,ID和视差效果有关 这是js: (function( $ ){ var $window = $(window); var windowHeight = $window.height(); $win
(function( $ ){
var $window = $(window);
var windowHeight = $window.height();
$window.resize(function () {
windowHeight = $window.height();
});
$.fn.parallax = function(xpos, speedFactor, outerHeight) {
var $this = $(this);
var getHeight;
var firstTop;
var paddingTop = 0;
//get the starting position of each element to have parallax applied to it
$this.each(function(){
firstTop = $this.offset().top;
});
if (outerHeight) {
getHeight = function(jqo) {
return jqo.outerHeight(true);
};
} else {
getHeight = function(jqo) {
return jqo.height();
};
}
// setup defaults if arguments aren't specified
if (arguments.length < 1 || xpos === null) xpos = "50%";
if (arguments.length < 2 || speedFactor === null) speedFactor = 0.1;
if (arguments.length < 3 || outerHeight === null) outerHeight = true;
// function to be called whenever the window is scrolled or resized
function update(){
var pos = $window.scrollTop();
$this.each(function(){
var $element = $(this);
var top = $element.offset().top;
var height = getHeight($element);
// Check if totally above or totally below viewport
if (top + height < pos || top > pos + windowHeight) {
return;
}
$this.css('backgroundPosition', xpos + " " + Math.round((firstTop - pos) * speedFactor) + "px");
});
}
$window.bind('scroll', update).resize(update);
update();
};
})(jQuery);
以下是如何从html调用js:
<script type="text/javascript" src="js/jquery.parallax-1.1.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//.parallax(xPosition, speedFactor, outerHeight) options:
//xPosition - Horizontal position of the element
//inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
//outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
$('#third').parallax("50%", 0.5);
})
</script>
给一个div一个ID,给这个div一个背景图像。将ID连接到上面的视差效果。我想做同样的事情,但是用H1