@CyberMameCANです。
jQueryが良い感じです！
もっともっと極めて行きたいものですな〜。
でも今日はCSS3のみです。
横からぴょ～んと出てくる動き、jQueryなどを利用しなければ実現できないと思っていたのですが、
今ではCSS3で出来てしまうのですね。
（角丸とかドロップシャドウだけではなかった・・・勉強不足。）
しかもJavaScriptより滑らかな動きな気がします。
下記コードはSafari（Chrome）限定です。
jQueryなどと一緒に使えば、少し遅らして出てくるっていうのも出来るかもですね。
サンプルコードです。
HTML
|
1 2 3 4 5 6 7 8 |
<div class="content" id="home"> <h1> 左より<br /> ひょこっと出てきます。<br /> Safari（Chrome)限定です。 </h1> <p><img src="images/amakusa.jpg" width="300" /></p> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
@-webkit-keyframes home { 0% { left: -500px; opacity: 0; } 25% { left: -500px; opacity: 0; } 50% { left: 10px; opacity: 1; } 75% { left: -5px; } 100% { left: 0; } } #home { -webkit-animation-name: home; -webkit-animation-duration: .75s; -webkit-animation-iteration-count: 1; } #home { padding-top: 50px; position: relative; } #home h2 { font-size: 100px; line-height: 90px; letter-spacing: -10px; text-transform: lowercase; color: #222222; margin-bottom: 20px; } |
こういうブログもありました。
- スクロールしたら画像が下からふぉあ〜んと出てくる効果を
- ランダムに文字や画像をパラパラ表示する、jQueryで。
- Flashのように文字を繰り返し表示、jQueryで
- Parallaxをやってみましたよ、jQueryを使って
- 画像拡大プラグイン ZoomIt + jQuery
人気のあるブログ：
- 新しいgemのアップデート方法（rubygems-update）
- Coda2でscssを使うときのお供にcompassをどうぞ。
- NginxをSSL付きで動かすために設定したこと
- bashでUTF-8に設定して日本語表示したり使ったり。Emacsでも。
- SIM無しiPhone 3Gで初めて脱獄をやってみた
