【swellカスタマイズ】javascript/cssだけで変な動きのあるページを作る

contents

Amazon>>お得な最新のタイムセール情報はここ

7500万点の素材が無料

Wi-Fi6対応　最新5Gドコモホームルーター！

javascriptとcssだけで動きます

以前にこのBLOGにご来訪いただいている場合ブラウザのキャッシュで

エフェクトがうまく発動しない可能性あります。

その場合はブラウザキャッシュを削除してみてください。

完全に面白半分なんですがjavascriptとcssだけで記述しているので jQueryは使ってません

前後左右＆ふわっと出現効果で対象動くのですがあんまりやるとくどいっす。

この記事は実験のためやたらエフェクトかかってますｗいらつきながらどうぞ笑

普通のスクロールでCSSが発火して逆スクロールして再度スクロールすると再発火可能。

スクロールを動かしたり戻したりしてみてください。

やろうと思えばどの部分にもCSSで手軽に装飾できるのが楽しいSWELL

javascriptとcssだけで動きのあるページを作ります
swell 追加cssクラスを活用します

びっくりな助手

このページは面白がって色々やってますが

管理人

実際のページはこういうのやりすぎるとくどい。

笑顔な助手

一応上下左右に

笑顔な助手

動きます

エフェクトが効く部分はゆっくりとスクロールするとエフェクトが見えませんので

その場合はスクロールバックすると再度エフェクトの確認ができます。

ほぼ全てのブロックと単独行に自在に適用可能

ロジクールワイヤレスマウストラックボール無線 M575S Bluetooth Unifying 5ボタントラックボールマウスワイヤレスマウス windows mac iPad 電池寿命最大24ケ月 M575 ブラック国内正規品

¥6,360 （2023/05/23 13:29時点 | Amazon調べ）

ポチップ

モバイルモニター 4k 14インチ GMKtec モバイルディスプレイ Adobe100％色域10タッチパネル IPS液晶 USB Type-C CNCフルメタル軽量ミニPC/ミニHDMI/PS5/XBOX/スイッチ/PC対応 PSE認証取得

ポチップ

Anker PowerExpand 5-in-1 Thunderbolt 4 Mini Dock ドッキングステーション 85W出力 8K対応 Thunderbolt 4 対応 USB-Cポート USB 3.1 Gen 2 USB-Aポート搭載

¥29,990 （2023/05/27 07:20時点 | Amazon調べ）

ポチップ

ここは段落ブロックです。文章をここに入力してください。

リスト
リスト
リスト

なんでもできるぜ

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

画像ギャラリーの一枚一枚にも個別で

つくりは簡単です。

動きをつけたいブロックでもしくはPブロック単位で「高度な設定」＞追加CSSクラスを使用してます。

こんな感じ

必ず初期化クラスの slideview とセットで宣言してください。

スクロールできます

slideview	初期化 class定義
UU-MOVE	上から下に
DD-MOVE	下から上に
LL-MOVE	左から右に
RR-MOVE	右から左に
FF-MOVE	360度クルリと回転する
FLAT-MOVE	水平から上に立ち上がるように表示 Y軸はbottom基準で動作
FLAT-TOP-MOVE	水平から下にめくれるように表示 Y軸 top 基準で動作
MFADE	スライドせずにふわっと出現する
border	指定場所の中心から左右に伸びるラインを引く
borderl	指定場所の左端から伸びるラインを引く
INBK	border*のライン幅を文字列と同等にするならこれを一緒に宣言（display: inline-block;）

これが border の動き方

これが borderl の動き方。

slideview と **-MOVEまたは border* の各classを組み合わせて宣言します。

宣言する順番はどちらが先でも構いません。必ずセットで宣言を。

**-MOVE と border は併用可能。

こんなことも可能(INBK FF-MOVE border slideview)

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

.ofade
{
animation: fade forwards 1s;
}

@keyframes fade{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
 }
}

.tsL {
  animation: slideInL forwards 0.5s;
}

