テキストフィールドの作成・出力
プラグイン「Advanced Custom Fields」を使わずに、カスタムフィールドを設置して、入力内容を保存。そして、表示させるまでのスニペットを紹介します。 目次テキストフィールドの作成add_meta_box( …
JavaScriptのIntersection Observer APIでスクロールインするとタイピング風アニメーションでテキスト表示
ウェブのリッチな表現としてスクロールに応じたエフェクトがあります。これまでJavaScriptの .addEventListener の scrollイベントで実装していましたが、Intersection Observe …
JavaScriptの.split()で文字を分割してスクロールインすると1文字づつゆっくり浮き出る
LPのような各ブロックで訴求や内容を変える場合、邪魔にならない程度のアニメーションをつけることで、ユーザーの視線誘導が可能です。 この記事では、ヒーローエリア以降にある各セクションのタイトルを「少し目立たせたい場合」に使 …
JavaScriptの.lengthで要素に中身があるかを判別して、中身がある場合はアコーディオンで表示
普通にHTMLでベタ書きができるなら、アコーディオンにする要素を個別に指定できます。ですが、要素の個数が多いと一個一個目視でclass名を付与する必要があり、面倒です。 なので、この記事ではJavaScriptのループを …
JavaScriptの.sessionStorageでタブのメニューにNewをつけてブラウザを閉じるまでNewを非表示
タブメニューは、限られたスペースで複数のコンテンツを表示することができますが、クリックしないとその中身を見ることができません。 そんな時、そのメニューを目立たせてあげると良いですが、目立たせが強過ぎてもいけないので、なか …
JavaScriptの.prepend()でページ遷移時に上から下に落ちるようにしてオーバーレイを表示
Webページのページ遷移時アニメーションを、ネイティブなJavaScriptで作ります。 アニメーションは、設置するページやアイデアに応じて、この記事を参考に活用してみてください。 目次.prepend()上から下に落ち …
JavaScriptの.setTimeout()ボタンをクリックすると形が変わってローディング
ボタンは多く使われるUIで、今やCSSだけでいろんな表現ができてしまいます。 そんなボタンに JavaScriptでアニメーションを少し加えてあげると、また違った動きが表現できるので、覚えておくと便利です。 この記事では …
JavaScriptの.setTimeout()でボタンをクリックするとローディングの表示
ボタンは、ユーザーのタッチポイントになるUIです。 クリック前に「ページが遷移するリンク」や「ダウンロード」など動きが想像できる見た目であることが望ましいですが、クリックした後や最中でも、ユーザーがその動きを理解できれば …
JavaScriptのYouTube Player APIで初回アクセス時にYouTube動画をモーダルで自動再生
モーダルのUIと、YouTube Player APIを掛け合わせて初回のみ表示させるスニペットを作ってみました。 モーダル自体、ユーザー本意のUIでないので気をつけて使う必要がありますが、初回で動画を見せる方法を検討し …
JavaScriptの.querySelectorAll()で水平方向メニューのタブ
よく見かけるタブメニューは、ブロックの上部にメニュー。その下にコンテンツがある形態が多いですが、この記事では、縦ではなく左にメニュー。右にコンテンツで横の水平方向のタブをJavaScriptを使って作っています。 コード …
