我正在使用GSAP来制作动画,当用户滚动鼠标滚轮时我需要滚动动画。现在动画正在加载页面。我需要内容应该在滚动上动画。前两篇文章正在发挥作用,但是当我滚动它时,动画不起作用。
(function() {
var content = document.getElementById("content");
var xScroll = 0; // initialize
function scrollHorizontally(e) {
xScroll = xScroll+e.deltaY*20;
// set limits to avoid overshooting and stucking at beginning or end
var max = document.getElementById("content").innerWidth;
if (xScroll <= 0) {
xScroll = 0;
} else if (xScroll >= max) {
xScroll = max; //replace with the width of the scrollable container
}
// scroll smooth to xScroll
TweenLite.to(content, 1, { ease: Power1.easeOut, scrollTo:{x:xScroll} });
var rt = ($(window).width() - ($(".active_05").offset().left ));
if(rt>200)
{
$(".about_menu").addClass("active");
}
else
{
$(".about_menu").removeClass("active");
}
e.preventDefault();
}
if (content.addEventListener) {
// Standard
content.addEventListener("wheel", scrollHorizontally, false);
} else {
// IE 6/7/8
content.attachEvent("onmousewheel", scrollHorizontally);
}
var article_1=document.getElementById("article_1");
TweenLite.from(article_1, .5, { ease: Power0.easeOut, y: 10 });
var article_2=document.getElementById("article_2");
TweenLite.from(article_2, .5, { ease: Power0.easeOut, y: 10 });
var article_3=document.getElementById("article_3");
TweenLite.from(article_3, .5, { ease: Power0.easeOut, y: 15 });
var article_3=document.getElementById("article_4");
TweenLite.from(article_3, .5, { ease: Power0.easeOut, y: 15 });
var article_3=document.getElementById("article_5");
TweenLite.from(article_3, .5, { ease: Power0.easeOut, y: 15 });
})();
&#13;
#content {
position:fixed;
display: inline-block;
overflow-x: scroll;
width: 100%;
overflow-y: hidden;
top: 0;
right:0;
height: 100%;
}
#content #horizontal_scroll{
overflow: hidden;
width:400%;/*to increase the width */
}
#horizontal_scroll .full_screen_100
{
height: 100%;
background-color: #fff;
display: flex;
}
#horizontal_scroll .full_screen_100 article{
width: 900px;
height: 100%;
float:left;
border-left: solid 1px #E2E2E2;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/plugins/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenLite.min.js"></script>
<div id="content">
<div id="horizontal_scroll" id="scroll_container">
<div class="full_screen_100">
<article>
<p id="article_1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</article>
<article>
<p id="article_2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
<p id="article_3">consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<article>
<p id="article_4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
<p id="article_5">consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</div>
</div>
</div>
&#13;