Flashを使用せずに、液体が流れるように画像を少しずつ表示するスクリプトをWeb Reflectionから紹介します。 JavaScript Liquid Image FX demo 上記のデモでは、Firefoxのロゴが左から順に上下左右から液体が流れるように画像を少しずつ表示します。 また、動きを組み合わせたデモもあります。
[JS]液体が流れるように画像を少しずつ表示するスクリプト -Liquid Image FX
Flashを使用せずに、液体が流れるように画像を少しずつ表示するスクリプトをWeb Reflectionから紹介します。 JavaScript Liquid Image FX demo 上記のデモでは、Firefoxのロゴが左から順に上下左右から液体が流れるように画像を少しずつ表示します。 また、動きを組み合わせたデモもあります。
[JS]SVGを使ったアニメーションが楽しい、回転する新感覚のナビゲーションを実装するスクリプト -wheelnav.js
demo: pie menu アイコンをクリック（タップ）すると、バウンドしながらパイ状に広がります。省スペース用のシェアボタンとかにしてもよさそうです。 wheelnav.jsの使い方 Step 1: 外部ファイル 当スクリプトとRaphaël.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="js/required/raphael.min.js"></script> <script type="text/javascript" src="js/required/raphael.icons.js"></script> <script type="text/javascript" src="js/dist/wheelnav.js"></script> </head> Step 2: HTML ナビゲーションを
![[JS]SVGを使ったアニメーションが楽しい、回転する新感覚のナビゲーションを実装するスクリプト -wheelnav.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/302021738966caaf051fa35a7a6c058cd7935a66/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015022401.png)
[JS]幅広いブラウザをサポート！表示サイズに最適な画像・背景画像を表示するレスポンシブ対応の軽量スクリプト -Rimg
ページが読み込まれた時にDOMを調査してimg要素を自動で探し、設定したブレイクポイントに応じて最適な画像ファイルを表示するスクリプトを紹介します。 SVGとPNGが混在しているページでも無問題、SVGはベクターなのでそのまま拡大、PNGはそのサイズ用の画像ファイルを表示する賢い仕様になっています。 Rimg -GitHub Rimgの特徴 Rimgのデモ Rimgの使い方 Rimgの特徴 100%フロントエンドのコード（バックエンドは一切無し）。 単独で利用できるスクリプト、jQueryなどは必要ありません。 しかも、超軽量（6.0KB）。 UA判定やクッキーなど、環境に依存して判定するものは使用していません。 画像や背景画像をレスポンシブ対応にし、最適な画像を表示します（Retinaディスプレイ、リサイズ対応）。 スクロールして画像が表示されたらロードするLazy Loadに対応。 ス
![[JS]幅広いブラウザをサポート！表示サイズに最適な画像・背景画像を表示するレスポンシブ対応の軽量スクリプト -Rimg](https://cdn-ak-scissors.b.st-hatena.com/image/square/7216083dac49099812cea7a817f39a5b9988bd38/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015021301.png)
[CSS]にょいーんとアニメーションでパネルを表示するスタイルシート
JavaScriptやFlashを使用せず、パネルをにょいーんとアニメーションで表示・非表示するスタイルシートを紹介します。 デモページ 実装 デモページを例に実装方法を紹介します。 HTML 最初のチェックボックスはdisplay:none;で非表示で、その後にlabel要素を実装します。 <input type="checkbox" id="doggiezzz" class="popUpControl"> <label for="doggiezzz" class="header-button"> <input type="checkbox" id="doggiezzz" class="popUpControl"> <label for="doggiezzz" class="header-button"> More dogs! <span class="box"><img src="ht
SVGを使いこなすための便利ツールいろいろ
2015年1月28日 SVG, 便利ツール SVG（Scalable Vector Graphics）はIllustratorで作成したようなベクター画像を表示する技術。高解像度ディスプレイでもくっきりはっきり表示できるので、近年海外サイトを中心に見かける機会が増えてきました。SVGについてはWebクリエイターボックスでも何度か取り上げてきたので、耳にしたことのある方も多いかと思います。今回はそんなSVGを使いこなすための便利なオンラインツールやJavaScriptなどを紹介します。SVGってなんぞや？という方は、過去記事「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」をご覧ください！ ↑私が10年以上利用している会計ソフト！ ラスター画像をSVGに変換 Vector Magic Vector MagicはJPEG、GIF、PNG形式の画像をベクター画像に変換し、EPS
画像を矩形以外の形状で表示したい人のためのチュートリアル
画像にPNGマスクを使用して、ブラシストローク状、サークル状など、矩形とは異なる形状で表示するチュートリアルを紹介します。 デモページ もう一つのサークル状のデモは、下記ページのギャラリーのサムネイルとして使用されています。 Roundfolio 画像の枚数が少ないのであれば個別に画像を作成してもよいかもしれませんが、このデモのように数多くあると、このテクニックを使用した方がより効率よく実装できます。 [ad#ad-2] 画像の作り方 画像は3種類が必要で、全て同じサイズにします。 ロールオーバー用の画像 ※透過PNG画像 マスク用の画像 ※透過PNG画像 ベースとなる画像 サークル状に使用する画像3種類 制作：HTML, CSS, JavaScript HTML ロールオーバーとマスク用に2つの空span要素を使用します。 <a href="images/gallery-full.jpg
[JS]画像切り替えやパネル表示にフェードを使ったスライドショーのスクリプト -Fade-in slideshow
画像の切り替えやパネルの表示にフェード効果を使用したスライドショーのスクリプトをDynamic Driveから紹介します。
[JS]動作が軽快なパネルを水平・垂直にスライドするスクリプト -Easy Slider
リスト要素のパネルをスムーズなアニメーションでスライドさせるスクリプト「Easy Slider」をcss globeから紹介します。 Easy Slider 1.5 demo パネルには画像やテキストなどを配置することが可能で、スライドのコントローラーはテキストベースのものやグラフィカルなものを使用することができます。 demo 1（スタイルは無し） demo 2（スタイルを適用） demo 3（スタイル無しで垂直方向に） demo 4（スタイル適用、自動スライド） demo 5（複数のスライダーを設置） スクリプトのオプションでは、スライドのスピード、スライドの自動・手動、ポーズの時間などを調整することができます。 Easy SliderはjQueryのプラグインのため、実装にはjquery.jsが必要です。
[JS]スマホやタブレットのタッチデバイスでの操作がめちゃ快適な画像ギャラリーのスクリプト -PhotoSwipe
サポートするタッチジェスチャーの一覧 PhotoSwipeの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 <!-- Core CSS file --> <link rel="stylesheet" href="path/to/photoswipe.css"> <!-- Skin CSS file (optional) --> <link rel="stylesheet" href="path/to/default-skin/default-skin.css"> <!-- Core JS file --> <script src="path/to/photoswipe.min.js"></script> <!-- UI JS file --> <script src="path/to/photoswipe-ui-default.min.j
![[JS]スマホやタブレットのタッチデバイスでの操作がめちゃ快適な画像ギャラリーのスクリプト -PhotoSwipe](https://cdn-ak-scissors.b.st-hatena.com/image/square/d65d654192b6c35de8b5e9ca6ebde66452cbfe56/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014121601.png)
JPEG画像の約半分のファイルサイズで同品質のものを表示できる画像形式「BPG」が誕生、実際に使ってみるとこんな感じ
同品質のJPEG画像と比較するとファイルサイズを約半分以下に縮小できる新しい画像形式が「BPG」で、FFmpegやJavaScriptだけで動くLinux「JSLinux」などを開発したFabrice Bellard氏が開発した画像形式です。ただサイズが軽いというだけではなく、グレイスケール・YCbCr＝4:2:0・4:2:2・4:4:4・RGB・YCgCo・CMYKなどの色空間をサポートし、アルファチャンネルや可逆圧縮にも対応しています。 BPG Image format http://bellard.org/bpg/ BPGが他の画像形式と比べてどれくらい優れているのかを比較できるのが以下のページ。2種類の画像形式で同程度のファイルサイズの画像を表示させており、「mozjpeg」とBPGとで同じ画像を比較すると、BPG画像の鮮明さが際立ちます。 BPG Image Comparison
JavaScriptで画像の顔認識をする方法【Face Detection】
JavaScriptを使って、写真の顔を認識、抽出して、その範囲を取得する方法を解説。Face Detectionを使います。
[JS]透過処理をした写真画像の転送量を軽くする方法
通常、透過処理をした写真画像を使用する際のフォーマットはPNGを使用することが多いと思います。これを写真画像にJPEG、その上にマスクのPNGを使用してトータルの容量を軽減する方法を紹介します。 デモでは、PNGのみで127KB、JPEG with PNGで42KB、と約1/3容量が軽減しています。 ;(function() { var create_alpha_jpeg = function(img) { var alpha_path = img.getAttribute('data-alpha-src') if(!alpha_path) return // Hide the original un-alpha'd img.style.visiblity = 'hidden' // Preload the un-alpha'd image var image = document.cre
[JS]シンプル！高性能！超軽量！使い勝手の良いコンテンツスライダーのスクリプト -jContent
デモ：カルーセル機能付きのスライダー：垂直方向 jContentの実装 実装は簡単で、パネル内のコンテンツをdiv要素で配置し、数行のスクリプトを記述するだけです。 HTML <div id="demo"> <a title="" href="#" class="prev"></a> <div class="slides"> <div>...</div> <div>...</div> <div>...</div> <div>...</div> </div> <a title="" href="#" class="next"></a> </div> JavaScript <script type="text/javascript" language="javascript" src="js/jquery-1.5.2.min.js"></script> <script type="text/j
第1回 SVGの基礎知識 | gihyo.jp
SVGは比較的古くからある仕様の1つですが、2010年3月にマイクロソフトがInternet Explorer 9でのサポートを表明してから一気に注目が高まりました。そんな古くて新しいSVGを今から使える情報と、将来の展望を全4回の集中連載で解説します。 SVGとは SVG（Scalable Vector Graphics）は、XMLベースのベクターグラフィック言語もしくは画像フォーマットです。W3Cによってその仕様が定義されており、画像フォーマットとして用いる場合は拡張子.svgが使用され、MIME形式はimage/svg+xmlが用いられます。 SVGの現状 Firefox、Safari、Google Chrome、Operaなどのブラウザが既にサポートしており、Internet Explorerもそのバージョン9、具体的にはInternet Explorer 9: Platform
[JS]省スペース用に二種類のズーム機能を備えた画像スライダー -Portfolio Zoom Slider
Portfolio Zoom Slider with jQuery デモページ [ad#ad-2] ズーム機能は省スペース用に二種類実装されています。 一つ目のズームは上キャプチャのように、ホバー時にそのエリアのみズームで表示します。二つ目はクリック時に拡大画像をLightbox風エフェクトで表示します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]Apple風の画像ギャラリー：カバーフロースクリプトの決定版 -ContentFlow
[JS]画像をダイナミックな上下のスライドで変更するスクリプト | コリス
[JS]二枚の画像を少しずつブレンドして切り替えるスクリプト -Floom
GitHub - vvo/gifify: 😻 Convert any video file to an optimized animated GIF.
https://coliss.com/articles/build-websites/operation/css/css-image-gallery-with-permanent-link.html