head
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/path/to/jquery.waypoints.min.js"></script>
<script src="/path/to/init.js"></script>
jQuery
function animationJS(){
var $parent = $('.js-switch'); //js-switchのクラス名があれば処置を開始
init();
function init(){
JScount();
}
function waypoint($target){
$target.waypoint(function(){
$target.addClass('shown'); //ターゲットにクラス名shownをつける
$target.find('.txt_set').each(function(i) { //ターゲットの内部にクラス名txt_setを探して、あったら以下の処理を開始
$(this).delay(80*i).queue(function(){ //txt_setに0.08秒ずらしてクラス名onをつける
$(this).addClass("on");
});
});
}, {
offset: '80%' //画面の上から８０％の位置にターゲットがきたら上のクラス名をつける処理を開始
});
}
function JScount(){
$parent.each(function(){ //$parent = js-switch。クラス名js-switchがあるごとに以下の処理を繰り返す
var $this = $(this);
var $target = $this.find('.number_eff, .ttl_eff, .list_eff' ); //js-switchの内側に、この３つのクラス名を探してターゲットにする
var len = $target.length; //ターゲットの数をカウント
for (var i = 0; i <= len; i++) { //ターゲットの数だけ以下の処理を行う
waypoint( $target.eq(i) );
}
});
}
}
$(window).on('load',animationJS); //すべてを読み込んだらanimationJSという名前の処理を開始
CSS
【タイトル部分】
//アニメーション前
.txt_set{
display: inline-block;
opacity: 0;
-webkit-filter: blur(3px);
filter: blur(3px);
-webkit-transform: scale(3);
transform: scale(3);
}
//アニメーション開始
.txt_set.on{
-webkit-filter: blur(3px);
filter: blur(3px);
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.5s ease() 0.2s;
transition: all 0.5s ease() 0.2s;
}
【数字部分】
//アニメーション前
.fade-in-up03{ //数字の０
display: inline-block;
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
.fade-in-up04{ //数字の２
display: inline-block;
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
//アニメーション開始
.shown .fade-in-up03 {
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.shown .fade-in-up04 {
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition-delay: .3s;
transition-delay: .3s;
}
【グレーのボックス部分】
//アニメーション前
.box_cover{
width: 100%;
height: 100%;
position: absolute;
left: 2em;
top: 0;
display: block;
background-color: #ddd;
}
//アニメーション開始
.shown .box_cover {
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.7s;
transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.7s;
}
HTML
<div class="demo js-switch"> //js-switchあれば処理を開始
<div class="demo_inner">
<div class="demo_wrap02">
<div class="img_box">
<img src="./images/gorilla02.jpg" alt="">
<div class="deco02 number_eff"><span class="fade-in-up03">0</span><span class="fade-in-up04">2</span></div>
</div>
<div class="txt_box">
<div class="deco_txt">Gorilla Type 02</div>
<h3 class="txt_ttl ttl_eff"><span class="txt_set">威</span><span class="txt_set">嚇</span><span class="txt_set">す</span><span class="txt_set">る</span><span class="txt_set">ゴ</span><span class="txt_set">リ</span><span class="txt_set">ラ</span></h3>
<p>もし縄張りに入ってくるような奴がいたら威嚇して追い払います。声を荒げて威嚇する方法もありますが、できるゴリラなら睨むだけで十分。じっと数秒睨むだけでほとんどのゴリラは逃げていくでしょう。</p>
<div class="list_box">
<h4 class="list_ttl">威嚇するゴリラの特徴</h4>
<ul class="list_eff">
<li>気が短い<span class="box_cover"></span></li>
<li>自己中心的<span class="box_cover"></span></li>
<li>カルシウム不足<span class="box_cover"></span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
