ECサイトでよく見かける商品画像の拡大表示を実装する方法を紹介します。 Drift.jsは、ECサイトでよく見かける商品画像の拡大表示を実装することができるJSライブラリです。 画像の拡大率、レスポンシブ時の虫眼鏡表示の有無、マウスカーソルに対する虫眼鏡の位置など細かく調整することができ、虫眼鏡（拡大鏡）の形はスタイルシートを調整して好きな形に変更できます。 jQueryなどのライブラリに依存せず、単独で動作します。 ECサイトではできるだけ高解像度の写真を使って、ディテールを確認できるようにしておくとコンバージョン率が上がるので、実装したい機能です。 デモ デモページに実装してみました。 画像（左側）にマウスオーバーすると、右側に拡大した画像が表示されます。 こちらは虫眼鏡バージョン、画像にマウスオーバーすると、画像に虫眼鏡を重ねたように拡大表示されます。 使い方 実装は簡単です。 デモ

今日ご紹介する［Zoom SlideShow］は、スライドショーとズーム機能を兼ね備えた、ちょっと特殊な動きをするjQueryプラグインです。 公式のデモサイトは以下。 Zoom SlideShow : https://zoom-slideshow.vincidev.com 実際にサンプルを作ってみました。 オンズのサンプル : https://on-ze.com/demo/jquery-zoomslideshow/ サムネイルを使ってスライドを制御できて、なおかつメインエリアの画像にカーソルを合わせると、その部分が虫眼鏡のように拡大して表示されます。 使い方は以下。 必要なファイルをダウンロード最初に必要なファイルをダウンロードしてきます。 GitHub : https://github.com/GurYN/zoom-slideshow 上記GitHubサイトから、「Clone or d

アーカイブのリスト表示は更新するほど長くなる WordPressのアーカイブウィジェットのリスト表示は、更新を長く続ければ続けるほど邪魔な存在になってきます。 というのも、更新をすればするほど、以下のように長いアーカイブリストになるからです。 僕なんか、たかだか2年ちょっとの更新期間なので、これぐらいで済んでいます。けれど、もっと長くブログを続けている場合、長さはこんなものでは済みません。 流石に、これでは長すぎるので、更新年ごとに折りたためるようにすれば、かなりすっきりするかと思います。 というわけで、いろいろ試行錯誤してコードを書いてみた結果、以下のように表示できるようになりました。 以下では、プラグインを使用せず、コピペのみで、このようにできるカスタマイズ方法を紹介します。 カスタマイズの主な手順 今回のカスタマイズに必要な主な手順は以下です。 style.cssにCSSをコピペ j

Colorboxの使い方：jQueryで簡単モーダルウインドウjQueryでモーダルウインドウUIを簡単に作れるColorboxの使い方を解説。ウェブページ全面を暗転し、中央に重ねたボックスをモーダルウインドウ風に見せるUIは、Lightbox系jQueryプラグイン「Colorbox」を使えば、ほんの3行程度のJavaScriptを書くだけで作れます。モーダルウインドウ内には、装飾された文章でも画像でも「別HTMLの中身」でも何でも表示できて便利です。 モーダルウインドウとは モーダルウインドウとは、何らかの操作をするまで元の画面には戻さないサブウインドウのことです。モーダルウインドウが表示されている間は元の画面にあるUI(ユーザ・インターフェイス)を操作できないので、絶対に何らかの反応(選択や回答など)をしてもらいたい場合や、読み飛ばされると困る情報を表示する際などに使われます。 例え

ホームページにダイナミックな動きや便利な機能を実装する時に役立つのが、jQueryプラグインです。 jQueryプラグインは、数行のコードを差し込むだけでいいほど実装が簡単で、HTMLやCSSだけではできないような複雑な動きを表現することができます。 しかし、そんなjQueryプラグインも、たくさんあってどれがいいかわかりません。 そこで今回は、2017年最初にチェックしたいjQueryプラグインを紹介していきます。 言葉だけで説明するのは難しいので、デモサイトへのリンクもご用意しました。 ぜひデモも合わせてご覧ください。 2017年最初にチェックしたいjQueryプラグイン9選 1. DateBox ダウンロード / デモ DateBoxは、ブラウザやデバイスにかかわらず、テキストボックスに同じように表示することができるカレンダーや時間のプルダウンを実装することができるjQueryプラグ

