inviwe.jsが使えないから
AIと一緒に自作してみた

Posted:2025.03.21／Update:2025.03.22.15.56.31
screenshot https://github.com/al2co/inview-next

See the Pen
inview-next.js by al2co (@247-LLC)
on CodePen. 

.inview{
  opacity:0;
}

.inviewを透過ゼロの状態にしておくと綺麗にアニメーションします。

「なぜ.inviewをJSで最初からopacity:0;にしなかったのか？」
という質問が飛んできそうですが、これを最初からゼロ状態にしておくと、その要素の最終的な表示位置の確認が取れないからです。

Inview.jsとは

ある要素が画面内に入ったら発火するJqueryプラグイン。

使いやすく最新のJqueryに対応したinview-next.jsを公開しました

inview-next.jsのダウンロードはGitHubから
Animate.cssはこちらから

めんどいから結論から入りましょう。

画面内に入ったら最初の１回だけ発火。

<p class="inview" data-inview-in="animate__slideInLeft">最初の１回だけ動く</p>

画面内に入ったら毎回発火。

<p class="inview" data-inview-in="animate__slideInLeft" data-inview-out="animate__slideInLeft">画面内に入る度に動く</p>

詳しい使い方は下記。

パララックスとかで便利なInview

パララックスとか作る時によく使う。

animate.cssと組み合わせて、スクロールして画面内に入ったら発火させて、ゴリゴリ動かすとかそういう時。

しかし、Inviewには致命的な欠点がある

だいぶ古いプラグインだから、Jquery 1xでしか動かない。

これがめちゃくちゃ不便。すでに2xや3x導入済みのサイトとかでやろうとすると動かない。
今どき1xなんてほぼ使わない。

「Jquery Inviewの使い方★」とか解説してるサイトで「まずはJqueryを...」つって、2xや3xの導入を進めてる人たまにいるけどどうやってんだろうね。

 

それと、inviewはcss側でアニメーション時間とか、ディレイとかイージングとか諸々を調整できるんだけど、CSSで完結できないんだよね。

 

結局それとは別に「どの要素が入ったらinviewを発動」みたいなことをJavascriptで書く必要がある。

 

HTML側でアニメーションさせたい要素それぞれにanimate.css用のClass「animate__animated 」を付けておく

JS側で要素A画面内に入ったら、animate.css用のClass「animate__slideInUp」を付与...

JS側で要素B画面内に入ったら、animate.css用のClass「animate__slideInUp」を付与...

 

こんな感じで、いちいちJSで設定しなきゃいけない。

 

めんどくさいし、JavascriptやJqueryの知識が無いと結局使えない。

素人でも扱えるようにしたいよね。

不便なら作っちゃえばいいじゃない

原案をAI（Gemini）に伝えて作ってベースを作ってもらって、inviewにはなかった機能を追加したり改良してみた。

ちなみにワテクシはGemini派。Google様バンザイ。

Githubで公開中

ダウンロードはGitHubでよろ。名付けて、inview-next.js。

Jquery2xや3xに対応。Javascript、Jqueryの知識ゼロで導入可能。

inview-nextの特徴

今までのinviewだといちいち指定して書かなければ行けなかったJSを不要にした。

さらに自動でanimate.css用の初期Class「animate__animated 」を全ての.inviewの要素に付与。

使用方法

基本的な使い方は

<p class="inview" data-inview-in="animate__slideInLeft">画面内に入ったら動く</p>

これだけ。

動かしたい要素にclass="inview"を付けてオプションをData属性で決める。

data属性の解説

画面内に入ったらClassを付与

data-inview-in="animate__slideInLeft"

data-inview-inは画面内に入った時にその要素に付与するClassを指定する。

複数のClassの付与も可能

data-inview-in="animate__slideInLeft,hogehoge"

こんな感じで、カンマ区切りで複数の要素を追加することもできる。

画面内から出たらClassを削除

data-inview-out="animate__slideInLeft"

data-inview-outは画面外になった時に削除するClassを指定する。これもカンマ区切りで複数削除可。

画面内に入ったらanimate__slideInLeft付与
画面外に出たらanimate__slideInLeft削除
こんな感じで動くので要は「画面内にに入る度に発火」ということになる。

「最初の一度だけ発火したい」時はdata-inview-outに何も指定しなければ、Classが削除されず、そのまま維持されるから表示しっぱなしにできる。

offsetの設定も可能

 data-inview-offset="-300"

data-inview-offsetを指定することで、画面内に入ってから何px動かした時にという感じで指定できる。
でも正直offsetは一応できるけど、ほぼ使わないと思う。
だったらmarginとかpaddingで調整すればいいし。
いちいちHTML側でoffset指定するぐらいならCSSで一元管理した方が楽。

Category：AI
©al2co