レスポンシブやスワイプ対応で完成度の高いスライダーのjQueryプラグイン「Slider Pro」 – bl6.jp
Slider Proはレスポンシブやタッチ・スワイプに対応したスライダーを実装することができるjQueryプラグインです。完成度も高く便利で役立つ機能が満載です。サムネイル画像もつけることができたりと、いくつかのパターンがあるのでこれからスライダーを実装したいという方は、チェックしておきたいところです。 [ads_center] Slider Proの使い方 Slider Proのデモは以下になります。 デモ Slider Proの大まかな特徴としては以下のようなものがあります。 レスポンシブ タッチ、スワイプ 無限スクロール カルーセルレイアウト サムネイル設定 フルスクリーンのサポート ブレイクポイント設定 使い方は、まずjQueryとプラグインファイルをhead�内に読み込みます。 <link rel="stylesheet" href="dist/css/slider-pro.mi
ときどきWEB | jQueryでウィンドウサイズに対応したスライド式ページスクロールイベント作ってやんよ!!!
以前ページスクロールで対象位置までスクロールしたら要素の表示・非表示処理に関する記事を書きました jQueryでページスクロールの指定箇所で要素の表示・非表示を切り替える関数作ってやんよ!!! 今回はＬＰページなどでページスクロールをしていくと横から飛び出すイベントを作成。 前回は指定位置を固定ピクセル値で指定するものだったので、ユーザーのブラウザのウィンドウサイズに制限される要素が多いので、今回はブラウザの高さに左右されない仕様を設計。 スライド式スクロールイベントページの作成 HTMLの記述 <div id="contents"> <div class="item">アイテム①</div> <div class="item">アイテム②</div> <div class="item">アイテム③</div> <div class="item">アイテム④</div> </div> CS
マウスオーバーで動くなめらかカルーセルパネル (1/2)
軽快でなめらかなカルーセルパネル 毎週アップロードされる充実した動画コンテンツを、カルーセルパネルやボックスレイアウトで賑やかかつコンパクトにまとめている「Universiteit van Nederland」。このサイトのカルーセルパネルは、マウスカーソルの位置に応じて軽快でなめらかに動く。 STEP 1：基本構造を用意する 今回作成するカルーセルは、横長のコンテンツをマウスの座標に応じて左右に移動させることで、スクロールの動きを演出している。 通常のボックススクロールでは、overflow: scroll; でスクロールバーを表示させ、スクロールバーの操作によってコンテンツを移動させる。今回のカルーセルは、スクロールバーの代わりにマウス座標を利用するため、overflow: hidden;で表示ボックス（.holder）からはみ出す部分を非表示化。内部（.inner）に横長のコンテンツ
jQueryで1ページごとにスクロールして画面遷移させるUIを実装する方法｜BLACKFLAG
以前、iPhone5sのプロダクトページがリリースした頃に『簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」』と題して1ページをフルスクリーン表示にして、画面全体をスクロールさせることで、1ページ分（1コンテンツ分）を画面遷移させるUIを実装できるjQueryプラグインを紹介しましたが、自分なりにもっと使いやすい形で実現できないかやってみた実験をご紹介してみます。 【2014/08/05 追記】 各ブロック内での横スライド機能を追加しました。 まずは動作サンプルから。 下記のサンプル画面でマウスホイールスクロールもしくは画面右側のナビゲーションボタン等を使って画面（ページ）を切り替えてみてください。 「jQueryで1ページごとにスクロールして画面遷移させるU
背景にYouTube動画を流せるJQueryプラグイン「tubular」
背景全体に動画が流れてるサイトってインパクトありますよね。そこでそれを試してみようと思い今回は背景にYouTube動画を流せるjQueryプラグインのtubularを使ってみました。 ダウンロード プラグインのサイトは以下です。早速サイトの背景に動画が流れています。 tubular, a YouTube Background Player jQuery Plugin | Sean McCambridge Design 使い方 jQueryプラグインなので先にjQueryを読み込んだ後、以下のようにJSに記述します。 $(function(){ $('document').ready(function() { var options = { videoId: 'OZDnWcf20kE'}; $('#wrap').tubular(options); }); }); id=”wrap”に背景動画
javascript：jQueryでスクロールするパララックスサイトのサンプル | webデザイン | web is a creation
webデザイナーとしての個人的アウトプットblog2012年のトレンドのひとつになるであろうパララックス効果を使ったサイト。 そんなパララックスサイトを今度の案件で実装する予定なので、サンプルサイトを制作してみました。 パララックス効果の概要については参考にしたサイトにお任せします:) 今回の方法としては、背景画像を指定し、background positionを変更し、個別にその速度を調節するやり方。 javascriptのソースはFranck Maurinさんのところを参考にさせてもらったのですが、 xポジションの指定が0固定だったので、そこを変更しました。 ※id指定のみの対応 以下、サンプルの主要な部分のピックアップ。 HTML <nav> <ul> <li><a href="#sec1">ページ1</a></li> <li><a href="#sec2">ページ2</a
設置サンプル
アボカド シーザーサラダ よくわからないけどちゃんとアボガド入りです！クリーミーなシーザードレッシングとアボガドの相性がとってもよかったです。 @アボガドダイニング Platinum Lounge アボカド刺 アボガドにお醤油がかかってるせいか、わさびをちょっとのせて食べると、マグロ入ってないのに、マグロの味がしましたｗ @アボガドダイニング Platinum Lounge ハニートースト アボカドたっぷしのってますが、れっきとしたデザートです。ハニートーストの上にバニラアイスが乗っていて、その上にアボガドがぱらぱらと。アボカドっぽくなくて、どちらかといえば栗のような味がしました！ @アボガドダイニング Platinum Lounge
jQueryでレスポンシブ対応のシンプルなクロスフェードビューアーを作る方法｜BLACKFLAG
jQueryを使ってのレスポンシブに対応したスライドショーを実装するいくつかのパターンを紹介してきましたが、サムネイルも何もなしでただ画像（コンテンツ要素）がクロスフェードするだけのシンプルなスライドショーのレスポンシブに対応したパターンの要望を多くいただいたので、試しに作ってみたのを紹介してみます。 レスポンシブ動作はブラウザ枠を目いっぱいにするタイプなので、まずは別枠表示で動作サンプルから。 「jQueryでレスポンシブ対応のシンプルなクロスフェードビューアーを作る方法」サンプルを別枠で表示 サンプルでは6枚の画像を自動でクロスフェードで切り替え、最大幅を「800px」最小幅を「320px」としてブラウザ幅によってスライドショー部分が拡大縮小します。（どちらの値も変更可） 簡単な動作仕様については以上になります。 全体構成についてまずはHTMLから。 ◆HTML <div class=
積極的に取り入れたい9つのCSS3（+jQuery）テクニック
CSS3（+jQuery）を使った、ちょっといいかも！と思うエフェクトを集めてみました。 まだまだ非対応ブラウザが多い CSS3 ですが、できるだけ積極的に使ってみたいなーとも思ってます。 まずはいろいろ試してみることからはじめてみましょう！ CSS3 の登場で、いろんな CSS のトリックを使ったエフェクトが考えられてます。まだまだ CSS3 に非対応のブラウザも多いので、全てを CSS3 で表現する訳にはいかないのが現状ですが、私的には積極的にどんどん取り入れていきたいなーとも思ってます。 海外ブログなどで、色んな CSS3 を使った Tips が紹介されているので、その中からいくつかご紹介します。どれもサンプルを作って試してみたものばかりです。以下の環境で動作確認もしています。 Mac : firefox、Safari、Chrome Win : firefox、IE8、Safari、
多機能でスタイリッシュなギャラリーを簡単に実装できる！jQueryプラグイン「MixItUp」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのモモコです。 今回は多機能でスタイリッシュなギャラリー用jQueryプラグイン「MixItUp」をご紹介します。 「容量は軽いけれど力強く、美しいアニメーション、ソートやカテゴライズ、フィルタリング、レスポンシブレイアウト対応」…と、プラグインの説明ページから目についた英単語を並べただけでも機能の豊富さが分かって頂けると思います。 各機能の詳細は3パターンのDEMOサイトが用意されていますので、そちらをご参照ください。 MixItUpのDEMOサイトを見る ちなみに商用、非商用問わず使用可能です。 対応ブラウザはGoogleChrome4.0以上、Firefox4以上、IE10以上など最新の状態での閲覧を推奨しています。 スマートフォン、タブレットでもスムーズに動くようです。 IE9で試しに閲覧したところエフェクトは付きませんが、ソートなど機能面は問題なく使えました
カスタムスライダーを実装できる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が必要です。ない場合は事前にダウンロードしてお
メインビジュアルを自動でゆっくりスライドさせて流す方法① | スターフィールド株式会社
最近いろんなwebサイトをチェックしていると、メインビジュアルが横にゆっくり自動で流れているものを 見かけることがあります。 気になったので、実際に試してみました。 DEMO 実装は難しくありません！ 背景画像を1pxずつずらしていくといった感じになっております。 javascript $(function(){ setInterval("bgslide()", 50); }); var current = 0; function bgslide(){ current -= 1; $('.head_wrap').css("background-position", current+"px 50px"); }
【Javascript】無限に横方向にスクロールするjQueryプラグイン | Wood-Roots:blog
2017.07.11 CSS3アニメーションとFlexboxを使用した新バージョン「infiniteslide.js v2」を作成しました。 古いブラウザへの対応が不要な場合はぜひ新バージョンもご検討ください。 2013.09.09追記 マウスオーバーで停止するオプションを追加しました。jQuery Pauseプラグインを使用しています。 2013.06.13追記 Chromeで動作しなかったのを直しました。imgのwidth,heightは必須でした。 2013.03.27追記 自作プラグインなどはGitHubで公開・管理することにしました。 最新版はGitHubにあります。 デモと解説とダウンロード OTAGGIOみたいなサイトがいい！なんて言われたので書きました。 当初はベタに書いてましたが、使いどころがいろいろありそうだったのでプラグイン化しました。 解説ページに大体のことは書いて
Google Ajax Feed APIでRSSを取得するとキャッシュが利用される件の解決法 - 好奇心の塊
概要 Web上でRSSというXML形式の「更新履歴情報」が広く使われています。 しかしjavascriptは他ドメインのリソースにアクセスする事を原則的に禁じているため，他サイトのRSSを取得してホームページ上に動的に表示するのは簡単ではありません。大抵の場合は取得用のCGIを別に用意したりします。 しかしGoogleの提供しているAPIを利用すれば，javascriptを書くだけで他サイトのRSSフィードを取得する事が出来ます。（要はそれ用のサーバをgoogleが貸してくれる感じ） APIに関する詳しい話は下のURLにて デベロッパーガイド - Google AJAX Feed API http://code.google.com/intl/ja/apis/ajaxfeeds/documentation/ しかしこのAPIを利用すると，更新が反映されるのがとても遅い。 下手をすると数日前
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
jQueryデザイン入門 第3章 (6) - hachinana
第3章 現場で使えるデザインレシピ ばりでーしょん かるーせるぱねる 3.11 バリデーション付きメールフォーム メールフォームに検証機能を付与しちゃうサンプル。 JavaScriptのバリデーションだけでは不安ですが、圧倒的にユーザビリティは向上しますね。フォームのユーザビリティを高めることは、則ち全世界を平和へと導きます。人類皆兄弟。らぶあんどぴーす。さぁ、がんばりましょう。 フォームのバリデーションを実装するjQueryプラグインでは、nori氏のexValidationと、Cedric Dugas氏のInline Form Validation Engineが好き。 完成 demo – ばりでーしょん 仕様 送信ボタンをクリックするとバリデーション。 必須項目が未記入であったり、書式が異なるとエラーメッセージを吐く。ゲロリ。 HTMLのクラスでバリデーションルールを適用させる。 ソ
jQueryプラグインで要素をｷﾘｯっと切り替える「MobilySelect」
ポートフォリオをWEB、紙・・・などと切り替えるときに使えそうなjQueryプラグインMobilySelectを紹介します。 これを導入すればユーザーへの訴求力が高まるかもしれません。 sponsors 使用方法 MobilySelectからファイル一式をダウンロードします。 <link href="default.css" rel="stylesheet" type="text/css" /> <script src="jquery-1.4.4.min.js" type="text/javascript"></script> <script src="mobilyselect.js" type="text/javascript"></script> <script> $(document).ready(function(){ $('.class名').mobilyselect({ col
シンプルで見やすいガントチャートを描けるjQueryプラグイン・jQuery.Gantt - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 シンプルで見やすいガントチャート を描画できるjQueryのプラグイン。 以前見かけてから放置していたので 少し触って見ました。使う機会は 個人的には多くありませんけど、 覚えて置いて損はしないかと。 この手のはよく見かけますけど、今日のプラグインは個人的に使いやすい印象だったのでメモ。 こういうやつ。 サンプル作ったので宜しければご覧下さい。 Sample コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <script src="jquery.fn.gantt.js"></script
jQueryをロードする際のナイス！と思った書き方
概要 ▶ 出典：Initializr - Start an HTML5 Boilerplate project in 15 seconds!先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。このブログも実はPC版は形式上HTML5のページになっているんです。見た目はほとんど変わって本ページはプロモーションが含まれている場合があります 出典：Initializr - Start an HTML5 Boilerplate project in 15 seconds! 先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。 このブログも実はPC版は
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スライドショーやグリッドレイアウトなど、日本製の国産jQueryプラグイン