@keyframes slideInL {
  0% {
	  opacity: 0;
	  transform: translateX(-140px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.tsR {
  animation: slideInR forwards 0.5s;
}
.tsRR {
  animation: slideInR forwards 2s;
}

@keyframes slideInR {
  0% {
    opacity: 0;
    transform: translateX(140px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}


.tsU {
  animation: slideInU forwards 0.5s;
}

@keyframes slideInU {
	0% {
		opacity: 0;
		transform: translateY(-140px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.tsD {
	animation: slideInD forwards 0.5s;
}

@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 2s 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 2s linear forwards;
}

@keyframes border_anim {
  0%{
    width: 0%;
  }
  100%{
    width: 100%;
  }
}

各クラスの定義詳細

アニメーションエフェクトを定義しています。以下に各クラスの機能を説明します：

slideview、LL-MOVE、RR-MOVE、UU-MOVE、DD-MOVE、MFADE、FF-MOVE: これらのクラスは初期状態では透明度が0（つまり完全に透明）と定義されています。つまり、これらのクラスが適用された要素は初期状態では見えません。
FLAT-MOVEとFLAT-TOP-MOVE: これらのクラスは3D回転アニメーションを定義しています。初期状態では要素は-90度回転しています。”on”クラスが追加されると、要素は0度（元の位置）に回転します。これにより要素がフラットから立ち上がるように見えます。
FF-MOVE: このクラスはフェードインと回転アニメーションを定義します。”on”クラスが追加されると、要素は完全に見えるようになり、360度回転します。
RR-MOVE.on、LL-MOVE.on、UU-MOVE.on、DD-MOVE.on: これらのクラスはスライドインアニメーションを定義します。”on”クラスが追加されると、要素は指定された方向からスライドインします。
MFADE.on、ofade: これらのクラスはフェードインアニメーションを定義します。”on”クラスが追加されると、要素は完全に見えるようになります。
tsL、tsR、tsU、tsD: これらのクラスはスライドインアニメーションを定義します。要素は指定された方向からスライドインします。
INBK: このクラスは要素をインラインブロックとして表示します。
borderとborderl: これらのクラスは境界線アニメーションを定義します。”on”クラスが追加されると、要素の下部に境界線が表示され、左から右へと又は中央から左右に広がります。

使用するjavascript

カスタマイズ＞高度な設定＞bodyタグ終了直前に出力するコードにそのまま貼り付けてください。

SWELLのjavascript記述はページごとに読み込ませる方法と

カスタマイズ＞高度な設定で全体的に読み込ませる

方法と2種類あります。

カスタマイズ＞高度な設定で全体的に読み込ませる場合は

以下のソースをそのままコピペでOKですが

ページ毎に読み込ませる（ページ下部のJS記入する部分）場合の注意

ページごとの記載はデフォルトは先頭と最下部のscriptタグが自動で付加されますので

それを削ったものをコピペしてください。

めんどくさい方はそのままコピペしても良いのですが

その際は必ずその下部にあるチェックマークをお忘れなく。

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

笑顔な助手

cssの場合は

スクロールできます

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

笑顔な助手

javascriptの場合は

スクロールできます

カスタマイズ＞高度な設定	恒久的に使うならこっち記載
個別ページの下部のJS記載欄	一時的にテストもしくはそのページだけしか使わないならこっち

いずれにコピペしても正常に動作することを確認してます。

<script>
let svRect = [];
let svTop = [];
let winY = window.pageYOffset;
let winH = window.innerHeight;
const adj = 100;
const sview = document.querySelectorAll('.slideview');

window.addEventListener('resize', function() {
  winH = window.innerHeight;
});

function updateView() {
  svRect = [];
  svTop = [];
  for (let i = 0; i < sview.length; i++) {
    svRect.push(sview[i].getBoundingClientRect());
    svTop.push(svRect[i].top + winY);
  }
}

function updateClass() {
  for (let i = 0; i < sview.length; i++) {
    if (winY > svTop[i] - winH + adj) {
      sview[i].classList.add('on');
    } else {
      sview[i].classList.remove('on');
    }
  }
}

window.addEventListener('scroll', function() {
  winY = window.pageYOffset;
  updateClass();
});

updateView();
</script>

テクニカルに説明

このJavaScriptのコードはスクロールアニメーション効果に使われています。クラス名.slideviewがついた要素に適用されます。

以下に詳細な説明をします;)

svRect と svTop は配列で、それぞれ.slideview要素のバウンディングボックス（要素の位置やサイズ情報）と要素の上辺の位置を格納します。
winY は現在のドキュメントの垂直方向のスクロール量（ピクセル単位）を格納します。最初は window.pageYOffset に設定されています。
winH はウィンドウ（ビューポート）の高さ（ピクセル単位）を格納します。最初は window.innerHeight に設定されています。
adj は調整用の数値で、スクロール位置が.slideview要素のどの部分に達したらアニメーションを開始するかを決定します。
sview はページ上の全ての.slideview要素を格納したNodeListです。
ページがリサイズされるときに発火するイベントリスナーが設定されています。これはウィンドウの高さwinHを更新するためです。
updateView 関数はページ上の全ての.slideview要素のバウンディングボックスと上辺の位置を更新します。
updateClass 関数はスクロール位置に応じて.slideview要素にonクラスを追加または削除します。スクロール位置が要素の上辺より下で、かつ要素の下辺より上にある場合（つまり要素がビューポート内に入ったとき）、onクラスが追加されます。それ以外の場合はonクラスが削除されます。
スクロールするたびに発火するイベントリスナーが設定されています。これはスクロール位置winYを更新し、updateClass関数を呼び出すためです。
最後に、ページのロード時にupdateView関数が呼び出されます。

このコードを使うと、ユーザーがスクロールして.slideview要素がビューポートに入るたびに、その要素にonクラスが追加されます。これによりCSSアニメーションを発動することができます（例えば、.slideview.onに対して特定のアニメーションを設定するなど）。

動作の意味としては目的の領域に画面が達したらadj分オフセットした位置にからエフェクト発動

指定のclassにon を追加してそのエフェクト仕込んだclassを発動させる的な動作してます。

教科書に載っているようなclassに名称追加して新しいclassを参照できるようにしようってやつです。

領域から外れると（バックスクロールなど）onを削除するのでまた元classで初期化されて

再度領域に達すると同じように繰り返しエフェクトが可能。

意味わからなくてもコピペして使えると思います。

このjavascriptとcssの定義を応用すればスクロールアクションに対する任意のCSS発火が

色々とできると思います。