[JS]ハーフトーンのアニメーションが素敵なナビゲーション

jQueryとCSS3を使用して、ハーフトーンの素敵なアニメーションを付加情報として表示するナビゲーションを実装するチュートリアルをTutorialzineから紹介します。

デモのキャプチャ

Halftone Navigation Menu With jQuery & CSS3
デモページ

ハーフトーンとは元記事にあるようにWikipediaから引用すると、「ハーフトーン(英: Halftone)とは、グレイスケールやカラーの画像を限られた色数(例えば、白い紙上の黒い点など)の小さな点のパターンで表すことで印刷可能にしたものである。」で、これをアニメーションで表示しています。
網点(ハーフトーン) -Wikipedia

デモはCSS3に対応したブラウザで期待通りの動作をし、またスクリプトがオフでもナビゲーション機能を損なわずに実装されています。

ナビゲーションの各ラベルに対応しているハーフトーンのアイコンは一つのドットを描いた1枚の画像で生成されており、オリジナルのアイコンに変更することも可能です。

sponsors

top of page

©2024 coliss