Webページに軽快な視差効果、スクロールすると要素が近づいてくるエフェクトを実装できる軽量のJavaScript -PushIn.js
Webページにインタラクティブな視差効果のアニメーションを実装できる軽量のJavaScriptを紹介します。 スクロールすると要素が近づいてくるエフェクトは、Appleのランディングページなどでもよく見かけます。スクロールすると要素が押し出されるように近づくプッシュイン、スクロールすると要素に向かってカメラが近づくドリーインなどのエフェクトを簡単に実装できます。 PushIn.js PushIn.js -GitHub PushIn.jsの特徴 PushIn.jsのデモ PushIn.jsの使い方 PushIn.jsの特徴 PushIn.jsはJavaScriptとCSSを使用して、ユーザーがWebページをスクロールしたときに指定した要素のスケールを操作することにより、要素が移動するような錯覚を作り出します。ブラウザに組み込まれているrequestAnimationFrameを使用しており、
touch-actionでスクロールやズームを止める（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 12日目） | Ginpen.com
知名度が低いウェブ標準ひとり Advent Calendar 2021 – 12 日目 今日は CSS の touch-action プロパティです。指操作の制御をします。 touch-action – CSS: カスケーディングスタイルシート | MDN デモ：https://codepen.io/ginpei/pen/gOGLrgG デモはタッチ対応端末でご覧ください。主にスマホ。 基本的な使い方 だいたいこんな値です。 auto – 通常 none – 反応しない pan-y – 縦方向スクロールのみ pinch-zoom – ズームのみ manipulation – スクロールとズームのみ（ダブルタップでの拡大を無効化） 他に下方向のみの pan-down とかいくつかあるので MDN をご覧ください。 Pointer Events 関係の仕様です。IE でも動きます。 使いどころ
jquery.graphviz.svg - GraphvizのSVGデータを表示/機能追加するjQueryプラグイン MOONGIFT
チャートやネットワーク図などを描くのに使われるのがGraphvizです。多くの場合PNGなどの画像で出力して利用しますが、SVGへのエクスポートも可能です。Web向けであれば、画像よりも使い勝手が良いでしょう。 そんなGraphvizで出力したSVGを表示するのがjquery.graphviz.svgです。 jquery.graphviz.svgの使い方 表示しました。 ノードをクリックすると、ハイライト表示されます。 さらにズームイン/アウトができます。 jquery.graphviz.svgはGraphvizのSVGデータに対して、ハイライトとズームイン、ズームアウトを追加します。さらにデータをレスポンシブにしてくれるので、どのデバイスに対しても適切な表示が可能です。 jquery.graphviz.svgはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT L
Spotlight.js - モダンなイメージギャラリー MOONGIFT
Webページで画像を並べて表示したいケースは良くあります。その際、クリックして単に画像を拡大表示するのでは面白くありません。浮かび上がるような演出だったり、アニメーションがUXを向上させます。 今回紹介するSpotlight.jsはモダンなイメージギャラリーになります。 Spotlight.jsの使い方 一覧表示の状態です。 クリックで拡大されます。 動画も利用できます。 情報を追加表示できます。 アニメーションなどは細かくカスタマイズできます。 Spotlight.jsは軽量さが売りとなっています。外部ライブラリへの依存もなく、Spotlight.js単独で手軽に利用できます。ズームインやアウト、自動再生、読み込み中のスピナーなど細かな部分に気が配られているのが好感です。 Spotlight.jsはJavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0
[CSS] position: sticky;を使用して、スクロール時に画像をズームさせるページのレイアウトを実装する方法
CSSのposition: sticky;を使用して、スティッキーヒーローセクションを実装する方法について紹介します。 スティッキーヒーローセクションとは、画像などをスクロールした際に固定し、その固定された画像の上にスクロールさせるコンテンツ要素です。固定された画像はズームさせたり、オーバーレイにすることもできます。 How to create a Sticky Hero section by CodyHouse 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに チュートリアルの動画 実装方法 はじめに わたし達は先日、スティッキーヒーローのコンポーネントを公開しました。このデモは、スクロールするとコンテンツを表示するスティッキーセクションです。 上記は、固定された画像をズームさせたデモで、オーバーレイにすることも簡単で
![[CSS] position: sticky;を使用して、スクロール時に画像をズームさせるページのレイアウトを実装する方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/39ce5a1514a3f90573d20acd23e68d827b403b5c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201902%2F2019051902-01.png)
Moving Backgrounds With Mouse Position | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Let’s say you wanted to move the background-position on an element as you mouse over it to give the design a little pizzazz. You have an element like this: <div class="module" id="module"></div> And you toss a background on it: .module { background-image: url(big-image.jpg);
10 Free Magnifying Glass Search Icons Sets (PSD + Vector)
In this article we have showcased 10 useful and free to use magnifying glass search icons in PSD and Vector formats for you. You can download them for free and use them in your projects. This is the most comprehensive list in this genre and the use of these magnifying glass search icons will help in saving a lot of valuable time as the designers need not to spend time in developing such icons from
ZooMove - 画像をスムーズに拡大するJavaScriptライブラリ
最近は画像の解像度が上がっており、撮影した写真のまま公開するととても巨大になってしまいます。そこで幅を縮めるのですが、あまり小さくすると折角の写真が見えづらくなってしまいます。 そこで必要に応じてズームするライブラリが便利です。今回はそんなライブラリのZooMoveを紹介します。 ZooMoveの使い方 最初の表示です。3つとも同じサイズです。 Image1はマウスオーバーするとちょっとだけ大きくなります。 Image2は一気に拡大されます。 Image3は枠を飛び出して拡大されます。 実際にマウスオーバーしているところです。 ZooMoveで見ると単にズームと言っても色々あるのが分かります。Image2は一気にズームするので、虫眼鏡のような使い方が良さそうです。Image3のズーム方法は面白いですが、使い方が難しいかも知れません。 ZooMoveはjQuery/JavaScript製のオ
iPhoneで「ズームオン」が表示される問題の対処
iPhoneで「ズームオン」が表示される問題の対処を紹介します。 １．問題点 iOSをアップグレードしてから、ズーム操作をしていないにもかかわらず「ズームオン」という表示がされるようになりました。 この「ズームオン」が表示されないようにしたいのですが方法が分かりません。 ２．ズームオンとは ちなみにズームオンとは、3本指で2回タップし、2回目のタップのあと指を画面から離さずに画面の上方向にスワイプするとズームします（設定が有効になっている場合）。 逆方向に動かすとズームオフになります。 指を離したあとでも、3本指で画面を移動させることができます。 その他にも操作方法がいくつかあります。 ３．対処方法 突然表示される原因は不明ですが、次の操作で「ズームオン」は表示されなくなると思います。 「設定」→「一般」をタップ。 「アクセシビリティ」をタップ。 「ズーム機能」をタップ。 「ズーム機能」を
OpenSeadragon - こんな細かく！ズーム対応の画像ビューワー MOONGIFT
カメラの解像度は年々上がる一方ですが、そこまで高解像度で撮った写真もコンピュータ上で表示するだけではサイズのムダかも知れません。4K、8Kディスプレイになれば違いますが、1080pレベルのディスプレイでは表現し切れていない部分があるでしょう。 そこで写真をズームして表示できるOpenSeadragonを使ってみましょう。ズームイン/ズームアウトすることでこれまで見えていなかった細部まで確認できるようになります。 OpenSeadragonの使い方 サンプルの写真です。 ドラッグで写真を動かせます。 ズームするとこんなに細かいところまで。 フルスクリーンモードもサポートされています。 フルスクリーンで拡大。書かれている文字まで読めますね。 せっかく高解像度で撮った写真ですからそれに合わせたビューワーを使って表示するのが良いでしょう。思いもしなかった被写体が確認できるかも知れませんよ。 Ope
知ってると便利！Photoshopの作業効率をアップするTips
Photoshopの知ってると便利な作業効率をアップするTipsを12個、紹介します。 全てPhotoshop CC2014対応ですが、ほとんどのものはCSでも使用できます。 Photoshop外からカラーを抽出 スポイトツールをドラッグしながら、カラーを抽出 通常の操作だとスポイトツールはPhotoshopの枠外に移動すると普通のカーソルに変わってしまいますが、Photoshop内でドラッグしながら移動すると、Photoshop外のカラーを抽出できます。 スポイトツールで複数のカラーを抽出 スポイトツールで抽出できるカラーは、一つだけではありません。 複数のカラーを抽出 Shift を押しながら、カラーを抽出 カラーは、10個まで抽出できます。 ※CSは、4個まで。 ブラシツールからスポイトツールに一時的に変更 選択ツールの選択時に「Ctrl (Macは、Cmd)」を押すと、一時的に移動
waifu2x – イラストをスムーズに拡大しよう
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました すごく格好良いイラストを見つけた時に、例えばそれを壁紙にしたいと思ったとしましょう。最近はRetinaが多くなっており、画像も見た目の2倍のサイズでないとシャギーの目立つ残念な表示になってしまいます。 そこまで巨大な画像はそうそうありません。そこでwaifu2xを使って元画像を拡大してみましょう。シャギーなくなめらかに拡大を行ってくれます。 waifu2xの使い方 waifu2xではWeb上で使えるデモ版を用意しています。 イラスト画像をアップロードするとこんな感じに拡大されます。全くシャギーがなく、なめらかです。 配布サイトにある画像です。GIMPで拡大した場合と比べて圧倒的になめらかなのが分かります。 waifu2xは1.6倍または2倍で拡大できるようになっています。特にアニメ
jQuery responsive mousehover zoom + 360 degree product viewer
The extension supports color swatch or product variations in general. You can change images, 360 product spins and videos effortlessly by using an API method. Below the circles, click on the text links to display the code that runs on switching the respective content. Of course, if you are using one of our modules for an e-commerce system, the integration with product variants is already there. Th
10+ jQuery Image Zoom Effect Plugins | Tripwire Magazine
With jQuery image zoom effect plugins, you can create amazing image zoom effects with minimal coding effort. This is very useful if you have large images that will otherwise take up too much space on your web pages. With a jQuery zoom script you can keep the image smaller and allow visitors to zoom in as needed. Using jQuery zoom image effects is an elegant way to show details e.g, in photographs,
11 Free Magnifying Glass Search Icons (PSD) Set
These days magnifying glass search icons are very common and you can see that they are used in various websites as well as software products. By using unique magnifying glass search icons you can easily improve the appearance of your websites and software products. These free magnifying glass search icons are in high-res psds, and all layers are separated. Graphic designers, web designers and deve
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - nextapps-de/spotlight: Web's most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies.
Medium Zoom - Medium風に画像をズーム
最近のWebサイトで見かけるヘッダのアイデア・実装方法のまとめ
[JS]デスクトップでもスマホでも操作が軽快！画像の拡大表示をシンプルなコードで実装 -simplebox.js![[JS]デスクトップでもスマホでも操作が軽快！画像の拡大表示をシンプルなコードで実装 -simplebox.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/9650eece0f156d58c749a4875823912b7f1dcad1/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015111301.png)
