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

2022 6/25

contents

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

7500万点の素材が無料

javascriptとcssだけで動きます

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

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

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

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

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

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

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

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

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

びっくりな助手

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

管理人

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

笑顔な助手

一応上下左右に

笑顔な助手

動きます

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

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

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

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

¥7,070 （2023/02/01 18:58時点 | Amazon調べ）

＼最大10%ポイントアップ！／

amazon

＼お買い物マラソン開催中！／

楽天市場

＼ポイント5%還元！／

Yahooショッピング

ポチップ

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

＼最大10%ポイントアップ！／

amazon

＼お買い物マラソン開催中！／

楽天市場

＼ポイント5%還元！／

Yahooショッピング

ポチップ

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

¥25,492 （2023/02/02 18:22時点 | Amazon調べ）

＼最大10%ポイントアップ！／

amazon

＼お買い物マラソン開催中！／

楽天市場

＼ポイント5%還元！／

Yahooショッピング

ポチップ

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

リスト
リスト
リスト

なんでもできるぜ

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

@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発火が

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

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

javascriptとcssだけで動きます

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

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

なんでもできるぜ

つくりは簡単です。

使用するCSS

使用するjavascript

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

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

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