2
私は自分のWebページでfullPage jsプラグインを使用しています。最初の2つのセクションにアニメーションを追加しました。ユーザーが他のセクションにスクロールすると、そのセクションの実際の色に徐々に色が移行し、他のセクションではその逆になります。ここでアニメーションを見ることができます：https://rimildeyjsr.github.io/spotify-circle-animation/フルページjsを使用して別のセクションにスクロールするたびに色とアニメーションを変更
初めてアニメーションが正常に機能するのは、初めて動作した後です。私はセクションを去るときにonLeaveコールを使用してスクリプトを起動し、セクション2に変更するときに初めてアニメーションを起動するようにonLoadを実行しています。私はサイトを離れるたびにアニメーションとカラートランジションが必要です。
誰でもお手伝いできますか？前もって感謝します。
HTML
<div id="fullpage" style="-webkit-transform: translate3d(0px, 0px, 0px);">
<div class="section" id="section1">
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li ><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
<div class="main-heading">
<span id="main-heading"></span>
</div>
<span id="welcome-msg" class="come-in">Welcome to my website</span>
</div>
<div class="section" id="section2">
<h1>I'm Prateek</h1>
<h3>Independent Android Developer <br> & Design Consultant</h3>
<p>I have been working on Android since the past<br> 3 years.
I am a tech enthusiast and I like solving<br> problems which affect people’s lives, using<br>
my skills. In my free time I blog about my,<br> learnings or design beautiful things.<br>
Scroll along to check out my work. </p>
</div>
</div>
CSS：
.colors {
animation: color-animation 2s linear alternate;
}
@keyframes color-animation {
0% {
background: rgb(35,204,223);
}
10%{
background: rgb(35,187,209);
}
20%{
background: rgb(34,170,196);
}
30%{
background: rgb(34,153,182);
}
40%{
background: rgb(33,136,168);
}
50%{
background: rgb(33,118,155);
}
60%{
background: rgb(32,101,141);
}
70%{
background: rgb(32,84,127);
}
80%{
background: rgb(31,67,114);
}
100%{
background: rgb(31,50,100);
}
}
.colors-reverse {
animation: colors-reverse-animation 2s linear alternate;
}
@keyframes colors-reverse-animation {
0% {
background: rgb(31,50,100);
}
10%{
background: rgb(31,67,114);
}
20%{
background: rgb(32,84,127);
}
30%{
background: rgb(32,101,141);
}
40%{
background: rgb(33,118,155);
}
50%{
background: rgb(33,136,168);
}
60%{
background: rgb(34,153,182);
}
70%{
background: rgb(34,170,196);
}
80%{
background: rgb(35,187,209);
}
100%{
background: rgb(35,204,223);
}
}
はJQuery：
(document).ready(function(){
$('#fullpage').fullpage({
anchors: ['home','about','projects','blog','contact'],
fixedElements: '#toggle,#overlay',
afterLoad : function(anchorLink,index) {
if(index == 1 || anchorLink == 'home'){
}
else if(index == 2 || anchorLink == 'about'){
$('#section2').addClass('colors').one(animationEnd,function() {
$('#section2').css('background','#1f3264');
});
$('#section2 h1').addClass('come-in').one(animationEnd,function(){
$('#section2 h3').addClass('come-in').one(animationEnd,function(){
$('#section2 p').addClass('come-in');
});
});
}
else if (index == 5 || anchorLink == 'contact') {
$('.left').addClass('animateRightSlide');
$('.right-large').addClass('animateLeftSlide');
}
},
onLeave: function(index, nextIndex, direction) {
if (index == 1 && direction == 'down') {
$('#section2').addClass('colors').one(animationEnd,function() {
$('#section2').css('background','#1f3264');
});
}
else if (index == 2 && direction == 'up') {
$('#section1').addClass('colors-reverse').one(animationEnd,function() {
$('#section1').css('background','#24ccdf');
});
}
}
});
});