javascript - 向下滚动时使 div 移出屏幕(顶部)

Question

我想创建一个类似本网站标题的效果:Tigre Blanc我的代码是这样的:

<div id="header">                                 
        <center><div class="menubutton" onclick="openNav()"><img src="assets/images/openmenu.png" style="width:6%"></div></center>                    
    </div>

我不知道哪个函数可以让它像这样移出屏幕。我猜是那种让它开始的 js 代码，但无法弄清楚要使用的动画。

Js:

$(window).scroll(function(){
$(".header").css("opacity", 1 - $(window).scrollTop() / 250);
});

/*win.scroll(function(){
scrollPosition = win.scrollTop();
scrollRatio = 1 - scrollPosition / 300;
$(".header").css("opacity", scrollRatio);
*/

/*$(window).scroll(function(){
var scrollVar = $(window).scrollTop();
$('.header').css("opacity", 1 - scrollVar/300);
})*/

Answer 1

像这样的东西 fiddle ？

HTML

<div class="a"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

CSS

.a{
  width:20%;
  height:20%;
  background:#000;

;
}

.b{
  animation-name: example;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;    
}

@keyframes example {
    0%   {transform: translateY(0%);}
    95%  {transform: translateY(-110%);}
    100% {transform: translateY(-120%);}
}

JS

$('.a').click(function(){
  $('.a').toggleClass('b');
});

你可以简单地使用类似

的东西

transform: translateY(n);

像这样的过渡

transition: all 1.5s ease;

对于非常简单的上下运动，我选择了关键帧，因为我注意到有细微的弹跳效果。