私は水平視差スクロールのウェブサイトを作っています。不透明度を変更しながら勾配(div 100vw, 300vh
)を上下に動かすことで、夜明けから夜間に環境効果を得ることを私の目的としています。特定のdivがビューポートに来たときにjavascriptが目的のアクションをトリガーするようにしたい。ウェイポイントでaddClassとremoveClassトリガーを受信
jquery、Waypoints、jInvertScrollを使用しています。
私は、コンソールからこれを取得:
<div class="dawndusk"></div>
すべてが始まりです。 <div class="dawndusk lettherebenight"></div>
#dawn
にスクロールすると他のdivにスクロールしても何も変わりません。どうして?
これは、これは私のCSS
.dawndusk {
z-index:750;
opacity: .9;
background: #4B79A1;
background: -webkit-linear-gradient(to top, #f6d365 0%, #fda085 50%, #283E51 50%, #0A2342 100%);
background: -olinear-gradient(to top, #f6d365 0%, #fda085 50%, #283E51 50%, #0A2342 100%);
background: linear-gradient(to top, #f6d365 0%, #fda085 30%, #283E51 60%, #0A2342 100%);
width:100vw;
height:300vh;
position:fixed;
}
#birth,
#dawn,
#day,
#dusk,
#night {
position: absolute;
top:0;
}
#birth {
left:0;
}
#dawn {
left:100vw;
}
#day {
left:200vw;
}
#dusk {
left:300vw;
}
#night {
left:400vw;
}
.lettherebebirth,
.lettherebedawn,
.lettherebeday,
.lettherebedusk,
.lettherebenight {
transition: all 4s;
-webkit-transition: all 4s;
}
.lettherebebirth {
opacity: .9;
transform: translateY(0);
}
.lettherebedawn {
opacity: .2;
transform: translateY(-200vh);
}
.lettherebeday {
opacity: 0;
transform: translateY(0);
}
.lettherebedusk {
opacity: .5;
transform: translateY(-200vh);
}
.lettherebenight {
opacity: .8;
transform: translateY(-200vh);
}
Javascriptがこのようです私のHTML
<div class="dawndusk"></div>
<div class="flex" id="birth">
...content...
</div>
<div class="flex" id="dawn">
...content...
</div>
<div class="flex" id="day">
...content...
</div>
<div class="flex" id="dusk">
...content...
</div>
<div class="flex" id="night">
...content...
</div>
です:
私が欲しかったクラスはオンとオフをトリガするために取得するにはどうすればよい$('#birth').waypoint(function(direction) {
if (direction === 'up') {
$('.dawndusk').removeClass('lettherebedawn');
$('.dawndusk').addClass('lettherebebirth');
}
});
$('#dawn').waypoint(function(direction) {
if (direction === 'down') {
$('.dawndusk').removeClass('lettherebebirth');
$('.dawndusk').addClass('lettherebedawn');
}
});
$('#day').waypoint(function(direction) {
if (direction === 'down') {
$('.dawndusk').removeClass('lettherebedawn');
$('.dawndusk').addClass('lettherebeday');
}
});
$('#dusk').waypoint(function(direction) {
if (direction === 'down') {
$('.dawndusk').removeClass('lettherebeday');
$('.dawndusk').addClass('lettherebedusk');
}
});
$('#night').waypoint(function(direction) {
if (direction === 'down') {
$('.dawndusk').removeClass('lettherebedusk');
$('.dawndusk').addClass('lettherebenight');
}
});
私がしたいとき?