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の良さは２つあります。１つめは、「ユーザビリティに優れている」ことです。画像の上にマウスオンするとカーソルが「虫眼鏡」に変化します。虫眼鏡のレンズ部分には「＋」が表示されます。画像が拡大表示されることを、サイト訪問者に一目で認識してもらえることを期待できますね。 クリックし拡大された画像上では、「－」に変化します。縮小（元に戻る）する
スマホで拡大表示ができなかったサイトのタグ修正方法。
WordPressでレスポンシブデザインのサイトを作成しようと思ったら、ヘッダーのmeta要素に name=”viewport” を追加すると、文書の表示領域を設定することができます。 また、購入したレスポンシブテーマでサイトを作成したあとスマートフォン閲覧のとき、ピンチアウト(拡大)して見たかったのにできなかったという時も、ヘッダーのmeta要素、name=”viewport” を編集すると、拡大（縮小）表示が可能になります。 ピンチアウトで拡大できないタグ例 header.php 内のmetaタグが下記の場合だったら･･･。 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
クールな画像拡大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］を実際に設置してみましょう。 まずは公式サイトよりメインのデータフ
二次元画像を拡大したいと思ったことはありませんか？ - デー
うまくできましたか？ ボヤけたり、ギザギザになったりしませんでしたか？ waifu2xをお試しください。 (ブラウザの処理に影響されないようクリックで拡大おねがいします) waifu2xは、二次元画像を2倍に拡大するソフトウェアです。多くの二次元画像についてスゴイ級のクオリティで拡大できます。 waifu2xは、最新鋭の人工知能技術 Deep Convolutional Neural Networks を使って開発されました。 waifu2xの人工知能は、次の問に答えます。 いまから与える画像はある画像を半分に縮小したものである。縮小される前の画像を求めよ。 画像を拡大するのではなく、縮小される前の状態に戻します。 縮小されてないオリジナル画像を与えた場合も、やはり縮小される前の画像を答えます。 その画像は本来存在しないものですが、waifu2xはそれを想像で創ります。 二次元画像のJPE
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
