Menu/Prof
翻訳
スズキマコト
自由人
元々は楽器屋のギター兄ちゃん。
趣味でプログラミングしてるうちに
本職になってしまった人。

過去に喋っていた言語
c pascal Assembler
perl PHP Python Ruby など
javascriptなどは都度必要に応じて。
最近Mac買ったのでswift勉強してます。

体ぶっ壊して死にかけたので人生RESET中。
\ ポイント最大10倍! /

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

contents

javascriptとcssだけで動きます

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

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

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

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

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

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

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

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

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

びっくりな助手

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

管理人

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

笑顔な助手

一応上下左右に

笑顔な助手

動きます

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

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

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

\最大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-MOVE360度クルリと回転する
FLAT-MOVE水平から上に立ち上がるように表示 Y軸はbottom基準で動作
FLAT-TOP-MOVE水平から下にめくれるように表示 Y軸 top 基準で動作
MFADEスライドせずにふわっと出現する
border指定場所の中心から左右に伸びるラインを引く
borderl指定場所の左端から伸びるラインを引く
INBKborder*のライン幅を文字列と同等にするならこれを一緒に宣言(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発火が

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

シェアしてくれると喜びます
  • URLをコピーしました!
  • URLをコピーしました!
contents