CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 - NxWorld
自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。 リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいというときに使えそうなエフェクトのサンプルです。 CSS3を多用しているので全ブラウザで実装できるわけではありませんが、いずれもCSSのみを使用して実装したもので、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類です。 共通のHTML・CSS サンプルはいずれも下記のようなHTMLを使用しており、CSSについても共通スタイルとしてそれぞれに指定しています。 CSSでは幅や高さを指定している部分もあるので、参考にされる際はこれらを自身の環境に合わせて調整してください。
【jQuery】レスポンシヴ対応のスライダー［flickity］は今後の定番になるでしょう。
高機能なスライドショーを実装するためのjQueryベースのプラグインと言えば、「FlexSlider」「CarouFredSel」「bxSlider」などが有名ですが、今後これらのプラグインに代わって定番になるであろう、秀逸なスクリプトが公開されていました。 はじめに。 ［flickity］と名付けられたコンテンツスライダーです。 他のスクリプトに代わって台頭するであろう、幾つかの理由があります。 ポイントは以下の点。 レスポンシヴ対応。 モバイル端末のタッチやフリック入力に対応。 スクリプト単体でも動く。 jQueryに依存しない。 デフォルトで［imagesLoaded］との併用が可能。 設定にはHTML5のデータ属性を利用することも可能。 スクリプト一式をダウンロードしてサイトに組み込み、任意のhtmlを記述するだけで動く点は初心者の方にも優しい仕様ですね。 また設定にHTML5のデ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
