cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <style> .sr, .sr-seq{ visibility: hidden; } </style>

<div class="box box1">
<div class="head">
使用例: <b>z方向の回転</b> を設定したクラス
</div>

<div class="cls">
<span class="spro">.srRotate-<span class="blue">0_0_360</span></span>
</div>
  
<div class="scrl">スクロール<br><i class="fa fa-angle-down"></i></div>
</div><!-- .box -->

<div class="box box2">
<img class="sr srOpt-scale_0f1-duration_2000-reset_true srRotate-0_0_360" src="http://photoshopvip.net/file/2016/05/psvip880.png">
</div>
            
          
!
            
              body{
  padding: 10vh 0 0;
  font-family: font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  color: #161616;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #fff;
}
div.box{
  position: relative;
  text-align: center;
}
div.box1{
  height: 90vh;
}
div.cls{
  padding: 1em 0;
}
.spro{
   font-family: Source Code Pro, 'source_code_proregular', Arial, sans-serif !important;
  font-weight: bold;
}
.blue{
  color: #2196F3;
}
.red{
  color: #E91E63;
}
.notice{
  font-size: 85%;
}
.scrl{
  line-height: 1;
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform:translateX(-50%);
}
.box2{
  height: 5vh;
}
.box2 img{
  padding: 1em 0;
  position:relative;
  display: inline-block;
  width: 50%;
}
            
          
!
            
              /**
 * ScrollReveal
 * ------------
 * Version : 3.3.2
 * Website : scrollrevealjs.org
 * Repo    : github.com/jlmakes/scrollreveal.js
 * Author  : Julian Lloyd (@jlmakes)

 * The MIT License (MIT)
 * modified by ya90net
 */
