イメージスライダーを魅力的に！コピペ実装できるHTMLスニペット24個まとめ - PhotoshopVIP

2017/04/10 59 users 案件 ウェブサイト ウェブサイト制作 ユーザー コンテンツ

ウェブサイトでも使われることが多く、写真イメージをより魅力的に見せることができるイメージスライダー。 ヒーローヘッダー として利用されることも多く、イメージスライダーを効果的に利用することで、ウェブサイトを訪れたユーザーにより魅力的にコンテンツを見せることもできます。 今回は、 ウェブサイト制作で利用したいイメージスライダー をまとめてご紹介します。どんな案件にも対応できる万能コードから、ユーザー... 続きを読む

スワイプ操作に対応したイメージスライダーを実装するスクリプト・Swiper - かちびと.net

2012/12/21 61 users スワイプ操作 net イメー 備忘録 スライダー

タッチデバイスのスワイプ操作に 対応したイメージスライダーの ご紹介。ありそうであまり見かけ ないので一応備忘録・・・イメー ジスライダーと書きましたが、 基本何でもいけるみたいです。 スワイプ操作に対応したスライダーです。 Swiper 実機でも確認したところ、問題なく動作しました。動作も軽量でなかなかいい感じです。 スライダーの中にスライダーをネストする事も出来ます。縦やグループごとにスライド... 続きを読む

シンプルなパララックス効果付きのイメージスライダーを実装するjQueryプラグイン・jQuery Destaque - かちびと.net

2012/10/11 44 users net やり場 jQueryプラグ アニメーション デモ

画像がスライドする際に視差効果 を与える事が出来るjQueryプラグ インのご紹介。イメージスライダー とは相性良さそうですね。シンプル なものですが、応用も出来そうです。 パララックスなイメージスライダーです。画像をスライドさせるとテキストがやや遅れて動きます。 jQuery Destaque デモが目にやり場に困る写真ですが・・工夫すれば訴求力のあるコンテンツに出来そうです。アニメーションはe... 続きを読む

1ページで構成されたレスポンシブ対応の素敵なWordPressのテーマファイル -OnePager | コリス

2012/09/06 60 users Onepager コリス フレキシビリティ コンタ スキン

デモページ：幅480pxで表示 OnePagerの特徴 WordPressのテーマファイル「OnePager」は、OnePager HTML TemplateをWordPress用に最適化したもので、シンプルで美しいデザインでフレキシビリティにも優れています。 シングルページのレスポンシブレイアウト。 使いやすいテーマのオプション。 3つのスキンも用意。 イメージスライダーを組み込み済み。 コンタ... 続きを読む

[CSS]画像にかっこいいアニメーションでオーバーレイのメッセージを表示するスタイルシート | コリス

2012/06/27 79 users コリス パラグラフ slider CSS スライダー

CSSで作成したイメージスライダーに、ホバー時にメッセージを半透明のパネルに表示するチュートリアルを紹介します。 実装 実装のポイントだけピックアップ。 HTML メッセージの見出しとパラグラフをdiv要素で内包し、さらにa要素で内包したものを1コンテンツとして、スライダーを実装します。 画像はそれぞれの背景として配置します。 <div class="slider"> <a href="#"> <... 続きを読む

CSS3による様々なエフェクトが選択可能なレスポンシブWebデザイン対応イメージスライダーを実装するjQueryプラグイン・REFINESLIDE - かちびと.net

2012/04/02 91 users エフェクト レスポンシブWebデザイン net 選択 スライス

3Dやスライスなど、様々なアニメーション エフェクトを使用できて、且つレスポンシブ Webデザインにも対応可能なイメージスライ ダーを実装できるjQueryプラグインのご 紹介。REFINESLIDEというプラグインです。 覚えておいて損は無いのでは。 IEではフェードエフェクトのみになってしまいますが、iPhoneやiPadなどではcss3による様々なエフェクトを利用できます。スマフォ用として利... 続きを読む

導入も手軽でiPhoneなどにも自動でレイアウトを最適化するシンプルなイメージスライダーを実装出来るjQueryプラグイン・Slides - かちびと.net

2011/09/16 52 users iPhone レイアウト net 導入 自動

レスポンシブWebデザイン対応のイメージ スライダーです。かなり沢山出てきました ね。こちらはcssやHTMLもシンプルで済む のでコードをシンプルにしたい際は使い 勝手が良さそうです。こうして選択肢が 増えるのは凄くうれしいですね。 続々出てきますね・・・こちらもレスポンシブWebデザイン対応のスライド。こちらはMedia Queriesを使用していないようなので、いつも通りのマークアップで手軽... 続きを読む

エフェクトが無駄に凄いイメージスライダーを実装出来るjQueryプラグイン・Chop Slider - かちびと.net

2011/08/11 285 users エフェクト net クロスブラウザ Flash 印象

実用性は別にして、こういうの嫌いじゃない ので記事にします。よくあるイメージギャラリー なんですが、画像が変わる際のエフェクトが 無駄に凝っています（褒め言葉です）。こんな 事もflashを使わないで出来るんだなー、と 素直に関心したので、同じ気持ちで見て 頂けたら嬉しいです。 エフェクトはかなり多く用意されており、どれもなかなか派手な印象です。これだけのエフェクトをクロスブラウザに対応させている... 続きを読む