jQueryで位置(高さ)を取得して、任意の高さに来たらcssを切り替えてアニメーションさせる。任意の高さに来たらtransformなどが書いてある.onというcssが有効になる。
html,body { margin: 0; padding: 3em; } section{ padding:30em 0 } /*1つめ*/ .box { height: 10em; margin: 0 1em 2em 0; position: relative; border: 2px solid #333; } .box:before { content: "1回転して3倍に拡大"; display: block; position: absolute; left: 45%; top : 45%; background-color:pink; transition: 0.5s; } .on.box:before { transform: scale(3) rotate(1turn); background-color:purple; color:#fff; } /*2つめ*/ .box2 { height: 10em; margin: 0 1em 2em 0; position: relative; border: 2px solid #333; } .box2:before { content: "半回転して2倍に拡大"; display: block; position: absolute; left: 45%; top : 45%; background-color:indianred; transition: 0.5s; } .on.box2:before { transform: scale(-2) rotate(1turn); background-color:skyblue; }
$(function(){ var scrollBottom; var wHeight; var sec1Top = $("#sec1 .box").offset().top;//1つめ varの関数名はif文で使われる 動かしたいオブジェクトの数だけこの行も必要 var wowwow = $("#sec2 .box2").offset().top;//2つめ varの関数名はif文で使われる function getScrollTop(){ wHeight = Math.floor($(window).height() * 0.5);//0.5は画面の真ん中、0はTOP、1はBOTTOMで変化 scrollBottom = $(window).scrollTop() + wHeight; //動かしたいオブジェクトの数だけifとelse(2つでワンセット)がある if(scrollBottom >= sec1Top){ $("#sec1 .box").addClass("on"); } else{ $("#sec1 .box").removeClass("on"); } if(scrollBottom >= wowwow){ $("#sec2 .box2").addClass("on"); } else{ $("#sec2 .box2").removeClass("on"); } } $(window).on("load scroll", getScrollTop); }); //.offset() .scrollTop() .addClass .removeClassはjQueryの変数なので「ヌー」で調べられる。 //仕組みは、ある位置(ここでは0.5に来た時)にcssが入れ替わる。.boxから.box onに。 //変化する矩形は疑似要素でcssのtransformでアニメーションしている。
<section id="sec1"> <div> <h1>Sec1</h1> <div class="box"></div> </div> </section> <section id="sec2"> <div> <h1>Sec2</h1> <div class="box2"></div> </div> </section>