Animated Text and Icon Menu with jQuery | Codrops
Today we want to show you how to create a slick menu with a nice animation feature on hover. The idea is to make some elements slide out, change and animate the background color of the item and then slide the elements back in with a different color. Today we want to show you how to create a slick menu with a nice animation feature on hover. The idea is to make some elements slide out, change and a
[JS]スクロールに加速やバウンドなど30以上のエフェクトを与え、位置補正もできるスクリプト -AnimateScroll
「Easing Effect」には3つのデモがあります。 「easeInOutBack」一旦逆にスクロールし、目的地をちょっとだけ通りすぎて戻って到着。 「easeOutBounce」目的地につくとバウンドで到着。 「easeOutElastic」はeaseInOutBackを素早くした感じです。 AnimateScrollの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトをhead内に記述します。 <head> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="animatescroll.js"> </head> Step 2: HTML（スクロール先の設定） スクロール先の要素にidやclassを付与します。 ※ペー
CSSのtransformでクルクル回転するパネルのサンプル
CSSの【transform:rotate()】を使った回転するパネルのサンプルを作ってみました。 手法としては比較的知ってる人も多いかもしれませんが自分用備忘録として。 回転変形おもしろーいベースとなるHTMLはこちら。 <p><a href="#">Sample Box 1</a></p> はい、1行ソースです、すみません。単純に【p】の中に【a】を内包しているだけ。これに p{ display:block; margin:10px; width:100px; height:100px; } a{ display:block; line-height:100px; text-decoration:none; text-align:center; color:#fff; border-radius:6px; background-color:#44f; transition:0.3s l
味気ないウェブデザインに動きを加えて魅力的にする5つのデザインテクニック
Techniques for Creating Motion in Web Design 下記は各ポイントを意訳したものです。 魅力的なウェブページをつくるポイントはモーション モーションを生み出す4つの方法 1. 構成 2. フレームと配置 3. 編集 4. エフェクト 5. テキスト 魅力的なウェブページをつくるポイントはモーション 誰もが魅力的なウェブページを作ることを望みます、そのゴールを達成する最も効果的な手段は「Motion: 動き」を加えることです。これはビデオやアニメーションだけのことではありません、素晴らしいデザイナーはビデオやアニメーション無しで「Motion: 動き」を生み出すことができます。もちろん、ビデオやアニメーションが効果的な手段ではない、ということではありません。 ここでは、ビデオやアニメーションを使用しないで、ウェブページを魅力的にする「Motion: 動
CSSアニメーションの初歩をおさらい
最近はアニメーションをFlashではなく、CSSやJavaScriptで実装されているサイトをよく見るようになりました。 今回は復習も兼ねて、CSSで動きを付けられるanimationとtransitionのおさらいをしてみたいと思います。 ベンダープレフィックスをつけないと動かないブラウザもありますが、省略します。 animationとtransitionの違い どう違うのかなと思って調べたのですが、いまいちわからなかったので、違いを並べてみました。 animation ループ可能 keyframesで細かい設定が可能 ウインドウ読み込んで即実行が可能 transition ループがない 自然に最初の状態に戻る hoverなどのキッカケを与えてあげないと動かない JS使えば違うかもしれないですが、一応こんな印象です。違ったらすみません。 それぞれを翻訳すると、animationはそのまま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
制作案件に使えば注目度アップ！CSS3を使った驚きのアニメーション表現
