JSFiddle - React, Tailwind, and code Playground

by tiger

HTML

<div class="demo">
<h1>
ページをスクロールダウン、アニメ効果を確認
</h1>
  <p>&darr;</p><p>&darr;</p><p>&darr;</p><p>&darr;</p><p>&darr;</p><p>&darr;</p><p>&darr;</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>&darr;</p><p>&darr;</p><p>&darr;</p><p>&darr;</p><p>&darr;</p><p>&darr;</p><p>&darr;</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>
   ...

CSS

.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; }

JavaScript

// ----------------------------------------------------------------------------------------------------
// ScrollMe
// A jQuery plugin for adding simple scrolling effects to web pages
// http://scrollme.nckprsn.com
// ----------------------------------------------------------------------------------------------------
var scrollme=(function(a){var d={};var c=a(document);var b=a(window);d.body_height=0;d.viewport_height=0;d.viewport_top=0;d.viewport_bottom=0;d.viewport_top_previous=-1;d.elements=[];d.elements_in_view=[];d.property_defaults={opacity:1,translatex:0,translatey:0,translatez:0,rotatex:0,rotatey:0,rotatez:0,scale:1,scalex:1,scaley:1,scalez:1};d.scrollme_selector=".scrollme";d.animateme_selector=".animateme";d.update_interval=10;d.easing_functions={linear:function(e){return e},easeout:function(e){return e*e*e},easein:function(e){e=1-e;return 1-(e*e*e)},easeinout:function(e){if(e<0.5){return(4*e*e*e)}else{e=1-e;return 1-(4*e*e*e)}}};d.init_events=["ready","page:load","page:change"];d.init_if=function(){return true};d.init=function(){if(!d.init_if()){return false}d.init_elements();d.on_resize();b.on("resize orientationchange",function(){d.on_resize()});b.load(function(){setTimeout(function(){d.on_resize()},100)});setInterval(d.update,d.update_interval);return true};d.init_elements=function(){a(d.scrollme_selector).each(function(){var e={};e.element=a(this);var f=[];a(this).find(d.animateme_selector).addBack(d.animateme_selector).each(function(){var h={};h.element=a(this);h.when=h.element.data("when");h.from=h.element.data("from");h.to=h.element.data("to");if(h.element.is("[data-crop]")){h.crop=h.element.data("crop")}else{h.crop=true}if(h.element.is("[data-easing]")){h.easing=d.easing_functions[h.element.data("easing")]}else{h.easing=d.easing_functions.easeout}var...