CSSのみで実装するキャプションエフェクト 20 - NxWorld
自分用にひと通りの動きを一覧化したものが欲しかったので備忘録です。 画像ホバー時にエフェクト付きでキャプションを表示させる動きをCSSのみで実装する方法です。 キャプションとはしていますが、例えばブログであればリンク付きのアイキャッチに実装してマウスオーバー時に「もっと見る」のような文言を表示させたりといった用途にも使えます。 共通のHTML・CSS 一部をのぞき、今回はサンプルとして基本的に下記のようなHTMLを使用しています。 <figure> <img src="image.jpg" /> <figcaption> <h3>Caption Title</h3> <p>caption text here ...</p> </figcaption> </figure> CSSに関してはそれぞれ動きに関係する部分のみ記述しており、figcaption内にあるh3とpの見栄えに関するフォント
プラグイン不要!! jQueryのみで実装するスムーズなスクロール!!｜By U Zensen.
＊ はじめに!! どうも！ぴーすけと申します！！ 最近のWEBサイトでは当然のように実装されている機能として、スムーズなスクロール機能がありますよね。 このサイトでもページを下の方にスクロールすると画面下に「TOP」ボタンが表示され、そのボタンを押すと画面最上部へスムーズにスクロールされるようになっています。(PCのみ) 実装するには、jQueryのプラグイン「smoothScroll.js」などが有名ですが、今回は余計プラグインなどは使用せずに、jQueryだけで実装する方法をご紹介します!! ＊ なめらかなスクロール!!まず、単純に画面最上部へスクロールするようにするためには、以下のように記述するのが一番簡単な実装方法だと思います。 もちろんプラグインは不要で、jQueryだけ読み込める状態なら動作します。 まずはボタンを用意します。デザインは適宜調整してください。私の場合はfixed
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
