カスタムスライダーを実装できるjQueryプラグイン「Sly」の使い方 | note | non-standard world, Inc.
5-10-1-401 Shinjuku Shinjuku-ku, Tokyo 160-0022 Japan ページ内の要素を自由にスライドさせることのできるjQueryプラグイン「Sly」、 先日、弊社の案件で使用したところ非常に良く出来ていたのですが、日本語での実装方法があまりなかったので、備忘録を兼ねてメモします。 Slyでどんなことができるの？ ページ内の要素を色々な形でスライド、スクロールさせることができます。 デモは以下です。 横スクロール、スライド ページ内縦スクロール ページ内要素を全画面に並べる 無限スクロール パララックス効果 昨今トレンドになっている表現がひと通り揃っている感じですね。 実装方法 ここでは横スクロールを実装する場合の例を解説します。 まず、導入には、jQuery本体とjQuery Easing Pluginが必要です。ない場合は事前にダウンロードしてお
[JS]Appleのプロダクトページのような1ページのスクロールコンテンツを作成するスクリプト -One Page Scroll
デモページ：3番目のパネルを表示 各パネルへの直リンクやURL表示にも対応しています。 One Page Scrollの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.onepage-scroll.js"></script> <link href='onepage-scroll.css' rel='stylesheet' type='text/css'> </head> Step 2: HTML mainはコンテナで、各パネルはse
[JS]画像ホバーで、さまざまな要素を配置した半透明のパネルをアニメーションで表示するスクリプト -HCaptions
画像をホバーすると、スライドやフェードのアニメーションで表示する半透明のパネルを実装するjQueryのプラグインを紹介します。 パネルは実装もカスタマイズも簡単です。 HCaptions -GitHub HCaptionsの準備 HCaptionsのデモと実装 HCaptionsの設定 HCaptionsの準備 まずは、スクリプトを使う準備から。 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="js/jquery.js"></script> <script src="js/jquery.hcaptions.js"></script> Step 2: スクリプトの準備 キャプションを表示に付与するclassを定義します。 $(window).load(function(){ $('.hcaption').hcapt
レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
[JS]jQueryのプラグイン100選 -2012年総集編
2012年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年目立ったのは、やはりレスポンシブ、そしてCSS3アニメーションでしょうか。 スライダーやギャラリー系もレスポンシブ・アニメーション対応、ナビゲーションやPinterst風のレイアウトなど、多くのプラグインにそれら二つの要素が組み合わさっています。 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 ナビゲーション関連 レイアウト関連 レスポンシブ関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
Animated Responsive Image Grid | Codrops
A jQuery plugin for creating a responsive image grid that will switch images using different animations and timings. This can work nicely as a background or decorative element of a website since we can randomize the appearance of new images and their transitions. Today we want to share a jQuery plugin for creating a responsive image grid with you. The idea is to have a list of images and define th
ボックス要素に色んなタイプの影を簡単に付けられるjQueryプラグイン「jQuery Shadow」:phpspot開発日誌
jQuery Shadow Plugin ボックス要素に色んなタイプの影を簡単に付けられるjQueryプラグイン「jQuery Shadow」。 次のようにボックス要素に対して影を自由に付けられるプラグインです。$(elem).shadow(option); という風にするだけなので使い方は簡単ですね 単なるボックス要素があっというまにクールになりますね 関連エントリ selectボックスを超カッコよくするjQueryプラグイン「Chosen」 ブラウザ上でサインを書けるjQueryプラグイン「jSignature」 JSでのタイマー処理がもっと簡単になるjQueryプラグイン「timing」 スマホ用サイトに使えそうなドロップダウン実装jQueryプラグイン「DropKick」 ページめくりを実現するためのjQueryプラグイン集
HTML5+CSS3で作った無料ブログ用テンプレート【SimpleBlack】
自分の知識の確認の意味を込めて、去年の11月にHTML5用の簡単なテンプレートを作成しました(もともとはCSS Animationの確認のために作った物です)。 もし気に入っていただけたらダウンロードして使っていただけたら幸いです。特に変わった仕様も無く、シンプルで単純なものだったので、多少でも見栄えを良くしようと、先日カスタマイズしておきました。 カスタマイズといっても、jQueryやアイコン・画像・少しのコードを追加しただけなので、そんなに期待しないでね！ちなみにブログ用にカスタマイズしてあります。 あとこのテンプレートの名前は【SimpleBlack】です(名前なんてどうでもいいですよね)！ 今回利用したjQueryなど jQuery Slider2 すごくシンプルで、軽量なスライダーです。あまりにシンプルだったので、本当に動くのか心配だったんですが、きちんと動いてくれました！このテ
レスポンシブWebデザインに対応したjQueryスライドショープラグイン
RefineSlide / Camera | a free jQuery s... / CarouFredSel他...全7件
#hero-unit
This Domain is NOT Suspended Anymore This domain has all already been restored and not Suspended anymore. If you are the registrant of the domain please update your nameservers so it resolves to your site. Este Dominio Ya NO Esta Suspendido Este dominio ya fue restaurado y no está suspendido. Si usted es el titular por favor actualice los nameservers para que resuelva a su página.
[JS]高性能で設置も簡単、ブラウザ枠いっぱいに背景画像を配置するスクリプト -bgStretcher
デモページ：Super Slider スライドのスーパー版で、斜め方向のスライドで画像を切り替えます。 bgStretcherの主な特徴 セットアップはシンプル 全てのモダンブラウザをサポート 画像は一枚だけでなく、複数枚にも対応 対応ブラウザ Internet Explorer 6, 7, 8, 9 Firefox 2, 3, 4 Opera 9+ Safari Chrome bgStretcherの使い方 Step 1: ファイルのダウンロード サイトの「Download」よりファイル一式をダウンロードします。 一式には必要なファイル全て（jqeury.jsも）が含まれています。 Step 2: 外部ファイル 外部ファイルを下記のように<head>～</head>に記述します。 <script type="text/javascript" src="../jquery-1.5.2.mi
How To Build a Simple Parallax Scrolling Website
The Parallax scrolling effect became popular back in the day when Nike released its stunning and brilliant design website named “Nike Better World” as support to the athletes around the world. The site had achieved a lot of good reviews from different sites for its amazing Parallax scrolling effects and web design. Parallax has existed since the 1980’s and was used in video game titles and later w
Animated Content Menu with jQuery | Codrops
Today we will create a slick animated content menu with jQuery for a restaurant theme. The menu items will be animated and when clicked, a content area with more information […] Today we will create a slick animated content menu with jQuery for a restaurant theme. The menu items will be animated and when clicked, a content area with more information will appear. Also, he background image is going
Animated Dropdown Menu CSS3: Guide
Without a doubt, CSS3 functionalities such as transitions, animations, and transforms have the ability to infuse a touch of innovation into your design endeavors. Within the confines of this article, we shall delve into the process of crafting a remarkable CSS3 animated dropdown menu, leveraging the remarkable capabilities of these trendy features. Opting for an alternate title for this article, o
Mobily Playground - MobilySlider
Mobily Playground Home TutorialsjQuery, CSS FreebiesjQuery plugins developed by Mobily Contact MeHire me or just say hi! MobilySlider is advanced slideshow plugin for jQuery (5KB). Features: can add inline HTML content (awesome!) looping auto generated pagination auto generated arrows autoplay fade, horizontal, vertical slide transition effect pause on hover callback functions Changelog: 02.02.201
[JS]超軽量、設置も簡単、オプションも豊富なスライドショーのスクリプト -Orbit
実装も簡単で、オプションも豊富に揃った、使い勝手のよい画像スライドショー用のjQueryのプラグインを紹介します。 約4KBと超軽量なのもいいですね。 右上のオートプレイは状況も表示します。 Orbitの実装 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.orbit.min.js" type="text/javascript"></script> スタイルシートも外部ファイルとして指定します。 <link rel="stylesheet" href="css/orbit.css"> HTML 画像のみを配置したシンプルなスライドのHTMLです。 <div id="featured"
[CSS]ナビゲーションを実装するスタイルシートのテクニックのまとめ | コリス
CSS3をはじめとする、スタイルシートのさまざまなテクニックを使って実装するナビゲーションを紹介します。 ※一部、jQueryを併用するものもあります。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Facebookのようなサイトツアーを実装できるjQueryプラグイン5選
EMPRESS - News & Announcements | AirDrops
新着記事
