jQueryでスクロール量に応じて拡大するヒーローイメージ
jQueryでスクロール量に応じて拡大するヒーローイメージ 最近はトップページでメインビジュアルを画面いっぱいに表示することが多いですよね。 ヒーローイメージというらしいですが、今回はjQueryを使用してスクロール量に応じて画像を拡大する方法をご紹介します。 投稿日2016年12月28日 更新日2016年12月28日 HTML 画像はCSSので配置するのでscale-bgというクラス名の空のdivを配置します。 fixedで固定表示するので他の要素とは別にしておきます。 HTML <div class="scale-bg"></div> <h1>Title</h1> <div class="contents"> ・・・ </div> CSS scale-bg に fixed、contents に relative を指定して位置を調節します。 CSS .scale-bg { backgr
画像ズーム効果によるシンプルなライトボックスを実装できる「Zoomify」 – bl6.jp
Zoomifyは、画像のズーム効果を備えたシンプルなライトボックスのためのjQueryプラグインです。完成するページはとにかくシンプルです。整列された画像をクリックすれば、ページの移行を行うことなく、その場で画像が拡大されます。こちらのプラグインはレシポンシブ対応です。デモページでは風景画像が主に使用されていますが、拡大機能を活用し細部を写した画像に対しても効果的です。 優れたユーザビリティと機能性 以下、Zoomifyのデモになります。 デモ Zoomifyの良さは２つあります。１つめは、「ユーザビリティに優れている」ことです。画像の上にマウスオンするとカーソルが「虫眼鏡」に変化します。虫眼鏡のレンズ部分には「＋」が表示されます。画像が拡大表示されることを、サイト訪問者に一目で認識してもらえることを期待できますね。 クリックし拡大された画像上では、「－」に変化します。縮小（元に戻る）する
クールな画像拡大jQueryライブラリ「lity.js」、レスポンシブにも対応！ | SHINGO IRIE
クリックで画像が拡大されるライブラリはlightboxなど数多くありますが、その中でもデザインの邪魔をせず、実装もかんたんなライブラリ、それがlity.jsです。 使い方公式サイトから一式ダウンロード。 ダウンロードしたファイルの中で使うのはdistフォルダ内のlity.js、lity.cssのみ。 jQueryの後に読み込ませます。 <link href="lity.css" rel="stylesheet"> <script src="jquery.js"></script> <script src="lity.js"></script> あとは、 <a href="http://image.jpg" data-lity>Image</a> のようにdata-lity属性をつけるだけで動きます。かんたんですね。下がlity.jsの表示サンプルです。 WordPressへの組み込みWor
【jQuery】画像がスムーズに拡大縮小する動きが気持ちイイ［zoom.js］の使い方
画像をクリックすると、スムーズな動きで拡大表示され、ウィンドウをスクロールすると再び気持ちのイイ動きで縮小される、ライトボックス風のjQueryプラグインを紹介します。 ［zoom.js］と名付けられたこのjQueryプラグインですが、シンプルでいて非常に完成度が高いためか、最近かなりの注目を集めているようです。 まずは以下のURLより、実装したサンプルをご覧ください。 ［zoom.js］：実装サンプルはコチラ クリック操作で拡大。 またスクロールさせる以外に、もう一度画像をクリックするかESCキーでも縮小させることができます。 この手の画像操作系のライブラリは動作が重く、なかなか導入に踏み切れないケースが多々ありますが、この［zoom.js］は非常に軽快に動作するので好感度MAXです。 導入手順 さて。この［zoom.js］を実際に設置してみましょう。 まずは公式サイトよりメインのデータ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
