見出し：slide 2

Aenean et augue a elit mollis molestie sed sed risus. Integer sit amet posuere tortor, in hendrerit diam. Pellentesque tempus porttitor velit vitae euismod. Sed faucibus erat vel augue luctus, vel congue mi ornare. Praesent id lacus justo. Vestibulum sit amet risus at libero aliquam laoreet. Donec placerat mauris lobortis libero pulvinar cursus.

見出し：slide 2

Aenean et augue a elit mollis molestie sed sed risus. Integer sit amet posuere tortor, in hendrerit diam. Pellentesque tempus porttitor velit vitae euismod. Sed faucibus erat vel augue luctus, vel congue mi ornare. Praesent id lacus justo. Vestibulum sit amet risus at libero aliquam laoreet. Donec placerat mauris lobortis libero pulvinar cursus.

<div aos="fade-up"></div>
<div aos="fade-down"></div>
<div aos="fade-right"></div>
<div aos="fade-left"></div>
<div aos="fade-up-right"></div>
<div aos="fade-up-left"></div>
<div aos="fade-down-right"></div>
<div aos="fade-down-left"></div>
<div aos="flip-left"></div>
<div aos="flip-right"></div>
<div aos="flip-up"></div>
<div aos="flip-down"></div>
<div aos="zoom-in"></div>
<div aos="zoom-in-up"></div>
<div aos="zoom-in-down"></div>
<div aos="zoom-in-left"></div>
<div aos="zoom-in-right"></div>
<div aos="zoom-out"></div>
<div aos="zoom-out-up"></div>
<div aos="zoom-out-down"></div>
<div aos="zoom-out-right"></div>
<div aos="zoom-out-left"></div>

DIFFERENT SETTINGS EXAMPLES

aos-duration：効果の始まりから終わりまでの秒数

<div aos="fade-up">
aos-duration="3000"
</div>
<div aos="fade-down">
aos-easing="linear"
aos-duration="1500"
</div>

aos-offset：効果の始まる下からのビクセル数

<div aos="fade-right">
aos-offset="500"
aos-easing="ease-in-sine"
</div>
<div aos="fade-right">
aos-offset="0"
aos-easing="ease-in-sine"
</div>
<div aos="fade-left">
aos-anchor="#example-anchor"
aos-offset="500"
aos-duration="500"
</div>

aos-delay：効果の始まる遅延秒数

<div aos="zoom-in">
aos-easing="ease-in-back"
aos-delay="500"
aos-offset="0"
</div>

aos-easing="ease-in-back"：消えるときに少し戻る？

<div aos="fade-right">
aos-offset="500"
aos-easing="ease-in-sine"
</div>
<div aos="fade-right">
aos-offset="500"
aos-easing="ease-in-back"
</div>
<div aos="fade-right">
aos-offset="500"
aaos-easing="linear"
</div>

ANCHOR PLACEMENT

効果の始まりの位置


aos-anchor-placement="top-bottom"：要素のトップで効果が始まる

<div aos="fade-right">
aos-anchor-placement="top-bottom"
</div>

aos-anchor-placement="center-bottom"：要素のセンターで効果が始まる

<div aos="fade-right">
aos-anchor-placement="center-bottom"
</div>

aos-anchor-placement="bottom-bottom"：要素のボトムで効果が始まる

<div aos="fade-right">
aos-anchor-placement="bottom-bottom"
</div>