知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ
作成：2014/04/7 更新：2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スライドショー １．カルーセル（横） ２．フェードアウト ３．画像と文字をスライド ４．文字が遅れて移動する効果 ５．異なるタイミングを設定できる ナビゲーション・メニュー ６．多階層 ドロップダウンメニュー ７．多階層 効果つき ８．スマホではドロップダウン ９．スマホではセレクトメニューに １０．Amazon風 メガドロップダウンメニュー １１．横スライド １
IE6もOK！jQueryプラグインでぐりんぐりんする画像切り替えを作る
twitter facebook hatena google pocket 最近のサイトではメインビジュアルにもよく画像の切り替えが利用されています。 これをjQueryプラグインbox-sliderでぐりんぐりん切り替えてしまいましょう。 頭を悩ませるIE6も3Dエフェクト以外は対応しています。 sponsors 使用方法 box-sliderからファイル一式をダウンロード。 切り替えたい画像を下記の通り記述します。 <div class="slider-viewport"> <div id="id名"> <figure> <amp-img src="画像パス1"> </figure> <figure> <amp-img src="画像パス2"> </figure> <figure> <amp-img src="画像パス3"> </figure> </div> </div> あとはJav
レスポンシブかつ軽量な画像スライドショーのjQueryプラグイン-ResponsiveSlides.js
Modified 2014-06-08 更新情報 記事公開時とオプションや設定方法など変わっていた点が多数あったため、現在の方法へオプションを書き換えました。 ResponsiveSlides.jsは、レスポンシブで792KBの軽量かつシンプルなスライドショーのjQueryプラグインです。Internet Explorer 6,7,8,9 にも対応していて、サポートしているブラウザも幅広いので、定番として使えそうです。 「サンプル」も作ってみましたが、設置も簡単にできました。シンプルなマークアップで使いやすいです。 デモ ResponsiveSlides.js · Responsive jQuery slideshow Slideshow 1 はシンプルに画像がフェードしながら切り替わります。 Slideshow 2 は画像の切り替えをページナビで行います。 ダウンロード viljamis
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
Slideshow with jmpress.js
Just when I thought... From fairest creatures we desire increase, that thereby beauty's rose might never die Read more Holy cannoli! But as the riper should by time decease, his tender heir might bear his memory Read more No time to waste Within thine own bud buriest thy content and, tender churl, makest waste in niggarding Read more
jQuery Infinite Carousel | jQuery for Designers - Tutorials and screencasts
Posted on 11th June 2009 — With jQuery for Designer‘s redesign I decided to add a scrolling carousel that worked in the same way the carousel worked on the Apple Mac ads page. This tutorial will walk through the fundamentals of the effect and how to recreate it. Earlier: jQuery for Designers: In Live Action Next: API: queue & dequeue Watch Watch jQuery Infinite Carousel screencast (Alternative fla
どんなHTML要素もカルーセル化してしまえるjQueryプラグイン「CarouFredSel」:phpspot開発日誌
infinite, circular jQuery carousel --- CarouFredSel 2.1.3 どんなHTML要素もカルーセル化してしまえるjQueryプラグイン「CarouFredSel」。 指定した要素以下に<div>や<img>を単に並べるだけでカルーセル化してくれるプラグインです。 少ないスペースで多くのコンテンツを格納するのに便利です。 横だけでなく、縦スクロールもオプションで指定することが出来ます。 ページ下部にexamplesが多数紹介されているので他にも色々な機能があることを確認できます。 関連エントリ 関連アイテムを出す場合等に使えそうなjQueryカルーセル「bxCarousel」 JavaScriptで実装するクルクル回転する3DカルーセルUI実装ライブラリ 無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル
Orbit: jQuery Slider Plugin | Playground from ZURB
Orbit: A Slick jQuery Image Slider Plugin Sick of confusing and bloated image sliders that never work? Rock ZURB's Orbit for a mere 4KB Note: Works best in Chrome, Safari, FF3.5+ (but is tested for IE7+, FF3.5+, Chrome and Safari) Orbit has moved to Foundation! Greetings! We here at ZURB love Orbit so much, that we have included it in our (Awesome) rapid prototyping framework Foundation. We will n
縦や横に配置されたサムネイルから画像を選択できるjQueryの画像ギャラリー「KGallery」 – bl6.jp
縦や横に配置されたサムネイルから画像を選択することができるjQueryの画像ギャラリー「KGallery」。サムネイル画像の近くにある矢印をクリックすることで次のサムネイル一覧や前のサムネイル一覧にスライドさせるこもできます。たくさんの画像を見せたいけどスペースが限られているという時に活躍してくれそうです。 [ads_center] 使いやすいデザイン 上記は縦に配置されたサムネイル画像のタイプ。右側にあるサムネイルから見たい画像を選択します。拡大画像の左上にあるメニューアイコンでも次／前の画像に行くこともできるし、スライドショーの再生／停止もできます。 シンプルなデザインですが、とても使いやすい配置になっているかと思います。画像ギャラリーを実装したい時の選択肢の一つとして覚えておくとよさそうですね。 ちなみに縦に配置されたサムネイル以外にも、スライドショーだけのものやサムネイルだけのもの
Create Featured Content Slider Using jQuery UI - WPLoaded
Showing off the best content of your website or blog in a nice intuitive way will surely catch more eyeballs. Using an auto-playing content slider is the one of techniques to show your featured content. It saves you space and makes for a better user experience, and if you add a pinch of eye candy to it, then there’s no looking back. There are a few tutorials on creating featured content sliders li
13 Super Useful jQuery Content Slider Scripts and Tutorials
2 Pings & Trackbacks Pingback: 55 Inspiring Examples of Slideshows in Web Design | Inspiration Pingback: 10 jQuery Slider Techniques and Plugins | Tutorials 103 Comments Hi Henry, Thanks for including my tutorial on this great post! hey, its a great tutorial to work with. i love it. thanks for the sharing so nice jQuery slider scripts! Here are some great tutoriales, thank you for this great resou
10 jQuery Slider Techniques and Plugins
25 Comments Thanks for the round up of jQuery image sliders. Thanks for this. I’ve been using Nivo Slider a lot lately. It works well but I’m going to have to check out some of these other ones. Nice Collection & cool post as always !! So helpful! I can use some of these in upcoming projects. i like “Fancy Sliding Form with jQuery” its look nice… and I’ll defiantly use in my next project. thanks N
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
dev7studios