如何动画div在页面向下滚动时水平移动？ [英] How to animate a div move horizontally when page is scroll down?

问题描述

HTML

 < div id =horizo​​ntal> 
  

CSS

  #horizo​​natal {
 position：fixed; 
 top：0; 
} 
 
 
 #horizo​​naltal {background-color：red; width：150px; height：150px;} 
 body {height：5000px; width：5000px; } 
  

我该如何做？

解决方案

由于你包含了jQuery标签，我会给你一个基于jQuery的解决方案。首先，让我们为示例设置一些结构：

HTML

 < div class =sample red>< / div> 
< div class =sample green>< / div> 
< div class =sample blue>< / div> 
< br> 
< div class =new> aaa< / div> 
  

这三个示例div是在滚动时动画的div。 新是内容。

CSS

  .sample {
 width：100px ; 
 height：300px; 
 position：fixed; 
 left：-102px; 
 background：red 
} 
 .green {
 background：green; top：30px; 
} 
 .blue {
 background：blue; top：60px; 
} 
 .new {
 margin-top：1000px 
} 
  

这只是确保实际上有一些滚动可能（1000像素高的内容），并设置样本div（固定位置，所有停靠在左边，不同的背景颜色和垂直位置）的样式和位置。

现在，我们可以监听滚动事件并相应地生成动画：

脚本

//取消任何现有的动画
//并为所有样本生成滑出转换
function hideDivs（）{
$（'。sample'）。stop（）。animate（{
left：'-102px'
}，1000）;
}

//在各种滚动位置的各种示例中滑动
//隐藏任何不适合当前位置的示例
function showDivs（）{
hideDivs（）;
var top = $（document）.scrollTop（）;
if（top> = 100&&& top< 300）{
$（'。red'）。stop（）。animate（{
'left'：'0px '
}，1000）;
} else if（top> = 300&&& top< 500）{
$（'。green'）。stop（）。animate（{
'left' '0px'
}，1000）;
} else if（top> = 500）{
$（'。blue'）。stop（）。animate（{
'left'：'0px'
} ，1000）;
}

}

//滚动事件被触发一个LOT
//如果我们$ b $，这将会非常干扰和分心b //每次事件触发时触发动画
//因此在开始动画之前等待一分秒，
//在每个滚动事件上重置计时器以确保
/ /动画直到滚动停止后才开始。
var timer = null;
$（window）.scroll（function（）{
clearTimeout（timer）;
timer = setTimeout（showDivs，300）;
}


这个例子比你所要求的多一点，因为它根据滚动位置。你可以根据需要简化它，你需要做的 - 它应该是相当不言自明的。

这是一个小提琴，如果你想看到它在行动： http://jsfiddle.net/G4t4f/4/

HTML

<div id = "horizontal"></div>

CSS

#horizonatal {
    position:fixed;
    top:0;
} 


#horizonaltal { background-color: red; width: 150px; height:150px;}
body { height: 5000px; width: 5000px; }

How can I do that?

解决方案

Since you included the jQuery tag, I'll give you a jQuery-based solution. First, let's set up some structure for the example:

HTML

<div class="sample red"></div>
<div class="sample green"></div>
<div class="sample blue"></div>
<br>
<div class="new">aaa</div>

The three "sample" divs are the ones that'll animate as we scroll. "new" is the content.

CSS

.sample {
    width:100px;
    height:300px;
    position:fixed;
    left:-102px;
    background:red
}
.green {
    background:green; top: 30px;
}
.blue {
    background:blue; top: 60px;
}
.new {
    margin-top:1000px
}

This just ensures there's actually some scrolling possible (1000px-high content) and sets up the styles and positions for the sample divs (fixed positions, all docked to the left, different background colors and vertical positions).

Now, we can listen for the scroll event and animate accordingly:

Script

// cancels any existing animations 
// and animates the "slide out" transition for all samples
function hideDivs() {
    $('.sample').stop().animate({
        left: '-102px'
    }, 1000);
}

// slides in various samples for various scroll positions
// hides any that aren't appropriate for the current position
function showDivs() {
    hideDivs();
    var top = $(document).scrollTop();
    if ( top >= 100 && top < 300 ) {
        $('.red').stop().animate({
            'left': '0px'
        }, 1000);
    } else if (top >= 300 && top < 500) {
        $('.green').stop().animate({
            'left': '0px'
        }, 1000);
    } else if (top >= 500) {
        $('.blue').stop().animate({
            'left': '0px'
        }, 1000);
    } 

}

// scroll events get fired a LOT
// this will end up being very jerky and distracting if we 
// trigger the animation every time the event fires
// So wait for a split-second before starting the animations,
// resetting the timer on each scroll event to ensure that
// the animation doesn't start until the scrolling has stopped.
var timer = null;
$(window).scroll(function () {
  clearTimeout(timer);
  timer = setTimeout(showDivs, 300);
});

This example does a bit more than what you asked for, in that it animates three separate overlays depending on the scroll position. You can simplify it as-needed for what you need to do - it should be fairly self-explanatory.

Here's a fiddle if you'd like to see it in action: http://jsfiddle.net/G4t4f/4/

这篇关于如何动画div在页面向下滚动时水平移动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！