用css创建滚动动画
creating scroll animation with css
我试图创建一个标题菜单,当我向下滚动它,以参与动画进入一个圆圈,当它向上滚动,它将再次回来。我检查了窗口是顶部,如果不是,然后用javascript动画。但是我的代码不工作。
$header = $('.header__fake');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 20) {
$header.addClass('animated').removeClass('fix');
} else {
$header.removeClass('animated').addClass('fix');
}
});
body {
background: #02021a url("http://i.imgur.com/705GHlC.jpg") no-repeat 0 0;
-webkit-background-size: 100% auto;
background-size: 100% auto;
color: #fff;
font-family: Helvetica Neue, Helvetica, Open sans, Arial, sans-serif;
font-weight:lighter;
letter-spacing:1px;
}
.content {
width: 320px;
position: relative;
margin: 0 auto;
}
.content h2 {
margin: 35px 0 0;
}
.content h1 {
text-align: center;
margin: 1000px 0 200px;
}
.content h1 span {
display: block;
width: 100%;
margin: 5px 0 0;
opacity: .5;
}
.content .header__fake {
position: fixed;
top: 15px;
left: 50%;
margin-left: -160px;
width: 320px;
}
.content .header__fake i {
display: block;
}
.content .header__fake .btm__border {
height: 1px;
background: #fff;
position: absolute;
bottom: 6px;
left: 0;
right: 0;
-webkit-transition: left 0.5s;
transition: left 0.5s;
}
.content .header__fake .icn__wrap {
cursor: pointer;
float: right;
width: 58px;
position: relative;
height: 58px;
margin-right: -20px;
}
.content .header__fake .icn__wrap .icn__hamburger {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-6px);
-ms-transform: translateX(-50%) translateY(-6px);
transform: translateX(-50%) translateY(-6px);
display: block;
width: 18px;
height: 1px;
z-index: 999;
background: #fff;
}
.content .header__fake .icn__wrap .icn__hamburger:after,
.content .header__fake .icn__wrap .icn__hamburger:before {
content: "";
float: left;
display: block;
width: 100%;
height: 1px;
background: #fff;
margin: 5px 0 0;
}
.content .header__fake .icn__wrap .icn__hamburger:before {
margin: 6px 0 0;
}
.content .header__fake .icn__wrap svg {
z-index: 10;
}
.content .header__fake .icn__wrap svg circle {
fill: none;
stroke: #fff;
stroke-width: .5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 39 39;
stroke-dashoffset: -39;
-webkit-transition: stroke-dashoffset 0.5s;
transition: stroke-dashoffset 0.5s;
}
.content .header__fake.animated .btm__border {
left: 100%;
right: 4px;
}
.content .header__fake.animated svg circle {
stroke-dashoffset: 0;
-webkit-transition: stroke-dashoffset 0.5s;
transition: stroke-dashoffset 0.5s;
}
.content .header__fake.fix .btm__border {
-webkit-animation: fix 0.2s linear;
animation: fix 0.2s linear;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
right: 5px;
}
@-webkit-keyframes fix {
from {
right: 5px;
}
to {
right: 0px;
}
}
@keyframes fix {
from {
right: 5px;
}
to {
right: 0px;
}
}
<div class="content">
<h2>Scroll to see the magic.</h2>
<div class="header__fake">
<div class="icn__wrap">
<i class="icn__hamburger"></i>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="58px" height="58px" viewBox="0 0 16 16" preserveAspectRatio="none">
<circle cx="8" cy="8" r="6.215" transform="rotate(90 8 8)"></circle>
</svg>
</div>
<i class="btm__border"></i>
</div>
<h1>Hmm<span>Now scroll back up.</span></h1>
</div>
我将上面的代码粘贴到JSfiddle中。效果很好。看这里
问题可能与您的jQuery
库初始化有关。
相关文章:
- jQuery Lazy加载动画滚动
- 只在滚动时播放循环css动画-滚动停止时停止
- 使用动画滚动到
- 在用户用动画滚动175像素后缩小固定的Div
- 动画滚动100%(水平)
- 动画滚动脚本可防止从外部链接访问本地锚点位置
- Jquery 动画滚动事件
- 动画滚动
- 修复了元素动画滚动主体在顶部
- 向上/向下页面事件上的动画滚动
- 滚动到顶部并动画滚动到 #page 链接冲突
- 动画滚动无法使用完整的“外部”链接
- 使用动画滚动和另一个 ahref 函数
- ngRoute与动画滚动冲突
- 动画滚动jquery不工作
- 为什么jQuery必须接收两个对象:body&html时使用动画滚动整个页面
- 动画滚动到顶部2
- jQuery-如何动画滚动到元素并在顶部添加100px
- Jquery/Javascript不透明度动画滚动
- 动画滚动/显示隐藏元素使用jQuery