以前の記事で、ホームページに普通のスライドショーを設置する方法について紹介しました。 [blogcard url="https://fukafuka295.jp/homepage-slideshow-kantan/"] しかし今回紹介するスライドショーは、2枚の画像を比較したい時に非常に便利な『比較用スライドショー』です！（通称：Cocoen） 例えば以下のような2枚の画像を比べて見せたいとします。 ここで『比較用スライドショー』を導入すると、以下のように、カーソル操作で2枚の画像を見比べることができるスライドショーが設置できます。

Webページやスマホアプリで要素がビューポート内に入った時に、パララックスやさまざまなスクロールのエフェクトを実装できるJavaScriptライブラリを紹介します。 要素をスクロールに追従して表示させたり、視差効果を使ったパララックスやカーテン効果なども簡単に実装できます。 Locomotive Scroll Locomotive Scroll -GitHub Locomotive Scrollの特徴 Locomotive Scrollのデモ Locomotive Scrollの使い方 Locomotive Scrollの特徴 Locomotive ScrollはWebページやスマホアプリでビューポート内の要素検出と視差効果によるスムーズなスクロールを簡単に実装できるJavaScriptライブラリです。virtual-scrollにレイヤーとして構築され、要素がビューポート内に入った時にc

どうも、まさとらん（@0310lan）です。 みなさんは、自分のWebサイトに「パララックス効果」を取り入れたいと考えたことはありませんか？ 「なんだか難しそう…」とか、「実装が面倒くさい…」のようなイメージをもし持っているのであれば、今回ご紹介するJavaScriptライブラリが一発解消してくれますよ！ 【 Rellax.js 】 今回のテーマである「パララックス（視差効果）」がどんなモノであるかは、「Rellax.js」の公式サイトを見ると分かりやすいです。 このように画面を上下に動かす際に、複数のHTML要素が異なるスピードでアニメーションすることで、Webページが立体的になって印象に残りやすいサイトになります。 「Rellax.js」は、このような「パララックス効果」を可能な限り簡単に書けるようにしてくれるJavaScriptライブラリというわけです！（ちなみに、「ver1.0」か

拡大しながらフェードインするスライドを実装したのでめもめも。 さらっと言ってますけど、ほんと分からなくて泣きそうになりながら実装したんだよ・・・ぐすん。 とりあえず、デモをのせますね。 1. フルスクリーン背景バージョン 2. 通常スライドバージョン フルスクリーンか通常のかはHTMLとCSSで変更し、jsは全く同じものです。 $(window).load(function(){ var slide = $('.slideshow'); var i = 0; // ページの読み込み時にスライドの1枚目を2000ミリ秒かけてフェードイン slide.find('.item').eq(i).fadeIn(2000).addClass('in'); // スライドの枚数を調べて変数に格納 var total = $('.slideshow .item').length -1; // 処理を繰り返

CSSを使ってクラス名を指定するだけで要素をブルブル((((；ﾟДﾟ))))震えさせることができる「CSShake」というプラグインを使ってみました。 CSSを読み込んで、クラス名を指定するだけで利用できるのでかなり便利に使えそうですね。 CSShake 使い方はとても簡単で、ダウンロードした「csshake.js」を読み込み、ブルブルさせたい要素にクラスを指定すればOKです。 1.CSSを読み込む

公開日：2015.11.20 更新日：2020.05.20 jQuery, カルーセルスライダー Slider Proは多様なオプションで痒いところに手が届くスライダーです。 ざっと概要をまとめると。。 レスポンシブ対応タッチデバイス対応Retina用画像の出し分け対応IE8以上で動作キャプションのアニメーション表示対応縦カルーセル、横カルーセル対応画面サイズによってレイアウト変更可能MITライセンス などなど。一番ありがたいのは、CSSなどを調整しなくても、オプションの付け替えでほぼ対応できるという点です。 まずはデモページをご覧ください。 Slider Pro 配布元 デモページ 必要なファイルを読み込む Slider Pro 配布元からファイルをダウンロードし、読み込みます。 今回使うのは、ダウンロードファイルの中に入ってる以下のファイルです。 slider-pro-master ├

公開日：2015.11.10 更新日：2020.05.18 jQuery, アニメーション アニメーション用のプラグインは色々ありますが、ずっと動き続けていて、なおかつIE7,8あたりも対応している方法はないものか。と探して行き着いた方法がこちらです。 ※2020年5月18日 サンプルが表示されなくなっていたので修正しました

どうもです、デザイナーのはやちです✌(´ʘ‿ʘ｀)✌ 梅雨明けの暑さでバテ気味です…この暑さ嫌ですな　c⌒っ´ʘ‿ʘ｀)っ はやちは静かに暮らしたい　c⌒っ ◞‸◟ )っ そんなこと言ってもこの暑さは和らぎません(◞‸◟) 今回はjQueryで簡単にコンテンツをオーバーレイ表示させる方法をご紹介していきます(◞‸◟) オーバーレイとは ライトボックスのように要素の上に要素を重ねて表示させる方法です 上に重ねる方の要素を半透明にさせて下の要素がうっすら見えるような表現に多く使われます( ˘ω˘)☝ HTML </pre> <div id="overlay"> <p id="text">ｲｪｰｰｲみてるぅ✌(´ʘ‿ʘ｀)✌</p> <p id="close">close</p> </div> <div id="btn">click</div> <pre> ID名overlayはオーバーレイされ

