<div class="demo">
<h1>
ページをスクロールダウン、アニメ効果を確認
</h1>
<p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p>
<div class="scrollme">
<h2>ブロックスクY軸回転</h2>
<div
class="animateme scroll-block"
data-when="span"
data-from="0"
data-to="1"
data-rotatey="360"
>
<h2>ブロックが回転する</h2><h2>ブロックが回転する</h2><h2>ブロックが回転する</h2><h2>ブロックが回転する</h2><h2>ブロックが回転する</h2><h2>ブロックが回転する</h2>
</div>
</div>
<p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p>
<h2>ブロックスクX軸回転で入ってくる</h2>
<div class="block scrollme">
<div class="section animateme"
data-when="span"
data-from="0.5"
data-to="0"
data-rotatex="90" >section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 </div>
</div>
<div class="block scrollme">
<div class="section animateme" data-when="span" data-from="0.5" data-to="0" data-rotatex="90">section 2 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1</div>
</div>
<p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p>
<h2>ブロックスク縮小しながら入ってくる</h2>
<div class="block scrollme">
<div class="section animateme" data-when="enter" data-from="0.5" data-to="0" data-crop="false" data-opacity="0" data-scale="1.5">section 3 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1</div>
</div>
<div class="block scrollme">
<div class="section animateme" data-when="enter" data-from="0.5" data-to="0" data-crop="false" data-opacity="0" data-scale="1.5">section 4 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1 section 1</div>
</div>
<p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p>
</div>
.section{
display:block;
height:200px;
width:70%;
border:1px solid black;
vertical-align:middle;
background-color:rgba(220, 131, 131, 0.17);
margin:40px 100px;
}
.block{
overflow: hidden;
perspective: 500px;
transform-style: preserve-3d;
}
.scroll-block{background-color:rgba(220, 131, 131, 0.17); margin:0 250px;}
*{
text-align:center;
}
.demo{ display:flex; justify-content: center; flex-direction: column; }