非レスポンシブのサイトをiPadで見ようとするとiPadが適切なサイズで表示してくれます。例えば、横幅が1200pxあるサイトでもiPadを縦にしたときの横幅768pxに合わせて縮小してくれるのです。 ところが、タブレットサイズに対応していないレスポンシブ対応のデザインだと実寸のまま表示されてしまいます。往々にして横が画面に収まりきらず、横スクロールが発生しちゃうんですよねー。 レスポンシブ対応をするにあたり、iPadなどのタブレット端末はPCと同じ表示でという希望がけっこうあります。 そんなときは、vierportを切り替えてデバイスに合わせて表示する方が楽に対応できると思います。 というわけで、ユーザーエージェントで判別してタブレットとスマホでviewportを切替える方法のメモです。 jQueryに頼りたいと思います。 // スマホとタブレットでviewportを切替え $(func

スマートフォンにも使える、クリックで開くアコーディオンメニューjQuery スマートフォン等、限られたスペースで複数のコンテンツを設置できるアコーディオンメニュー。 シンプルなコードで動作しますので、実装してみてはいかがでしょうか。 デモページ DEMO 説明 今回は2種類のアコーディオンを紹介します。 1つは「ul」で組むリスト、もう1つは「dl」で組むリストです。 なお、「ul」リストは複数開くことができ、「dl」リストは別のタブが閉まるようになっていますので使い分けて見て下さい。 JS $(function(){ $(".accordion p").click(function(){ $(this).next("ul").slideToggle(); $(this).children("span").toggleClass("open"); }); $(".accordion dt"

Google Maps APIを使って、地図を表示したりマーカーを立てたりをやってみます。 今回使用するのは、以下のJavaScript API になります。 Google Maps JavaScript API | Google Developers ■目次 Google マップの表示 Google マップにマーカーを立てる マーカーに吹き出しを追加する 住所から緯度と経度を調べる Google マップに複数のマーカーを立てる 1. Google マップの表示 まずは地図を埋め込んでみます。 実際に使用する場合はAPIキーを取得したほうがよいですが、今回は動作の確認ができればよいので省略します。 APIキーを使用する場合は、こちらからAPIを有効にして、APIキーを作成して下さい。 1-1. 地図を埋め込む場所を指定 ■HTML <div id="sample"></div> 1-2.

Posted: 2014.07.11 / Category: javascript / Tag: jQuery 「jquery.morphing.js」は画像などを丸くしてマウスポインターの動きに追従してぐにょぐにょ（？）することができるjQueryプラグインです。 使い方 リンク先はデモも用意されていたり日本語だったりなので、そちらを見てもらった方が確実だと思いますが。。 html <div class="js-morphing"> <img src="img/01.jpg" alt=""> </div> JavaScript <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="../jquery.morphing.js"></script

備忘録 JavaScriptでユーザーエージェントを取得しclassを付与する記述。 JSライブラリ依存せずに使用。 記述 // 変数 var agent = navigator.userAgent; // ユーザーエージェント var htmlElement = document.documentElement; // html要素 // UserAgentで振り分けてhtmlにclassを振る if (navigator.platform.search("Mac") != -1) { htmlElement.className += ' mac'; } if(agent.search("Windows") != -1){ htmlElement.className += ' win'; if((agent.search("Trident") != -1) || ((agent.sear

こんにちは、CTOのづやです。 今更ですが、jQueryのプラグインでアニメーションを高速化してくれる「Velocity.js」を使ってみました。 今回は、簡単な使い方をまとめたのでご紹介したいと思います。 まずは準備から http://julian.com/research/velocity/ 上記の公式ページにjQueryやtransitとのアニメーションの比較をできるデモがありますが、他よりかなり軽快に動くようです。モバイル対応もいい感じらしいですよ。 使うときは、ソースをとってくるか、用意されているCDNなどからVelocity.jsを読み込みます。 <!-- 今回はjQueryも読み込む --> <script src="//code.jquery.com/jquery-2.1.3.min.js"></script> <!-- CDNから読み込んでみる --> <script s

はじめに 今話題のVelocity.jsについて初歩の初歩だけまとめました。 ※追記：↓対抗馬のanime.jsについて記事書きました※ アニメーションライブラリ決定版か!?anime.jsで軽量・軽快に実装！ Velocity.jsとは jQueryのプラグイン。 $.animateと互換性を持ち、さらに高機能で非常に軽快なアニメーションをする。 アニメーション技術補足 jQuery Animation 便利だが重い。コマ落ちし過ぎ。 CSS Transition, CSS Animation 軽いが、アニメーションを繋ぐなどが出来なかったりなど使い勝手が悪い。 結局、JavaScriptを頼らないと使い物にならないことが多い。 Transit.js 有名なアニメーションライブラリのひとつであるjQueryプラグイン。 CSS Animationを制御しているため、軽快。 そして、3d-

最近のUIの傾向として、ユーザーが操作して楽しくなるようなアニメーションは大切なポイントです。そんな気持ちいいCSS3のアニメーションでモーダルウインドウをページ全体に表示するjQueryのプラグインを紹介します。 横からアニメみたいにひゅっとスライドさせたり、ぼい～んとバウンドさせたり、気持ちよくて面白いものが簡単に実装できます。 animatedModal.js animatedModal.js -GitHub animatedModal.jsのデモ animatedModal.jsの使い方 animatedModal.jsのデモ デモでは、3種類のアニメーションを使ったモーダルウインドウを試せます。 アニメーションはanimate.cssを利用しているので、80種類以上のエフェクトが利用できます。 デモページ：Demo 3 In: bounceIn, Out: bounceOut a

最近のWebサイトでよく見かける面白い仕掛けのコンテンツやエフェクト、便利な機能を実装できるjQueryのプラグインやスクリプトを紹介します。 Midnight デモページ ロゴやヘッダなどをスクロール時に固定表示し、スクロールして表示されたコンテンツに応じて、固定エレメントのスタイルシートを変更させて表示するjQueryのプラグイン。 デモでは、表示されているコンテンツに応じて、ロゴの背景色とカラーが変わります。 Off Canvas Menu Effects デモページ メニューをサイドやトップ・ボトムから気持ちいいアニメーションで表示させるOff Canvas Menuのかっこいいエフェクトのまとめ。アニメーションのバリエーションとして見るだけでも楽しいです。

web開発者のための さまざまな動きを表現できるチュートリアルまとめ「30 Fresh Articles and Tutorials for Web Designers」 webサイトを魅力的に見せるためには、デザインはもちろん、動きにも力を入れたいもの。シンプルなフラットデザインが主流となっているため、特に重要な要素となってきているのではないでしょうか？今回はそんな時に参考にしたい、さまざまな動きを表現できるチュートリアルまとめ「30 Fresh Articles and Tutorials for Web Designers」を紹介したいと思います。 Stylish CSS Buttons いろいろなパーツに動きや、エフェクトを加えられるチュートリアルが多数まとめられています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 Page Preloading

This domain may be for sale!

こんにちは、工藤です。 モーダルウィンドウについて調べるがあり、いい機会なのでまとめてしまいたいと思います。 モーダルウィンドウとは？ ちなみにモーダルウィンドウとは図で説明するとこんな感じです。 なんとなく見たことがあります・・よね？詳しい事はwikipediaで。 jモーダルウィンドウ プラグイン lightbox2 http://lokeshdhakar.com/projects/lightbox2/ モーダルウィンドウと言ったらコレかなと思います。 完全に初心者だった時も苦戦せずに設置することができました。 シンプルながらエフェクトなども含めてとてもきれいに表示してくれます。 leanModal http://leanmodal.finelysliced.com.au/ テキストのみでただ単にモーダルを使用したい！という時にはこれがおすすめです。 すごくシンプルで軽量なプラグインで

お疲れさまです、デザイナーのモモコです。 今回は要素の切り替えや表示を美しく表現するCSSスタイル・JSプラグインやエフェクトを5つご紹介します。 要素の切り替えや表示を美しく表現するプラグイン・エフェクト5選 fullPage.js https://alvarotrigo.com/fullPage/ フルスクリーン表示のページを切り替えるプラグイン。 DEMOのシンプルな切り替えの他にも、ヘッダーを固定した場合や、動画を背景に表示する場合など様々な用途のオプションが用意されており、とても使い勝手が良さそうです。 Section Separators https://tympanus.net/codrops/2013/10/03/a-collection-of-separator-styles/ 主にCSSとCSS3で装飾した要素ごとの区切り線がまとめられています。 約25種類ほど用意され