変な動きをするページ これもアイキャッチだ

javascriptとcssだけで動きます
やろうと思えばどの部分にもCSSで手軽に装飾できるのが楽しいSWELL

エフェクトが効く部分はゆっくりとスクロールするとエフェクトが見えませんので
その場合はスクロールバックすると再度エフェクトの確認ができます。
ほぼ全てのブロックと単独行に自在に適用可能






なんでもできるぜ
preタグでコード表示の部分
@font-face {
font-family: 'icomoon';
src:url('/wp-content/themes/swell/assets/fonts/icomoon.ttf?7ojy2d') format('embedded-truetype'),
url('/wp-content/themes/swell/assets/fonts/icomoon.ttf') format('truetype'),
url('/wp-content/themes/swell/assets/fonts/icomoon.woff') format('woff'),
url('/wp-content/themes/swell/assets/fonts/icomoon.svg') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
画像ギャラリーの一枚一枚にも個別で




















つくりは簡単です。
こんな感じ


slideview と **-MOVEまたは border* の各classを組み合わせて宣言します。
宣言する順番はどちらが先でも構いません。必ずセットで宣言を。
**-MOVE と border は 併用可能。
**-MOVEは複数記述しても1番最後のみ有効
使用するCSS
外観>テーマファイルエディターでも カスタマイズ>追加CSSでも好きな方にコピペしてください。
//MOVE FADE .slideview { opacity: 0; } .LL-MOVE { opacity: 0; } .RR-MOVE { opacity: 0; } .UU-MOVE { opacity: 0; } .DD-MOVE { opacity: 0; } .MFADE{ opacity: 0; } .FLAT-MOVE{ transform-origin:center bottom; transform: rotateX(-90deg) } .FLAT-MOVE.on{ transform-origin:center bottom; -webkit-transition:all 3s ease-in-out; -moz-transition:all 3s ease-in-out; -o-transition:all 3s ease-in-out; -ms-transition:all 3s ease-in-out; transition:all 3s ease-in-out; -webkit-transform:rotateX(0deg); -moz-transform:rotateX(0deg); -o-transform:rotateX(0deg); -ms-transform:rotateX(0deg); transform:rotateX(0deg); } .FLAT-TOP-MOVE{ transform-origin:center top; transform: rotateX(-90deg) } .FLAT-TOP-MOVE.on{ transform-origin:center top; -webkit-transition:all 3s ease-in-out; -moz-transition:all 3s ease-in-out; -o-transition:all 3s ease-in-out; -ms-transition:all 3s ease-in-out; transition:all 3s ease-in-out; -webkit-transform:rotateX(0deg); -moz-transform:rotateX(0deg); -o-transform:rotateX(0deg); -ms-transform:rotateX(0deg); transform:rotateX(0deg); } .FF-MOVE{ opacity: 0; } .FF-MOVE.on{ opacity: 1; -webkit-transition:all 1s ease-in-out; -moz-transition:all 1s ease-in-out; -o-transition:all 1s ease-in-out; -ms-transition:all 1s ease-in-out; transition:all 1s ease-in-out; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg); } .RR-MOVE.on { animation: slideInR forwards 2s; } .LL-MOVE.on { animation: slideInL forwards 2s; } .UU-MOVE.on { animation: slideInU forwards 2s; } .DD-MOVE.on { animation: slideInD forwards 2s; } .MFADE.on { animation: fade forwards 4s; } @keyframes fade{ 0%{ opacity: 0; } 100%{ opacity: 1; } } @keyframes slideInL { 0% { opacity: 0; transform: translateX(-140px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes slideInR { 0% { opacity: 0; transform: translateX(140px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes slideInU { 0% { opacity: 0; transform: translateY(-140px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes slideInD { 0% { opacity: 0; transform: translateY(140px); } 100% { opacity: 1; transform: translateY(0); } } .INBK{display: inline-block;} .border{ position: relative; } .borderl{ position: relative; } .borderl.on:before{ content: ''; position: absolute; left: 0; bottom: 0; width: 0; border-bottom: solid 2px #0f6aaa; animation: border_anim 1.3s linear forwards; } .border.on:before{ content: ''; position: absolute; left: 50%; bottom: 0; width: 0; border-bottom: solid 2px #0f6aaa; transform: translateX(-50%); animation: border_anim 1.3s linear forwards; } @keyframes border_anim { 0%{ width: 0%; } 100%{ width: 100%; } }
使用するjavascript
カスタマイズ>高度な設定>bodyタグ終了直前に出力するコード にそのまま貼り付けてください。


SWELLのjavascript記述はページごとに読み込ませる方法と
カスタマイズ>高度な設定で全体的に読み込ませる
方法と2種類あります。
カスタマイズ>高度な設定で全体的に読み込ませる場合は
以下のソースをそのままコピペでOKですが
ページ毎に読み込ませる(ページ下部のJS記入する部分)場合の注意
ページごとの記載はデフォルトは 先頭と最下部のscriptタグが自動で付加されますので
それを削ったものをコピペしてください。
めんどくさい方はそのままコピペしても良いのですが
その際は必ずその下部にあるチェックマークをお忘れなく。


このCSSとjavascriptのBLOGへの実装方法の考え方



cssの場合は
外観>テーマファイルエディター | 恒久的に使うならこっちに記載 |
またはカスタマイズ>追加CSS | 恒久的に使うならこっち記載その2 |
個別ページの下部のCSS記載欄 | 一時的にテストもしくはそのページだけしか使わないならこっち |



javascriptの場合は
カスタマイズ>高度な設定 | 恒久的に使うならこっち記載 |
個別ページの下部のJS記載欄 | 一時的にテストもしくはそのページだけしか使わないならこっち |
いずれにコピペしても正常に動作することを確認してます。
<script> var svRect=[]; var svTop=[]; var winY=window.pageYOffset; var winH=window.innerHeight; var adj=100; var sview=document.querySelectorAll('.slideview'); window.addEventListener('resize',function(){ winH=window.innerHeight; }); for (var i=0; i<sview.length;i++){ svRect.push(sview[i].getBoundingClientRect()); } for (var i=0; i<svRect.length; i++){ svTop.push(svRect[i].top+winY); } window.addEventListener('scroll',function(){ winY=window.pageYOffset; for (var i=0; i<sview.length; i++){ if(winY>svTop[i]-winH+adj){ sview[i].classList.add('on'); }else{ sview[i].classList.remove('on'); } } }); </script>
動作の意味としては目的の領域に画面が達したらadj分オフセットした位置にからエフェクト発動
指定のclassにon を追加してそのエフェクト仕込んだclassを発動させる的な動作してます。
教科書に載っているようなclassに名称追加して新しいclassを参照できるようにしようってやつです。
領域から外れると(バックスクロールなど)onを削除するのでまた元classで初期化されて
再度領域に達すると同じように繰り返しエフェクトが可能。
意味わからなくてもコピペして使えると思います。
このjavascriptとcssの定義を応用すればスクロールアクションに対する任意のCSS発火が
色々とできると思います。

