パララックス効果(英: parallax effect)をご存知ですか。 別名「視差効果」とも呼ばれ、Webデザインで利用されている、エフェクトのひとつです。 複数のイメージ画像のスクロールするスピードを調整することで、奥行きのある立体的な空間を生み出す、アニメーションを得意としたエフェクトとなります。 今回は、海外デザインブログfavbulousで、比較的新しく公開された、パララックス効果を利用したWebサイトを14個まとめたエントリー「14 Impressive Parallax Scrolling Website Showcase Inspiration」が公開されていたので、こちらを中心に、パララックス効果全般についてまとめています。 一緒にパララックス効果に使える、無料プラグインなどもまとめていますので、Webサイト制作に活用してみてはいかがでしょう。 詳細は以下から。 パララッ
基本、Web系の記事メモです。内容は他力本願ですいません。綺麗にカテゴリとかまとめる気はないです。アーカイブから見た方が見やすいかも〜w パララックス効果を用いたコンテンツを作りたい! パララックス効果を用いたページが流行って(?)ますよね。 作ってみたいと思ったので色々探ったページをメモ 【まずはデザイン(見た目)の参考】 Nike Better World http://www.nikebetterworld.jp/ ACTIVATE http://activatedrinks.com/#/activate Manufacture d’Essai http://www.manufacturedessai.it/it/ iutopi - Creative Land / Branding, Graphic & Web Design | | | | | | | Mauro Macch
jAniは背景画像をアニメーションさせるjQueryのプラグインです。 通常であれば画像をアニメーションさせるにはアニメーションGIFを使用するのが一般的ですが、256色しか使用できないという制限もあります。 このプラグインを使用すると、アニメーションGIFの制約がなくなるため綺麗なアニメが制作可能です。 まずはデモをご覧下さい。 jAni jQuery Plugin Demo 用意するのは縦長の画像一枚のみ 実際に必要な画像は縦長の画像一枚のみです。 設定でアニメーション速度(画像の切替速度)を変更する事ができます。 設置の仕方 設定も簡単にできるようです。 まずはjsを読み込みます。 次にCSSを設定します。 htmlに表示する位置をdivで指定します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く