CSS 要素の伸縮加工とアニメーション 画像や要素をCSSで伸縮して加工するサンプルです。 伸縮の開始位置やアニメーションへの応用を実装してみました。 通常の画像はこちら CSSで縦に要素を伸ばすとこのようになります。 [[ .de... 2021-12-16 16:33:17
Google GA4を導入してみた 巷ではGA4へ移行の話を多く見かけてきたので、導入してみた時の手順の備忘録です。 この記事は、筆者が実施した時のメモ書きですので、最新のGA4移行の手順は公式な手順をご確認ください。掲載された情報において正しく動かない場合でも責任を負... 2021-12-11 21:15:02
JS 値を一定期間保持してABテスト cookieを利用して一定の時間、同じ人に同じものを表示して、別のコンテンツをだし分けるサンプルです。 このサンプルでは1日同じアルファベットを表示するサンプルです。 初回のアクセスでA・B・Cのどれかを表示して、その値をブラウザのcookieに保存します。... 2021-12-07 11:29:07
wget コマンド wgetをインストールする [[brew install wget <p class=down >URLのファイルをダウンロードする</p> <pre>[[wget https://***.co... 2021-07-15 00:35:04
SCSS 開発の準備 SCSSの開発としてgulpを使用したサンプルです。 CSSを効率的に記述する手法としてSCSSがあります。 エディタで保存するたびにCSSを生成し、開発を円滑に行います。 まずnode.jsをインストールしま... 2021-06-18 00:12:05
JS スマホを振って音を出す スマホを振った時の加速度を検知して、音を鳴らすJSのサンプル。 このサンプルはスマホで確認できます。 iOSの場合は、一度加速度センサーの許可をするボタンがでるので、クリックしてください。 スマホを振ると、加速... 2021-06-05 12:48:41
GSAP アニメーションライブラリ入門 アニメーションライブラリのGSAPを使った初めての方向けのサンプルです。 GSAPというメジャーでかなり機能が充実したアニメーションライブラリの導入のサンプルです。 処理も軽く、読み込みの早い、高機能なライブラリです。 以下... 2021-06-04 00:14:00
CSS ダークモードをCSSで出し分け OSでダークモードの時、CSSで検知し、スタイルを変更するサンプルです。 OSで暗いところ用のダークなモードの切り替えは、だいぶ浸透してきました。 サイト側でも個別でダークモードを用意していたサイトもあるかもしれません。... 2021-06-03 00:38:01
JS サウンドビジュアライザー 音を使ったビジュアル表現のサンプルです。 jQueryとhowler.jsを使ったサウンドビジュアライザーのサンプルコードの備忘録です。 音のスピードや音量調整も簡易的に付けています。 BGM ra... 2021-06-02 00:56:29
JS 繋げて処理を実行 functionなどの処理を複数続けて値を渡して実行したいときのサンプルです。 数珠繋ぎ(チェーン)でデータを渡して、処理をしたい時、Promiseのthenメソッドが便利です。 最初にPromiseを生成することで、thenで繋げて処理をすることが... 2021-05-31 01:33:48