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;

对于非常简单的上下移动，我选择了一个关键帧，因为我注意到有微妙的反弹效果。

向下滚动屏幕（顶部）上的div移动

1 个答案: