スクロールすると要素がアニメーションで現れるレスポンシブ対応ページtemp_scroll_ani

/*** 全体 ***/
body{text-align:center;margin:0;font-family:'メイリオ';overflow-x:hidden;}
.main{text-align:center;max-width:960px;text-align:center;margin:auto;overflow:hidden;}

/*** ヘッダー ***/
.header{position:relative;top:0px;left:0px;width:90%;text-align:center;margin:auto;background-color:#eee;box-shadow:0px 10px 10px -5px #888;border:1px solid #ccc;overflow:hidden;}
.title{position:relative;top:0px;left:0px;text-align:center;font-size:60px;text-align:center;font-weight:bold;}

/*** アニメーション全要素の速度と動き方 ***/
.scroll_ani_001{transition-duration:800ms;transition-timing-function:ease;}

/*** アニメーションボタン要素 ***/
.ghost_buttons{position:relative;top:0px;width:120px;text-align:center;vertical-align:middle;margin:5px 0px;font-size:14px;font-weight:bold;color:#000;display:inline-block;padding:8px 0px;text-decoration:none;cursor:pointer;background:#fff;border:1px solid #000;overflow:hidden;border-radius:5px;opacity:0;}
.ghost_buttons:hover{color:#fff;background-color:#000;}

/*** アニメーション文章要素、速度と動き方を変更 ***/
.p1{position:relative;top:0px;left:400px;opacity:0;max-width:600px;margin:auto;text-align:left;padding:30px;line-height:1.8em;transition-duration:2000ms;transition-timing-function:cubic-bezier(0,1,0,1);}
.p2{position:relative;top:0px;left:-400px;opacity:0;max-width:600px;margin:auto;text-align:left;padding:30px;line-height:1.8em;transition-duration:2000ms;transition-timing-function:cubic-bezier(0,1,0,1);}

/*** アニメーション写真要素 ***/
.photo1{position:relative;margin:auto;width:90%;top:0px;left:0px;opacity:0;transform:scale(0.7);}
.photo2{position:relative;top:0px;opacity:0;margin:auto;width:100px;}
.photo3{position:relative;top:0px;left:0px;opacity:0;transform:scale(0.1) rotateX(90deg) rotateY(90deg) rotateZ(270deg) translateX(50%) translateY(50%);}

/*** レスポンシブ対応 ***/
@media(max-width:640px){
.ghost_buttons{width:60px;}
.title{font-size:30px;}
.photo2{width:60px;}
}

</style>

"use strict";

//--設定部分↓--

var global_000_ScAni = 0.7;		//--開始位置（要素の上端が画面のどの位置に来た時に開始するか。1は最下部、0は最上部。）

//--設定部分↑--

var MiyakeScAniSys={

/*************************************************/

Copyright : "Miyake_kobo",
    HomePage : "https://miyake5080.stars.ne.jp/",
    MailAddress : "miyake_kobo@yahoo.co.jp",
    ContentType : "Free version Tools.",

/*************************************************/

fnc:function(o,stp){stp=void 0===stp?.7:stp;var cssTop=o.style.top,cssLeft=o.style.left,cssOpacity=o.style.opacity,cssTransform=o.style.transform,a=MiyakeScAniSys.MailAddress,ScAni=function(){var yake=window.innerHeight*stp,c_hantei={yake:yake},iti=o.getBoundingClientRect().top;o.hata_ani?iti>=c_hantei[a.substr(2,4)]&&(o.hata_ani=!1,o.style.opacity=cssOpacity,o.style.top=cssTop,o.style.opacity=cssOpacity,o.style.left=cssLeft,o.style.transform=cssTransform):iti<=c_hantei[a.substr(2,4)]&&(o.hata_ani=!0,o.style.opacity=1,o.style.top="0px",o.style.opacity=1,o.style.left="0px",o.style.transform="scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0%) translateY(0%) translateZ(0px)")};o.hata_ani=!1,window.addEventListener?window.addEventListener("scroll",ScAni,!1):window.attachEvent&&window.attachEvent("onscroll",ScAni),setTimeout(ScAni,500)},ol:function(){var c=MiyakeScAniSys.Copyright,u=MiyakeScAniSys.HomePage,a=MiyakeScAniSys.MailAddress,ct=MiyakeScAniSys.ContentType,d=document.createElement("a"),M=document.querySelectorAll(".scroll_ani_001");document.querySelector(".c_"+c)||(document.body.appendChild(d),d.setAttribute("href",u),d.setAttribute("class","c_"+c),d.innerHTML=ct+" Ref (C) "+c,d.style.display="none",d.style.margin="1ex",d.style.fontSize="small");for(var jj=0;jj<M.length;jj++)MiyakeScAniSys.fnc(M[jj],global_000_ScAni)}};window.addEventListener?window.addEventListener("load",MiyakeScAniSys.ol,!1):window.attachEvent&&window.attachEvent("onload",MiyakeScAniSys.ol);
//--Copyright (C) Miyake_kobo.--

↓
 
↓
 
↓
 
↓
 
↓
 
↓
 
↓
 
↓
 
↓
 
↓

<div class="title">
Web Template
</div>
<div>
縦長ホームページのテンプレート
</div>

<a class="ghost_buttons scroll_ani_001" href="http://miyake.g2.xrea.com/index" style="left:200px;" target="_blank">HOME</a>
<a class="ghost_buttons scroll_ani_001" href="https://miyake.cloudfree.jp/index.html" style="left:-200px;" target="_blank">IMG</a>
<a class="ghost_buttons scroll_ani_001" href="http://miyakesystem.web.fc2.com/index.html" style="left:-400px;" target="_blank">BLOCK</a>
<a class="ghost_buttons scroll_ani_001" href="https://miyake5080.stars.ne.jp/index.html" style="left:400px;" target="_blank">TEMP</a>

</div>

↑ボタンがフェードで左右から出てくる↑
 
初期値はleft:～px;opacity:0;

↓
 
↓
 
↓
 
↓
 
↓
 
↓
 
↓
 
↓
 
↓
 
↓
 
 
 
 
 
 
文章がフェードで右から出てくる
 
初期値はleft:400px;opacity:0;
 
動きはtransition-duration:2000ms;transition-timing-function:cubic-bezier(0,1,0,1);

ページを下にスクロールすると写真や文章などの要素がアニメーションで現れ、上にスクロールすると元に戻ります。
ただし、ページを軽くする為に画像などの読み込みを遅らせる機能はありません。
 
　「設定部分」で、要素の上端が画面のどの位置が来た時に開始するかを設定できます。
開始位置設定は0～1で、1は最下部に来た時、0は最上部に来た時です。このページの設定は0.7で、画面の上から70%の位置です。
 
　このページのプログラムはピュアなJavascriptで記述してあり、ライブラリやプラグインのダウンロードも読み込みも不要です。

↓
 
↓
 
↓
 
 
 
 
写真がフェード拡大で出てくる
 
初期値はopacity:0;transform:scale(0.7);

↓
 
↓
 
↓
 
 
 
 
文章がフェードで左から出てくる
 
初期値はleft:-400px;opacity:0;
 
動きはtransition-duration:2000ms;transition-timing-function:cubic-bezier(0,1,0,1);

動かせる要素は、class="scroll_ani_001"のimg要素またはdivやpなどのBLOCK要素のleftとopacityスタイルと、transformスタイルのscaleとXYZ方向のrotateとtranslateです。
それぞれのスタイルシートのtop:～px;left:～px;opacity:～;transform:scale(～) rotateX(～deg) rotateY(～deg) rotateZ(～deg) translateX(～%) translateY(～%) translateZ(～px);で初期位置を設定しておきます。
開始位置に来ると、top:0px;left:0px;opacity:1;transform:scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0%) translateY(0%) translateZ(0px);にアニメーション移動します。
要素の動き方と速度はスタイルシートで変更できます。

↓
 
↓
 
↓
 
 
 
 
写真がフェードで左右から出てくる
 
初期値はleft:～px;opacity:0;

↓
 
↓
 
↓
 
 
 
 
写真がフェード拡大3D回転で出てくる
 
初期値はopacity:0;transform:scale(0.1) rotateX(90deg) rotateY(90deg) rotateZ(270deg) translateX(50%) translateY(50%);

↓
 
↓
 
↓

</div>

スクロールすると要素がアニメーションで現れるレスポンシブ対応ページtemp_scroll_ani_001[オープン]

⇔

・　このページのソース: 　以下はページ全体のソースで、他のページに貼り付けて使用するソースではありません。