instafeed.jsはコメント情報(コメントの内容、コメントの回数など)を データとして取得し、表示することが可能ですが、ユーザーの特定が できません。 そのため、自分の投稿した画像だけを表示したいすることができません。 表示される画像はハッシュタグの内容や緯度経度(投稿場所)などから 指定して、画像上を取得し、表示することになります。例えば、 「#富士山」となっている画像をすべて表示させるということです。 一方のjquery-instagramでは、ユーザーの特定が可能です。そのため、 自分だけの投稿を表示させることができます。 ただし、instafeed.jsで表示できていたコメント情報を表示する ことができません。 このどちらかで事が足りる、またはその他のプラグインを探して間に 合わせるならよいのですが、表示させたい情報を取得し、反映させる 方法を次に紹介します。 ④画像データを

こんにちは、福岡のホームページ制作シンス株式会社の越水です。 ホームページ制作をしていると「Instagramの特定のハッシュタグで投稿されている画像を一覧表示したい」という場面があります。 今回はInstagramからリリースされているAPIとjQueryプラグインを使って、ホームページ上にInstagramの画像フィードを表示させる方法を紹介します。 好みのハッシュタグの画像を並べるのに便利なInstafeed.jsInstagramに投稿されている画像フィードを取得するために今回はInstafeed.jsというjQueryプラグインを利用します。 まずはInstagram APIの取得準備をする。そのための下準備として、InstagramのAPIを取得するためのアプリケーション登録をします。 アプリケーション登録といってもそれほど難しいことはしません。 まずはInstagram De

ajarunthomas.com animateClick jquery plugin

The Painting used for the parallax effect.Hey friends, I will be showing you how to create a simple multi-layered illustration with depth that transitions into the content in a unique way. We’ll be using a technique that involves CSS and pure JS (no jQuery!). The tutorial is for beginners with basic Javascript and CSS knowledge, so I will be explaining most of the things and link to external sourc

About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-

縦長のランディングページ、レスポンシブなスマホ対応ページなどに便利な機能や面白い仕掛け、気持ちいいインタラクションやエフェクトなどのアニメーションを実装できるスクリプトやjQueryのプラグインを紹介します。 Popper.js Popper.js -GitHub ポッパーはツールチップとポップオーバーを組み合わせたスクリプトで、今までのツールチップとは一味も二味も異なります。指定したエレメントに表示させるだけでなく、スクロールするコンテナ、ドラッグで移動可能な要素、ビューポートのよる方向の制御など、縦長ページ・スマホ時代のツールチップです。

よくある海外サイトのようにスクロールしていくと横からや下からなどからコンテンツが表示されていくページを作成するための『wow.js』と『Animate.css』のつかい方など。 『wow.js』と『Animate.css』でアニメーションをつけて動きのあるページをつくるis a post from:InfinityScope 投稿全文を表示する - View All Content Follow Me : FaceBook Page InfinityScope 関連オススメ記事ページを縦横斜めに、滑らかにスクロールすることが出来るJS,jQueryプラグインから4選CSS3の技術が使用されている美しくコーディングされたUI Kit　5個CSS拡張メタ言語を使い始めたので備忘録「SCSS（Sass）とLESSのどちらを導入するか」　　- はじめに -クリックするとほわわーんと輪っかを出してく

ウィンドウいっぱいの背景に画像や動画を配置したり、ランダムなパーティクルやラインを表示させるなど、主に背景周りで使えそうものや「この領域に何かもうひと手間加えたい...」というときに便利そうだと思うスクリプトを幾つかまとめてみました。 jQueryプラグインが多めですが単体で動かすことができるものもあり、実装方法などに関しても容易にできるものが多いと思います。 背景に画像や動画のスライドショーを実装できる「Vegas」 背景にブラウザいっぱいのスライドショーを実装することができるjQueryプラグインで、画像だけでなく動画を埋め込むこともできます。 また、オプションを変更することでスライドの動きにアニメーションを付けたり、用意されているパターンをオーバーレイで表示させたりすることもできます。

前回は、グラフィックスペースをブラウザ全体を使用してグラフィカルに見せる作例を作成しましたが、今回はPinterestのようなコンテンツの内容によって一定ではなく隙間なく埋めていくレイアウトをmasonryプラグインを使用して作成してみたいと思います。 カラム（写真などコンテンツを含んだひとまとまりの要素）を一定サイズに整然と並べるのではなく、それぞれの持つ幅や高さを生かして、タイル状に隙間無く敷き詰めるレイアウトを作り、バリエーションとして横幅サイズの異なるカラムの配置や、カラム幅の相対指定方法など配置を調整することもできます。 今回作成したサンプル 【サンプル】各カラムの幅をピクセル（絶対値）指定。カラム幅は一定 http://www.html5-memo.com/sample/jq-books/06/sample1_basic.html コンテンツを敷き詰めるプラグイン「masonr