CSS（CSS3）のみで、自動再生／オートスライド（スクロール）する画像ギャラリー作成方法｜BLACKFLAG
SCRIPT無しでCSS3のみでアニメーション動作を実装させるサンプル。 今回は自動でスライド（スクロール）する画像ギャラリーの紹介。 初めに完成サンプルから。 ※動作環境はWebkitブラウザのSafariやChromeのみです！ CSS3 AUTO SLIDE GALLERY メイン画像と併せて、下位置にサムネイル画像を並べて、 オートスタート形式で順々に画像がスライドします。 現在表示している画像のサムネイルは、 透過度が100%になり、通常サイズよりも1.2倍の大きさに拡大し、 ドロップシャドウ（白）が付けます。 ※画像ではなくCSS3でのドロップシャドウ。 全体構成について、まずはHTMLソースから。 メイン画像とサムネイル画像は別々のリストで形成しています。 ◆HTML <div id="slidewrap"> <div id="slidemask"> <ul id="phot
jQueryでコンテンツ要素を点滅させる方法｜BLACKFLAG
Webページ上のテキストや画像などの要素を点滅させるには、 古いものでは＜blink＞タグだったり、CSSでの「text-decoration:blink;」などがあったりしますが タグ自体が廃止タグだったり、ブラウザが対応していなかったりであまり使い物になりません。 そこで、テキストや画像などのコンテンツ要素を jQueryで簡単に点滅させる方法について自分用メモ程度に紹介してみます。 jQueryで点滅 jQueryでの点滅はいろいろやり方がありますが シンプルな方法として、対象物に対してfadeInとfadeOutを続けて指定することで 簡単に実現することができます。 例として、画像＜img＞タグを点滅させる場合のスクリプトは以下のようになります。 ※今回はHTML／CSSはあまり重要でないので割愛します。 ◆SCRIPT <script type="text/javascript"
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
