スクロールに合わせて「Fade」「Flip」「slide」「Zoom」の4種類のアニメーションを簡単に実装出来、「duration」などの細かい設定も行えます。
michalsnik.github.io
index.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>
</div>
<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>
</div>
<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>
</div>
</div>
</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";
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
plusgraph-ca.jp
www.taguchi.co.jp
