【jQuery】【パララックス】時間差スクロールで奥行きのある動作を実装する方法
それぞれのレイヤーごとのスクロール速度をずらことで、奥行きの感じられる動作を実装することができます。 今回は、jQueryを使って、背景画像の縦スクロールと横スクロールのパララックスを実装してみます。 ・縦の時間差スクロールサンプルページ ・横の時間差スクロールサンプルページ html <body> <head> <link href=style.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="scroll.js"></script> </head> <div id="scroll_bg01"> <div id="scroll_bg02"> <div id="scroll_bg03"> </
Owl Carousel
Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.Fully Customisable Over 60 options. Easy for novice users and even more powerful for advanced developers. Touch and Drag Support Designed specially to boost mobile browsing experience. Mouse drag works great on desktop too!
【jQuery】レスポンシヴ対応のスライダー［flickity］は今後の定番になるでしょう。
高機能なスライドショーを実装するためのjQueryベースのプラグインと言えば、「FlexSlider」「CarouFredSel」「bxSlider」などが有名ですが、今後これらのプラグインに代わって定番になるであろう、秀逸なスクリプトが公開されていました。 はじめに。 ［flickity］と名付けられたコンテンツスライダーです。 他のスクリプトに代わって台頭するであろう、幾つかの理由があります。 ポイントは以下の点。 レスポンシヴ対応。 モバイル端末のタッチやフリック入力に対応。 スクリプト単体でも動く。 jQueryに依存しない。 デフォルトで［imagesLoaded］との併用が可能。 設定にはHTML5のデータ属性を利用することも可能。 スクリプト一式をダウンロードしてサイトに組み込み、任意のhtmlを記述するだけで動く点は初心者の方にも優しい仕様ですね。 また設定にHTML5のデ
【jQuery】背景いっぱいにYouTube動画を表示させる［jQuery Tubular］を紹介します。
株式会社オンズ 開発ブログ 【jQuery】背景いっぱいにYouTube動画を表示させる［jQuery Tubular］を紹介します。 ウェブサイトにアクセスしたとき、背景全面に大きく動画が流れていると大変インパクトが強く、印象に残ります。 そこで今日は、サイトの背景にYouTubeの動画を表示・再生させることができるjQueryプラグイン［jQuery tubular］を紹介します。 プラグインのダウンロード まずは下記の公式サイトより、［jQuery Tubular］のプラグインをダウンロードしてきます。 jQuery Tubular：ダウンロード 使い方 まずは HTML の <head>〜</head> 内にて、先にjQuery本体を、続いてダウンロードしてきた［jquery.tubular.js］を読み込みます。 続けて、［jQuery Tubular］の設定も記述します。 <s
オンズ
jQuery IntroTzikas の使い方 このスクリプトのコードは以下のように記述しています。 <script type="text/javascript"> // オープニング エフェクト $(document).ready(function(){ $().introtzikas({ line:'#6cc', //ラインの色 speedwidth:2000, //幅の移動完了スピード speedheight:800, //高さの移動完了スピード bg:'#333' //背景色 }); }); </script> このページを再読み込みしてみてください。 サンプルがうまく動かないときはページを再読み込みしてみてください。 また、エラーや間違い等を発見された方はぜひお知らせください。 オンズでは各スクリプトの実装のお手伝いも承っております。 比較的安価で最新・高機能なシステムを導入でき
【jQuery】水面に滴る雨を再現した［Raindrops.js］でウェブページに癒しと冷涼感を。
夏ですね！ 例年以上の猛暑が続いている今日この頃。皆様いかがお過ごしでしょうか。 さて。今日は、こんな暑い夏に相応しい「冷涼感」を演出してくれるjQueryプラグインを紹介します。 ［Raindrops.js］と名付けられたこのプラグインは、ボックス要素を水面に見立て、降り注ぐ雨の様子を演出します。 まずは実際に使ってみたサンプルをご覧ください。 ［jQuery Raindrops.js］実装サンプル 導入方法は比較的簡単です。 ［Raindrops.js］の使い方 まずは配布サイトより、プラグインのファイル「raindrops.js」を入手してきましょう。 ［Raindrops.js］配布サイト：http://daniellaharel.com/raindrops/ 基本的なことですが［Raindrops.js］はjQueryプラグインなので単体では動きません。 別途「jquery.js
cube.js｜nejimaki-act
しばらく眺めると ふわふわぷかぷか cubeが楽しそうに現れてくる jQueryを読み込み cube.jsを読み込む たったそれだけ ライセンスフリーですので、ご自由にお使いください。
JavaScript で Chrome のウィンドウを閉じる方法 - Qiita
以前リリースしたとあるサービスで、「一部の入力フォームを別ウィンドウをポップアップして入力させ、終わったらリンクをクリックして閉じる」という JavaScript の処理を入れていたのですが、なぜか2015年頃から Chrome で画面が固まってしまう不具合が発生しました。2014年の春にテストした時は問題なく動いていたのですが。 どうやらブラウザーのバージョンアップに伴い、正しく子ウィンドウを閉じるための方法が変化してしまったようです。今ならどう実装するべきなのかを、少し検証してみました。 再現方法 不具合は以下の流れで発生します。確認したブラウザは Chrome 39.0.2171.99m (Windows) です。 親ウィンドウにある <a onClick="window.open()"> リンクを叩き、子ウィンドウをポップアップさせる。 子ウィンドウにある <a onClick="
jQuery 画像を事前読み込みさせておく方法 – 画像のプリロードの実装方法 | Stronghold Archive
どうもこんばんは。Toshikuraです。今回のTipsは【jQuery 画像を事前読み込みさせておく方法 – 画像のプリロードの実装方法】です。画像の事前読み込みはロードの合計時間を算出したり、マウスホバーでの画像のちらつきを防いだりと色々な場面で活用できるTipsですので覚えておいてもいいかもしれませんね。ちなみにCSSのみでも実装可能です。その場合同一要素内に複数の背景画像を設置したり、imgとして読ませてわざわざどこかに飛ばしたりといういくつかの方法があります。 jQuery 画像を事前読み込みさせておく方法 事前にjQueryを読ませる事をお忘れなく。 jQuery.preloadImages = function(){ for(var i = 0; i<arguments.length; i++){ jQuery("<img>").attr("src", arguments[i
slick - the last carousel you'll ever need
Features Fully responsive. Scales with its container. Separate settings per breakpoint Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging Infinite looping. Fully accessible with arrow key navigation Add, remove, filter & unfilter slides Autoplay, dots, arrows, callbacks, etc... Single Item
Chained selects
Mon, Jan 1, 0001 Chained is simple plugin for chained selects. It works with both jQuery and Zepto. You can choose from two different versions. Use jquery.chained.js if you do not want to make external queries for setting content of child selects. This version uses data attirbutes to decide the content. For more complex scenarios maintaining data attributes will get cumbersome. Also if you want to
JavaScriptのテンプレートJsRenderとJsViewsの紹介 - Qiita
かって、JavaScriptのテンプレートとしてjquery.tmpl.jsが存在した。 jQuery公式サイトにものっていたが、現在はメンテナンスされておらず、公式から削除された。 https://github.com/BorisMoore/jquery-tmpl しかしながら、同じ作者のJsRender、JsViewsといわれるライブラリが後継として存在している。 このドキュメントでは JsRender, JsViewsについての解説を行う。 http://www.jsviews.com/ JsRender JsRenderはDOMやjQueryの依存関係なしで、軽量でありながら強力で拡張可能なテンプレートエンジンである。 JsRenderは以下からダウンロードすることが可能だ。 http://www.jsviews.com/#download 実装のサンプルとJsRenderの機能
ページ遷移時にアニメーション効果をつけるjQueryプラグイン「Animsition」＆「Animated Pageswitch Plugin」｜BLACKFLAG
以前にも、「jQueryでページ遷移時にスライドアニメーションをつけてみる」と題して、 jQueryを使ってWebページの遷移時にスライドなどの アニメーション効果を実装させるスクリプトを紹介しましたが、 同様の動作を簡単に実装できるjQueryプラグインがいくつかあったので メモ書きとして紹介してみます。 Animsition ・ A simple and easy jQuery plugin for CSS animated page transitions. Animsition ・ A simple and easy jQuery plugin for CSS animated page transitions. jQueryファイルと「Animsition」プラグインファイルをページ内で読み込んで ページ遷移時のアニメーションを実装させたいリンク＜a＞タグに対して 「animsi
jQuery のバブリング、preventDefault() や stopPropagation() の使用例 ｜ Tips Note by TAM
2014.06.16 jQuery のバブリング、preventDefault() や stopPropagation() の使用例 jQuery のイベントのバブリング (伝播) については下記のサイトがほんとに分かりやすくて、読んでいただければもうあらためて書くことはないのですが、 jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」について (ふじこのプログラミング奮闘記 3行でまとめると、 クリックなどのイベントは、子要素から親要素へと伝播される（バブリング） preventDefault() は、その要素のイベントをキャンセルし、stopPropagation()は、親要素への伝播をキャンセルする。 return false; を使うと、その要素のイベントも親要素への伝播も両方キャンセルす
Swipebox | A touchable jQuery lightbox
What is Swipebox ? Swipebox is a jQuery "lightbox" plugin for desktop, mobile and tablet. Main Features Swipe gestures for mobile Keyboard Navigation for desktop CSS transitions with jQuery fallback Retina support for UI icons Easy CSS customization Basic Usage Javascript Include jquery and the swipebox script in your head tags or right before your body closing tag. <script src="lib/jquery-2.0.3.j
jQuery Migrate pluginを使ってみる。 | バシャログ。
痩せないとコートが入らないことに気づいたfukasawaです。こんにちは。 冬が来る前に痩せないと凍死してしまいます。 jQuery Migrate pluginは、jQueryのバージョン差異によって発生する問題を解決する為のjQueryプラグインです。「jQueryのバージョンを上げたら動かなくなった…！」という場合に修正箇所を教えてくれたり、廃止されたAPIを復元して動くようにしてくれたりします。 個人的に使った事が無かったので、使い方について簡単に調べてみました。 jQuery Migrate できること ① 廃止されたAPIを使おうとしたり、挙動が変わった機能を使おうとした際に、ブラウザのコンソールに警告を出力する 開発版（Development version）のjQuery Migrateを使用する jQueryのversion 1.6.4以降を使用していること ② 廃止され
flickGal - jQueryプラグイン | stakamura
$(function(){ $(".yourElement").flickGal(); }); iPhoneでフリックギャラリーを実装するプラグインを作ってみました。 Androidの友達が「多分動いてる」と言っていました。PCでもそこそこ動きます。 iPhoneのtouchEventなどに関して、nogunoguさんの記事を大変参考にさせていただきました。というか完全にnogunoguさんの研究のおかげです。感謝でございます。 デモ こちらをご覧ください。→ view demo ※iPhone向けのページです。Androidでも動くらしいです。PCでもそこそこ動きます。 確認環境： iPhone3G v4.2.1 Safari, iPad v4.2.1 Safari ダウンロード コミットの仕方なんか変かも知れません。 ダウンロード (GitHub) 圧縮版はだいたい3KBくらいです
[jQuery] 異なるバージョンのjQueryを共存させる | un-T factory! Interactive blog
un-T factory!のインタラクティブチームのブログです。こんにちわ、榎戸です。 先日とある案件でフロントエンドの実装をおこなっていたときの話です。 ひと通り実装を終え明日はクライアント確認という段階で ステージングサーバにデータをアップしたところ動きません… 弊社テストサーバでは問題なく動いていたものが なぜかステージングサーバだと動かないのです。 時は刻一刻と過ぎていき 空が白み始めたころ原因がわかりました。 jQueryの競合がエラーの原因だったのです。 実装を担当したページでは ほかにも様々なモジュールが読み込まれていたのですが、 モジュールごとに違うバージョンのjQueryを読み込んでいて それが私の書いたスクリプトと衝突していたのです。 調べてみるとこの「jQuery競合問題」には さまざまな解決法がありました。 自分自身の反省をこめて 今
中央に来た項目に焦点を当てるカルーセルを実装できるjQueryプラグイン「FilmRoll」 – bl6.jp
FilmRollというjQueryプラグインを使えば中央に来た項目に焦点を当てることができるカルーセルを実装することができます。実際のデモでは中央に来た項目が黄色い枠で囲まれます。また、項目を動かさずに黄色い枠だけを移動させたりも出来ます。以下は使い方です。 [ads_center] FilmRollの使い方 FilmRoll このように、中央に来た項目を強調させることができます。カルーセル自体がシンプルなので見やすいですね。プラグインが軽量なのも嬉しいです。 FilmRollを読み込み、 <script src="js/jquery.film_roll.js"></script> コンテンツをHTMLでマークアップ。各項目を内包する親要素にはfilm_rollというidを付与しておきます。 <div id="film_roll"> <div> <a href="..."><img src
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
vst.mn has been registered