$(document).ready(function(){
$('#section-customer').waypoint({
handler: function(direction) {
$('#well-1').addClass('active');
// $('#well-2').addClass('active');
// $('#well-3').addClass('active');
// $('#well-4').addClass('active');
// $('#well-5').addClass('active');
setTimeout(function(){
$('#well-2').addClass('active');
},510);
setTimeout(function(){
$('#well-3').addClass('active');
},1010);
setTimeout(function(){
$('#well-4').addClass('active');
},1510);
setTimeout(function(){
$('#well-5').addClass('active');
},2010);
},
offset: '0'
});
$('#section-location').waypoint({
handler: function(direction) {
$('#well-section-location-1').addClass('animated fadeIn opacity-1');
$('#well-section-location-2').addClass('animated fadeIn delay-1s');
$('#well-section-location-3').addClass('animated fadeIn delay-2s');
$('#well-section-location-4').addClass('animated fadeIn delay-3s');
},
offset: '75%'
});
$('#section-easy-introduction').waypoint({
handler: function(direction) {
$('#well-section-easy-introduction-1').addClass('animated fadeInDown opacity-1');
$('#well-section-easy-introduction-2').addClass('animated fadeInDown delay-1s');
$('#well-section-easy-introduction-3').addClass('animated fadeInDown delay-2s');
},
offset: '75%'
});
$('#section-easy-setting').waypoint({
handler: function(direction) {
$('#well-section-easy-setting-1').addClass('animated fadeInUp opacity-1');
$('#well-section-easy-setting-2').addClass('animated fadeInUp delay-1s');
$('#well-section-easy-setting-3').addClass('animated fadeInUp delay-2s');
$('#img-lg-section-easy-setting').addClass('animated fadeInUp delay-3s');
},
offset: '85%'
});
$('#section-license').waypoint({
handler: function(direction) {
$('#well-section-license-1').addClass('animated fadeInDown opacity-1');
$('#well-section-license-2').addClass('animated fadeInDown delay-1s');
},
offset: '85%'
});
});
//----------------------------------------------
.opacity-0 {
@include opacity (0);
}
//----------------------------------------------
.opacity-1 {
@include opacity (1);
}
<section id="section-license" class="bg-gray section-license img-laptop-and-paper">
<div class="container">
<h3 class="title-section title-border-bottom-orange">
50社・8,000ライセンスを超える導入実績!
</h3>
<div class="row row-20-lg">
<div class="col-sm-6">
<div id="well-section-license-1" class="well well-blank opacity-0" data-mh="well">
<img src="img/logo-tmj.png" alt="TMJ" class="logo center-block img-responsive"/>
<p class="lead">
株式会社TMJ 様
<small>
BPOベンダ
</small>
</p>
<h4 class="title-orange title-xs">
対象
</h4>
コンタクトセンター業務
<h4 class="title-orange title-xs">
解決策と導入効果
</h4>
<ul class="list-disc-orange-lg">
<li>
アノテーションの自動表示で入力ミスに対する注意喚起を徹底
</li>
<li>
人的要因によるミス発生率を半分以下に減少(前年同期比)
</li>
</ul>
<div class="container-btn">
<a href="#" class="btn btn-text-with-arrow-right-gray">
詳しくはこちら
</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div id="well-section-license-2" class="well well-blank opacity-0" data-mh="well">
<img src="img/logo-hitachi.png" alt="日立金属商事株式会社" width="250" class="logo center-block img-responsive"/>
<p class="lead">
日立金属商事株式会社 様
<small>
商社系
</small>
</p>
<h4 class="title-orange title-xs">
対象
</h4>
販売管理システム
<h4 class="title-orange title-xs">
解決策と導入効果
</h4>
<ul class="list-disc-orange-lg">
<li>
複雑化していたマニュアルをシンプルなアノテーションに置き換え
</li>
<li>
RPA導入後に残った20分/件の入力作業を7分/件まで短縮
</li>
</ul>
<div class="container-btn">
<a href="#" class="btn btn-text-with-arrow-right-gray">
詳しくはこちら
</a>
</div>
</div>
</div>
</div>
</div>
</section>
https://github.com/daneden/animate.css
https://github.com/imakewebthings/waypoints/blob/master/licenses.txt