スクロールに合わせて「Fade」「Flip」「slide」「Zoom」の4種類のアニメーションを簡単に実装出来、「duration」などの細かい設定も行えます。
index.html
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>AOSを実装してみる</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/aos.css" media="(min-width:768px)"> </head> <body> <div class="container"> <header> <h1>Animate On Scroll Library</h1> </header> <div class="main"> <div class="box"> <h2>ニューヨーク・タイムズスクエア</h2> <div class="box-inner" data-aos="fade-up" data-aos-delay="300"> <p class="photo"><img src="img/01.png" alt=""></p> <p class="txt">テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト</p> </div><!--/.box-inner--> </div><!--/.box--> <div class="box"> <h2>京都・清水寺</h2> <div class="box-inner" data-aos="flip-left"> <p class="photo"><img src="img/02.png" alt=""></p> <p class="txt">テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト</p> </div><!--/.box-inner--> </div><!--/.box--> <div class="box"> <h2>パリ・シャンゼリゼ通り</h2> <div class="box-inner" data-aos="zoom-in-down"> <p class="photo"><img src="img/03.png" alt=""></p> <p class="txt">テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト</p> </div><!--/.box-inner--> </div><!--/.box--> </div><!--/.main--> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="js/aos.js"></script> <script> AOS.init({ easing: 'ease-in-out-sine' }); </script> </body> </html>
style.css
@charset "utf-8"; /* CSS Document */ html,body,h1,h2,p,ul,li{ margin:0; padding:0; box-sizing:border-box; } ul{ list-style:none; } a{ text-decoration:none; } img{ vertical-align:bottom; } header { width:25%; height:100vh; background:#0E63A0; position:fixed; z-index:1000; } header::after { display:block; content:""; width:100px; height:100vh; background:url(../img/bg.svg) no-repeat center center/cover; position:absolute; top:0; right:-97px; } h1 { color:#FFFFFF; padding:100px 10px 0; } .main { width:75%; margin-left:25%; } .box { height:100vh; padding:0 150px; } .box:nth-of-type(2){ background:#C0C0C0; position:relative; } .box:nth-of-type(2)::before { display:block; content:""; width:100%; height:100px; background:url(../img/bg2.svg) no-repeat center center/cover; position:absolute; top:-98px; left:0; } .box:nth-of-type(2)::after { display:block; content:""; width:100%; height:100px; background:url(../img/bg2.svg) no-repeat center center/cover; position:absolute; bottom:-98px; left:0; transform:rotate(180deg); } h2 { text-align:center; padding:80px 0 50px; } .box-inner{ display:flex; justify-content:space-between; } .box:nth-of-type(2)>.box-inner{ flex-direction:row-reverse; } .box-inner img { max-width:100%; } @media (max-width:767px){ header { width:100%; height:auto; position:static; } h1 { padding:20px 10px; font-size:20px; text-align:center; } .main { width:100%; margin-left:0; } .box { height:auto; padding:50px 10px 0; } h2 { text-align:center; font-size:18px; padding:20px 0 10px; } .box-inner{ display:block; } .photo{ margin-bottom:20px; } .txt{ text-align:center; margin-bottom:40px; } }
デモ
yachin29.com