向下滚动时将div移出屏幕(顶部)
向下滚动时将div移出屏幕(顶部)
提问于 2017-02-09 07:28:26
我想创建一个效果，就像这个站点的标题：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);
})*/回答 1
Stack Overflow用户
发布于 2017-02-09 07:57:03
类似这样的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;对于非常简单的上下移动，我选择了一个关键帧，因为我注意到有微妙的反弹效果。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42130645
复制相关文章
相似问题
Kotlin -在map中成功存储错误类型的泛型函数
Kotlin中的密封类，不兼容类型错误无法返回父类型
kotlin中的javaClass返回意外类型
kotlin有返回迭代器的map函数吗？
错误Kotlin类型推断失败预期类型不匹配Map<MessageDestination，List<MessageSender>>被期望
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