;(function(){var v;var w;function m(A){if(typeof this==="undefined"||Object.getPrototypeOf(this)!==m.prototype){return new m(A)}v=this;v.version="3.3.2";v.tools=new b();if(v.isSupported()){v.tools.extend(v.defaults,A||{});v.defaults.container=g(v.defaults);v.store={elements:{},containers:[]};v.sequences={};v.history=[];v.uid=0;v.initialized=false}else{if(typeof console!=="undefined"&&console!==null){console.log("ScrollReveal is not supported in this browser.")}}return v}m.prototype.defaults={origin:"bottom",distance:"20px",duration:500,delay:0,rotate:{x:0,y:0,z:0},opacity:0,scale:0.9,easing:"cubic-bezier(0.6, 0.2, 0.1, 1)",container:window.document.documentElement,mobile:true,reset:false,useDelay:"always",viewFactor:0.2,viewOffset:{top:0,right:0,bottom:0,left:0},beforeReveal:function(A){},beforeReset:function(A){},afterReveal:function(A){},afterReset:function(A){}};m.prototype.isSupported=function(){var A=document.documentElement.style;return"WebkitTransition" in A&&"WebkitTransform" in A||"transition" in A&&"transform" in A};m.prototype.reveal=function(I,E,C,J){var B;var A;var F;var D;var G;var K;if(E!==undefined&&typeof E==="number"){C=E;E={}}else{if(E===undefined||E===null){E={}}}B=g(E);A=i(I,B);if(!A.length){console.log('ScrollReveal: reveal on "'+I+'" failed, no elements found.');return v}if(C&&typeof C==="number"){K=f();G=v.sequences[K]={id:K,interval:C,elemIds:[],active:false}}for(var H=0;H<A.length;H++){D=A[H].getAttribute("data-sr-id");if(D){F=v.store.elements[D]}else{F={id:f(),domEl:A[H],seen:false,revealing:false};F.domEl.setAttribute("data-sr-id",F.id)}if(G){F.sequence={id:G.id,index:G.elemIds.length};G.elemIds.push(F.id)}j(F,E,B);k(F);a(F);if(v.tools.isMobile()&&!F.config.mobile||!v.isSupported()){F.domEl.setAttribute("style",F.styles.inline);F.disabled=true}else{if(!F.revealing){F.domEl.setAttribute("style",F.styles.inline+F.styles.transform.initial)}}}if(!J&&v.isSupported()){q(I,E,C);if(v.initTimeout){window.clearTimeout(v.initTimeout)}v.initTimeout=window.setTimeout(l,0)}return v};m.prototype.sync=function(){if(v.history.length&&v.isSupported()){for(var B=0;B<v.history.length;B++){var A=v.history[B];v.reveal(A.target,A.config,A.interval,true)}l()}else{console.log("ScrollReveal: sync failed, no reveals found.")}return v};function g(A){if(A&&A.container){if(typeof A.container==="string"){return window.document.documentElement.querySelector(A.container)}else{if(v.tools.isNode(A.container)){return A.container}else{console.log('ScrollReveal: invalid container "'+A.container+'" provided.');console.log("ScrollReveal: falling back to default container.")}}}return v.defaults.container}function i(B,A){if(typeof B==="string"){return Array.prototype.slice.call(A.querySelectorAll(B))}else{if(v.tools.isNode(B)){return[B]}else{if(v.tools.isNodeList(B)){return Array.prototype.slice.call(B)}}}return[]}function f(){return ++v.uid}function j(C,B,A){if(B.container){B.container=A}if(!C.config){C.config=v.tools.extendClone(v.defaults,B)}else{C.config=v.tools.extendClone(C.config,B)}if(C.config.origin==="top"||C.config.origin==="bottom"){C.config.axis="Y"}else{C.config.axis="X"}}function k(B){var A=window.getComputedStyle(B.domEl);if(!B.styles){B.styles={transition:{},transform:{},computed:{}};B.styles.inline=B.domEl.getAttribute("style")||"";B.styles.inline+="; visibility: visible; ";B.styles.computed.opacity=A.opacity;if(!A.transition||A.transition==="all 0s ease 0s"){B.styles.computed.transition=""}else{B.styles.computed.transition=A.transition+", "}}B.styles.transition.instant=x(B,0);B.styles.transition.delayed=x(B,B.config.delay);B.styles.transform.initial=" -webkit-transform:";B.styles.transform.target=" -webkit-transform:";h(B);B.styles.transform.initial+="transform:";B.styles.transform.target+="transform:";h(B)}function x(C,B){var A=C.config;return"-webkit-transition: "+C.styles.computed.transition+"-webkit-transform "+A.duration/1000+"s "+A.easing+" "+B/1000+"s, opacity "+A.duration/1000+"s "+A.easing+" "+B/1000+"s; transition: "+C.styles.computed.transition+"transform "+A.duration/1000+"s "+A.easing+" "+B/1000+"s, opacity "+A.duration/1000+"s "+A.easing+" "+B/1000+"s; "}function h(D){var B=D.config;var C;var A=D.styles.transform;if(B.origin==="top"||B.origin==="left"){C=/^-/.test(B.distance)?B.distance.substr(1):"-"+B.distance}else{C=B.distance}if(parseInt(B.distance)){A.initial+=" translate"+B.axis+"("+C+")";A.target+=" translate"+B.axis+"(0)"}if(B.scale){A.initial+=" scale("+B.scale+")";A.target+=" scale(1)"}if(B.rotate.x){A.initial+=" rotateX("+B.rotate.x+"deg)";A.target+=" rotateX(0)"}if(B.rotate.y){A.initial+=" rotateY("+B.rotate.y+"deg)";A.target+=" rotateY(0)"}if(B.rotate.z){A.initial+=" rotateZ("+B.rotate.z+"deg)";A.target+=" rotateZ(0)"}A.initial+="; opacity: "+B.opacity+";";A.target+="; opacity: "+D.styles.computed.opacity+";"}function a(B){var A=B.config.container;if(A&&v.store.containers.indexOf(A)===-1){v.store.containers.push(B.config.container)}v.store.elements[B.id]=B}function q(D,C,B){var A={target:D,config:C,interval:B};v.history.push(A)}function l(){if(v.isSupported()){u();for(var A=0;A<v.store.containers.length;A++){v.store.containers[A].addEventListener("scroll",r);v.store.containers[A].addEventListener("resize",r)}if(!v.initialized){window.addEventListener("scroll",r);window.addEventListener("resize",r);v.initialized=true}}return v}function r(){w(u)}function c(){var B;var A;var C;var D;v.tools.forOwn(v.sequences,function(F){D=v.sequences[F];B=false;for(var E=0;E<D.elemIds.length;E++){C=D.elemIds[E];A=v.store.elements[C];if(p(A)&&!B){B=true}}D.active=B})}function u(){var A;var B;c();v.tools.forOwn(v.store.elements,function(C){B=v.store.elements[C];A=n(B);if(t(B)){B.config.beforeReveal(B.domEl);if(A){B.domEl.setAttribute("style",B.styles.inline+B.styles.transform.target+B.styles.transition.delayed)}else{B.domEl.setAttribute("style",B.styles.inline+B.styles.transform.target+B.styles.transition.instant)}z("reveal",B,A);B.revealing=true;B.seen=true;if(B.sequence){o(B,A)}}else{if(e(B)){B.config.beforeReset(B.domEl);B.domEl.setAttribute("style",B.styles.inline+B.styles.transform.initial+B.styles.transition.instant);z("reset",B);B.revealing=false}}})}function o(D,C){var A=0;var B=0;var E=v.sequences[D.sequence.id];E.blocked=true;if(C&&D.config.useDelay==="onload"){B=D.config.delay}if(D.sequence.timer){A=Math.abs(D.sequence.timer.started-new Date());window.clearTimeout(D.sequence.timer)}D.sequence.timer={started:new Date()};D.sequence.timer.clock=window.setTimeout(function(){E.blocked=false;D.sequence.timer=null;r()},Math.abs(E.interval)+B-A)}function z(C,D,B){var A=0;var E=0;var F="after";switch(C){case"reveal":E=D.config.duration;if(B){E+=D.config.delay}F+="Reveal";break;case"reset":E=D.config.duration;F+="Reset";break}if(D.timer){A=Math.abs(D.timer.started-new Date());window.clearTimeout(D.timer.clock)}D.timer={started:new Date()};D.timer.clock=window.setTimeout(function(){D.config[F](D.domEl);D.timer=null},E-A)}function t(A){if(A.sequence){var B=v.sequences[A.sequence.id];return B.active&&!B.blocked&&!A.revealing&&!A.disabled}return p(A)&&!A.revealing&&!A.disabled}function n(B){var A=B.config.useDelay;return A==="always"||(A==="onload"&&!v.initialized)||(A==="once"&&!B.seen)}function e(A){if(A.sequence){var B=v.sequences[A.sequence.id];return !B.active&&A.config.reset&&A.revealing&&!A.disabled}return !p(A)&&A.config.reset&&A.revealing&&!A.disabled}function d(A){return{width:A.clientWidth,height:A.clientHeight}}function y(A){if(A&&A!==window.document.documentElement){var B=s(A);return{x:A.scrollLeft+B.left,y:A.scrollTop+B.top}}else{return{x:window.pageXOffset,y:window.pageYOffset}}}function s(B){var D=0;var E=0;var A=B.offsetHeight;var C=B.offsetWidth;do{if(!isNaN(B.offsetTop)){D+=B.offsetTop}if(!isNaN(B.offsetLeft)){E+=B.offsetLeft}B=B.offsetParent}while(B);return{top:D,left:E,height:A,width:C}}function p(E){var I=s(E.domEl);var B=d(E.config.container);var C=y(E.config.container);var M=E.config.viewFactor;var D=I.height;var H=I.width;var L=I.top;var J=I.left;var F=L+D;var A=J+H;return G()||K();function G(){var U=L+D*M;var T=J+H*M;var O=F-D*M;var S=A-H*M;var N=C.y+E.config.viewOffset.top;var Q=C.x+E.config.viewOffset.left;var P=C.y-E.config.viewOffset.bottom+B.height;var R=C.x-E.config.viewOffset.right+B.width;return U<P&&O>N&&T>Q&&S<R}function K(){return(window.getComputedStyle(E.domEl).position==="fixed")}}function b(){}b.prototype.isObject=function(A){return A!==null&&typeof A==="object"&&A.constructor===Object};b.prototype.isNode=function(A){return typeof window.Node==="object"?A instanceof window.Node:A&&typeof A==="object"&&typeof A.nodeType==="number"&&typeof A.nodeName==="string"};b.prototype.isNodeList=function(A){var B=Object.prototype.toString.call(A);var C=/^\[object (HTMLCollection|NodeList|Object)\]$/;return typeof window.NodeList==="object"?A instanceof window.NodeList:A&&typeof A==="object"&&C.test(B)&&typeof A.length==="number"&&(A.length===0||this.isNode(A[0]))};b.prototype.forOwn=function(A,C){if(!this.isObject(A)){throw new TypeError('Expected "object", but received "'+typeof A+'".')}else{for(var B in A){if(A.hasOwnProperty(B)){C(B)}}}};b.prototype.extend=function(B,A){this.forOwn(A,function(C){if(this.isObject(A[C])){if(!B[C]||!this.isObject(B[C])){B[C]={}}this.extend(B[C],A[C])}else{B[C]=A[C]}}.bind(this));return B};b.prototype.extendClone=function(B,A){return this.extend(this.extend({},B),A)};b.prototype.isMobile=function(){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)};w=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(A){window.setTimeout(A,1000/60)};if(typeof define==="function"&&typeof define.amd==="object"&&define.amd){define(function(){return m})}else{if(typeof module!=="undefined"&&module.exports){module.exports=m}else{window.ScrollReveal=m}}}());document.addEventListener("DOMContentLoaded",function(){window.sr=ScrollReveal();var o=document.querySelectorAll(".sr");for(var g=o.length;g--;){var p=o[g].className;var l=j(p);var m=f(p);var n=e(p);if(l){if(m&&n){l.rotate=m.rotate;l.viewOffset=n.viewOffset}else{if(m){l.rotate=m.rotate}else{if(n){l.viewOffset=n.viewOffset}else{}}}sr.reveal(o[g],l)}else{hasOptFalse={};if(m&&n){hasOptFalse.rotate=m.rotate;hasOptFalse.viewOffset=n.viewOffset}else{if(m){hasOptFalse.rotate=m.rotate}else{if(n){hasOptFalse.viewOffset=n.viewOffset}}}sr.reveal(o[g],hasOptFalse)}}function c(q){var u=document.querySelectorAll(q);if(u.length==0){return}var s=u[0].className;var v=j(s);var i=f(s);var w=e(s);var r=a(s);var t=r!=false?Number(r):50;if(v){if(i&&w){v.rotate=i.rotate;v.viewOffset=w.viewOffset}else{if(i){v.rotate=i.rotate}else{if(w){v.viewOffset=w.viewOffset}else{}}}sr.reveal(q,v,t)}else{hasOptFalse={};if(i&&w){hasOptFalse.rotate=i.rotate;hasOptFalse.viewOffset=w.viewOffset}else{if(i){hasOptFalse.rotate=i.rotate}else{if(w){hasOptFalse.viewOffset=w.viewOffset}}}sr.reveal(q,hasOptFalse,t)}}var k=0;while(k>=0){var d=k==0?".sr-seq":".sr-seq"+k;var b=document.querySelectorAll(d);k++;if(b.length==0){k=-1}else{c(d)}}function j(A){if(A.indexOf("srOpt-")>=0){var q;var w=["origin","distance","easing","useDelay"];var t=["duration","delay","opacity","scale","viewFactor"];var u=["mobile","reset"];var s=A.split(" ");for(var x=s.length;x--;){if(s[x].indexOf("srOpt-")>=0){q=s[x];break}}var v=q.split("-");var y={};for(var x=v.length-1;x>=1;x--){var r=v[x].split("_");if((","+w.join()+",").match(","+r[0]+",")){if(r[0]=="distance"){r[1]=r[1].replace(/f/g,".")}if(r[0]=="easing"){var z=r.join("-").replace(/easing-/g,"");r[1]=z}y[r[0]]=r[1]}else{if((","+t.join()+",").match(","+r[0]+",")){r[1]=r[1].replace(/f/g,".");r[1]=Number(r[1]);y[r[0]]=r[1]}else{if((","+u.join()+",").match(","+r[0]+",")){y[r[0]]=r[1]=="true"?true:false}}}}return y}return false}function f(q){if(q.indexOf("srRotate-")>=0){var r={};var t=q.split(" ");var w;for(var s=t.length;s--;){if(t[s].indexOf("srRotate-")>=0){w=t[s];break}}var v=w.split("-");var u=v[1].split("_");r.rotate={x:Number(u[0]),y:Number(u[1]),z:Number(u[2])};return r}return false}function e(q){if(q.indexOf("srOffset-")>=0){var w={};var u=q.split(" ");var t;for(var s=u.length;s--;){if(u[s].indexOf("srOffset-")>=0){t=u[s];break}}var v=t.split("-");var r=v[1].split("_");w.viewOffset={top:Number(r[0]),right:Number(r[1]),bottom:Number(r[2]),left:Number(r[3])};return w}return false}function a(q){if(q.indexOf("srInterval-")>=0){var r;var u=q.split(" ");var t;for(var s=u.length;s--;){if(u[s].indexOf("srInterval-")>=0){t=u[s];break}}var v=t.split("-");r=v[1];return r}return false}function h(r,i,q){return r.slice(0,i)+q+r.slice(i,r.length)}});
            
          
!
999px
Loading ..................

Console