1
我有一个关于这个代码的问题:CSS滑块:触发动画使用JavaScript(使用GreenSock)
codepen.io/ettrics/pen/WvoRQo
我试图动画里面的内容滑块与绿色环保(tweenmax)使用JavaScript。
我如何实现这一目标?
谢谢你的努力!
我有一个关于这个代码的问题:CSS滑块:触发动画使用JavaScript(使用GreenSock)
codepen.io/ettrics/pen/WvoRQo
我试图动画里面的内容滑块与绿色环保(tweenmax)使用JavaScript。
我如何实现这一目标?
谢谢你的努力!
样品动画与JavaScript在这里。
的Html
<div id="overlay">
<a id="close"> close </a>
<h1>This is overlay content</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
<div class="content">
<a id="open"> open </a>
<h2>This is page content</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
的CSS
* {
margin: 0;
padding: 0;
}
#overlay {
width: 100%;
height: 100%;
color: #fff;
position: fixed;
transform: translateY(-100%);
background-color: rgba(20,20,20,0.9);
}
#open {
cursor: pointer;
display: inline-block;
width: 40px;
height: 40px;
background-color: #ea5;
}
#close {
cursor: pointer;
display: inline-block;
width: 40px;
height: 40px;
background: #43e;
}
jQuery的
//since there's a -100% translateY in the CSS, this just tells GSAP how things should be assigned between regular "y" and yPercent...
TweenLite.set(overlay, {y:0, yPercent:-100});
$('#open').on('click',
function() {
TweenMax.to(overlay, 0.8, {
yPercent: 0
});
});
$('#close').on('click',
function() {
TweenMax.to(overlay, 0.8, {
yPercent: -100
});
});
你问社会了解和调试这里一吨的代码。请更具体地问你。 –