ページ背景をフルスクリーンのスライドショーにするjQueryプラグインを作ってみた。（CSS3のアニメーション機能のみで実現）
CSSのみでエフェクト・アニメーションを実装する方法 | LIG LIBRARY | 株式会社LIG
ページ背景をフルスクリーンのスライドショーにするjQueryプラグインを作ってみた。（CSS3のアニメーション機能のみで実現）
スクロールして要素を個別にアニメーション表示しパララックスにも使える「scrollReveal.js」
2、3年前に流行り初めた、Webページをスクロールすることで背景や各要素がアニメーションしながら表示されたり、視差効果を伴って現れる、「パララックス」デザイン。 パララックス効果やスクロールアニメーションを実現できるモジュールはいくつかあるのですが、その中でも「scrollReveal.js」は軽量かつ単体で利用可能で、HTMLタグにdata-sr属性を追加して、その値に時間、アニメーションの種類、表示位置などを指定することで豊富なエフェクトが簡単に定義できるので、試しに使ってみました。
scrollReveal.js - data要素で制御するシンプルなアニメーションライブラリ MOONGIFT
CSS3やJavaScriptによってWebベースのアニメーションは実装しやすくはなっていますが、だからといって誰でも簡単にできるものではありません。単純に右から左へ動かすならまだしも、雰囲気のいい感じに流れていくとなれば細かな制御が必要になります。 そんなアニメーションを作るのは大変ですが、固定的な動きであればライブラリを探してみるのも良さそうです。今回は下から上に流れてくるアニメーションライブラリscrollReveal.jsを紹介します。 何はともあれまずは動画で見てください。 スクロールすると下から上にオブジェクトがアニメーションして配置についていきます。いい感じでしょう？ 使い方としては下のようなHTMLを記述します。 <div class="column"> <div class="block block-1x block-slate" data-scrollreveal="e
動画素材, AEテンプレート, 音楽素材, 動画編集の為のロイヤリティフリー素材 - モーションエレメンツ
探してるスタイルがすぐ見つかる 動画クリエイターのためのロイヤリティフリーストック動画・音楽・動画テンプレート
[CSS]コピペでOK！画像のホバー時用のかっこいい新しいエフェクトのまとめ
HTML 各デモのベースとなるHTMLです。 div要素のclassを変更して利用します。 <div class="pic"> <img src="image.jpg"> </div> 各デモで共通で使用するスタイルです。 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body { background: #333; } .pic { border: 10px solid #fff; float: left; height: 300px; width: 300px; margin: 20px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px #111
ホタルの光をイメージさせるようなエフェクトを実装するjQueryプラグイン・firefly - かちびと.net
ちょっと適切なタイトルが思い浮かばな かったのですが、指定した要素を沢山 配置してアニメーションでランダムで 移動させる、というjQueryプラグイン。 デモでは、よく見かけるパーティクルで 作成したホタルっぽいエフェクトを用意 しています。 タイトルじゃ良く分からないと思いますのでデモをご覧下さい。 itsfireflyで使われているエフェクトのオマージュみたいですね。ホタルっぽいエフェクトです。 Canvasとかじゃなくて、画像を直に指定してランダム表示させてアニメーションで動かすプラグイン、みたいな感じ。cssのpositonとz-indexで背景化しています。画像を変えれば違った表現も出来ますねー。プラグインも軽量です。 コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jque
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
