Javascript

WEB

GSAPのScrollTriggerを使ったスクロールアニメーションの動作を一度きりにするプロパティ

最近積みそうになったのでメモ書き。上記について調べると大体は下記のプロパティに対する解説が主な印象があります。 toggleActions 値形式:文字列デフォルト値:play none none none左から順番にonEnter、onL...
WEB

JavaScriptをCSSのメディアクエリのような感覚で処理を分ける

CSSのメディアクエリのようにJavaScriptの処理を分けたいという要件は割とよく出てきます。そんなときによく使うコードは以下。 window.matchMedia
WEB

ウィンドウの高さを取得後に要素へ代入する

よく使うメモ。 スマートフォン用に高さ 100vh とか使いたいところですが、CSSによっては適切に高さが設定されずに 0 となってしまうのでJavascriptで対応してしまうと考える手間が省けるのでお薦め。
WEB

ウィンドウサイズで画像の表示をJavascriptで切り替える

最近よく利用するのでメモがてら。 以下コード入れて、imgにクラス .js-resp 付与すると画面サイズで切り替えます。 画像にはファイル名の後ろに _pc と _sp と命名すればOK、HTMLに記述する場合には _pc の方のみを記述...
WEB

フルスクリーン表示からスクロール後にナビなど表示させたい場合のTip

ファーストビューがフルスクリーン表示されていて、スクロール後に固定ナビなどを表示したい際などを想定。 スクリプトは主にスマートフォンサイトを想定していますが、PC表示でも問題は無いはず。 用途に応じて適宜調整すれば良いと思います。 更に、ト...
WEB

Slick.js スマートフォン表示時だけ適応させたい。

丁度使う機会があったのでメモ。
WEB

packerで圧縮されたJavaScriptを元に戻す

防備録 > コンテンツ提供が終わってしまったためリンク削除 元に戻すだけだとインデントの無い読みづらいコードになっているので、以下併用して整形させると良い。
WEB

iPhoneやAndroid以外で閲覧した場合に電話番号リンクを無効にする

WEB

ウィンドウリサイズ操作後に処理を実行させる

WEB

Slick.js レスポンシブ時、特定幅以下の場合に動作をストップさせる。