JavaScript

現在何パーセントまで読み込まれているかを表示するローディングを実装してみる

ローディング時の読み込み量を取得し、数値化する方法

参考記事

Javascript 連想配列(オブジェクト)をforEachでループさせたい。

Javascriptって2次元の連想配列できないの？

「for-in」でループ処理をする方法、「forEa ...

jQueryプラグインのslick.jsで要素がブラウザの画面内（ビューポート）に入ったときにautoplayを開始する方法を紹介します。

どうやるか

デフォルトではオプションをautoplay:true;に設定した上で、s ...

自分がよく使うload系のイベントをまとめておきます。

DOMContentLoadedイベントとloadイベントの違い

HTMLをすべて読み込んだら実行される処理

DOMContentLoadedイベントはDO ...

anime.jsのmorfingを使用して流体シェイプがうにょにょ動くアニメーションのサンプルを作成してみました。下記の記事を参考にさせていただきました。

2019年流行の流体シェイプでポートフォリオサイトを作ってみる。

下記の記事を参考にして、waypoint.jsでスクロールに連動してクラス名を追加し、さらにmobile ON/OFFをつけるカスタマイズをしてみました。今回はjQueryではなくJavaScript版を使用しています。

...

アニメーション、したいですよね。いまウェブサイトにアニメーションを実装するのに何がいいのか？を考えてみました。

必須で実現したいこと

個人的には以下です。

手軽に導入できる
スクロールの可

anime.jsを使ってSVGロゴを線画で描画し、最後に色を塗りつぶすというサンプルを作成したのでご紹介します。

デモ

こちらが完成したデモです。

See the Pen
NWWLJep by 荒井 潔子 ...

JavaScriptファイルのリンクは、<header>に書くのか？</body>の直前に書くのか？読み込み速度を考慮した上での結論は以下です。

結論

<header></heade ...