2020年05月25日(月)
ビフォーとアフターの画像を比較するビューワーを簡単に実装できる軽量スクリプト -Image Compare Viewer
ビフォーとアフターの画像をコントローラーをスライドさせて比較するビューワーを簡単に実装できるスクリプトを紹介します。バニラJavaScriptで実装されており、他のスクリプトへの依存は一切ないので、利用しやすいと思います。
この手のスクリプトは今までにいくつか紹介してきましたが、今回のが一番いいかもしれません。
Image Compare Viewer
Image Compare Viewer -GitHubImage Compare Viewerの特徴
Image Compare Viewerは、ビフォーとアフターの画像を比較するビューワーを簡単に実装できます。
ということで、さっそく実装してみました。
中央のコントローラーをスライドさせ、ビフォーとアフターの画像を表示します。バニラJavaScriptで実装された軽量のビューワーで、依存関係は一切ありません。MITライセンスなので、商用プロジェクトでも無料で利用できます。
また、WordPressのプラグインとしても利用できます。
...
0
88
23
58author:
コリス
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログ
‹ PREV
グリッドシステムで強固なデザインレイアウトを作る
NEXT ›
フォーラムやFAQサービス、公式ドキュメントなどから任意のキーワードで検索できる開発者向け検索エンジン・「Quickref」
Ads
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログコリスの記事『ビフォーとアフターの画像を比較するビューワーを簡単に実装できる軽量スクリプト -Image Compare Viewer』についてまとめています。
この記事は特にjavascript・SEO・WordPressについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のコリスで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとコリスの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
