[JS]Lightboxの進化形！操作性が快適でフラットなデザインにもぴったりなレスポンシブ対応のスクリプト -Strip
スマホなどの小さいスクリーンでは昔からあるLightbox風の体験を与え、より大きいスクリーンではページ上にインタラクションのスペースを残すよう設計された、画像や動画をアニメーションで拡大表示させるjQueryのプラグインを紹介します。 フラットなデザインにも相性が非常によく、操作も快適でエレガントです！ しかも、IE7+にも対応。 Strip Strip -GitHub Stripのデモ Stripの使い方 Stripのデモ デモはChrome, Safari, Firefox, Opera, IEは7+、iOS5+, Android3+でご覧ください。 各画像をクリック・タップすると、拡大画像がスライドして表示されます。 拡大時はそのまま他の画像も表示できるギャラリー機能にも対応しています。 デモ：幅780pxで表示 スライド表示させるのは画像だけでなく、YouTubeやVimeoなど
![[JS]Lightboxの進化形！操作性が快適でフラットなデザインにもぴったりなレスポンシブ対応のスクリプト -Strip](https://cdn-ak-scissors.b.st-hatena.com/image/square/b4b391a890221ac5696699ef145a5921c27e5824/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014100601-01.png)
UXの効果が数字でわかる！5つのUX KPI : DeNA Creator(クリエイター) Blog
プログラミング教育や社員の健康をサポートする「CHO室」の取り組みなど、DeNAのCSRに関する情報を発信するブログ
JavaScript GIF Encoder “GifWriter.js” 0.1.0 をリリースしました - ひだまりソケットは壊れない
2013 年 4 月 22 日に JavaScript の GIF Encoder ライブラリをリリースしました。 TypeScript で書いてます。 ダウンロードとデモ 次のページからダウンロードできます。 Web 上で動くデモもあります。 GifWriter.js — GIF Encoder written in TypeScript TypeScript で書かれたソースコードは GitHub のリポジトリに置いてます。 Repository on GitHub : nobuoka/GifWriter.js · GitHub クラス 主要なクラスは次の 2 つです。 vividcode.image.GifWriter vividcode.image.MedianCutColorReducer vividcode.image.GifWriter vividcode.image.Gif
『javascriptで画像処理してみよう(1)〜OpenCVjs〜』
画像処理だけで飯が食えるかっ！？ 主にコンピュータ関連の話題中心にしていこうかと思ってますがどうなるかは不明です。 写真の加工や顔認識といった画像処理の話題が多くなるかと思います はじめまして。京都の会社で画像処理エンジニアをしてますsakiyamaKです。 いつからかinstagramとかで写真をお洒落に加工するフィルタが流行りだして、ずっと興味があったので自分のプログラムで再現できないかと調べてみました。 で、一応コツがつかめる程度には再現できたんですが、いかんせん画像処理といえばC言語系でやるのが普通です。でもそれだとウェブ系の人たちにウケが悪そうだなと思ったんで、まずjavascriptの画像処理ライブラリを作ってみました。 名づけてOpenCVjs！ 名前の通り画像処理ライブラリのデファクトスタンダードであるOpenCVのjavascript移植版です。 せっかく作ったんで誰かに
無料ではじめるフォント製作マニュアル
拙作スクリプトとwebサービスを利用してフォントファイルを作る方法についてまとめます．通常フォントを作るには専用のエディタを用意する必要がありますが，簡単な利用のために環境を整えるのは面倒です．今回紹介するのは品質はそこそこに，それなりに使い物になるフォントをできるだけ既存の環境を使って作る方法です．自作したフォントが動作するのは見ていてとても面白いので，是非試してみて下さい． 準備 用意するものはこれだけです．後は全てwebページから実行できます． フォント化したい画像ファイル（pngとか，svgとか） step1 フォント化の画像ファイルを用意する まずはじめにフォント化したい画像のファイルを作ります．画像形式としてはブラウザで読み込める形式であればpngでもjpegでも構いませんが，png形式のほうが良い結果が得られるでしょう． 例えば次のような画像を用意します． 画像の大きさは文字
シンプルなパララックス効果付きのイメージスライダーを実装するjQueryプラグイン・jQuery Destaque - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 画像がスライドする際に視差効果 を与える事が出来るjQueryプラグ インのご紹介。イメージスライダー とは相性良さそうですね。シンプル なものですが、応用も出来そうです。 パララックスなイメージスライダーです。画像をスライドさせるとテキストがやや遅れて動きます。 デモが目にやり場に困る写真ですが・・工夫すれば訴求力のあるコンテンツに出来そうです。アニメーションはeasing使ってますです。 $('.foo').each(function(index, el){ $(this).destaque({ slideMovement: 100, slideSpeed: 1000, elementSpeed: 1100, easingType: "easeInOutExpo
Variations on the Mobile Web
Avoid images for UI components: buttons, gradients, etc. Often unavoidable (eg. photo gallery). Goal: serve the high quality images efficiently Overview of approaches: Optimized single image. Optimizing to pick the best from a set of images. Problem: high DPI images → large file size! 2x retina images are often 3-4x times larger at the same compression WebP 30% smaller than JPEG (but no good way t
JavaScript でドラッグ＆ドロップで画像を切抜くことができる jsCropperUI
自作しようと思っていましたが、既に作って公開してくれている人がいました。ファイルは下記からダウンロードできます。サンプルが色々入っていますので、要点を抑えて説明させて頂きます。 DEfusion.org.uk » JavaScript Image Cropper UI, using Prototype & script.aculo.us DEfusion.org.uk » Demo » Prototype JavaScript Image Cropper UI jsCropperUI の特徴 範囲を指定することができる 指定した範囲外を再度指定することができる 一度指定した範囲を後から変更することができる Shift キーを押しながら指定で縦横1:1で範囲指定可能 縦横を固定した範囲指定も可能 tests フォルダに色々とサンプルが入っています。基本的には example-Basic.ht
いかにしておっぱい画像をダウンロードするか〜2012 for Node.js
いかにしておっぱい画像をダウンロードするか〜2012 の Node.js 実装です。 こういう動機で頑張るっていうのはいつまでも少年時代であろうとしていていいよね！うちの場合もそれをゲームへ向けたわけだし。 動作には npm で request と async を導入する必要あり。 Node.js の場合、何も考えずに書いてしまうと逆に並列処理が走り過ぎて落ちて終わってしまうという。 ということで async を使って並列処理数の制限を行っている。 2012-03-06 追記 ファイルが既に存在している際に callback が呼ばれずに次のタスクへ進まないという不具合があった。コード修正。 var request = require('request'); var querystring = require('querystring'); var async = require('asy
クリエイティブなCSS3テクニック集「CSS3 Image Galleries, Slideshows and Image Effects」
TOP > WebDesign > クリエイティブなCSS3テクニック集「CSS3 Image Galleries, Slideshows and Image Effects」 限られたスペースを有効に利用するため、もっと魅力的に写真を見せるためにスライドショーを利用しているという方は非常に覆いと思いますが、今回紹介するのはCSS3で実現するクリエイティブなスライドショー集「CSS3 Image Galleries, Slideshows and Image Effects」。 Sliding Image Panels with CSS3 文字や、写真の動きなど、今までのスライドショーにはなかったギミックやエフェクトがCSS3によって実現されています。いくつかのスライドショーが公開されていますが、今日はその中から幾つか気になったものをピックアップして紹介したいと思います。 詳しくは
Titanium Mobile: Build an Image Uploader | Envato Tuts+
This tutorial will demonstrate how to build a custom progress bar by creating an image uploader with Titanium Mobile. Specifically, the demo project will allow you to select an image from the device photo gallery and upload it to a remote server for storage. Both the Titanium Mobile code and the server-side code will be explained. Now, let's get started! Project Preview The following is a preview
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」:phpspot開発日誌
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 2011年04月07日- Google image search style image alignment with jQuery Atteeeeention plugin | DreamersLab 異なる幅・高さの画像も超綺麗に並べられるjQueryプラグイン「Atteeeeention plugin」。 <img>でただ単に画像を並べると、幅、高さの違いから、ページがごちゃごちゃしてしまいますが、このプラグインを使うことでGoogle の画像検索のように綺麗にピッチリ並べられます。 普通に並べるとちょっと残念なことに。空白ができちゃいます。 プラグインを使うことで、あら綺麗。となります。 Firefox は 2以上、IEは6以上ということで殆どのブラウザに対応。 まず、必要な
web-argument.com - このウェブサイトは販売用です！ - web-argument リソースおよび情報
このウェブサイトは販売用です！ web-argument.com は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、web-argument.comが全てとなります。あなたがお探しの内容が見つかることを願っています！
HTML5を使ってこんなことも。Googleマップ風の画像ビューワー·Bigshot MOONGIFT
Bigshotは巨大な画像をタイル状に分解し、Googleマップのようなビューワーで閲覧するソフトウェア。 BigshotはHTML5/Java製のオープンソース・ソフトウェア。デジカメが高性能化するのに伴って、撮影できるサイズが大きくなっている。とは言え写真を閲覧するディスプレイのサイズは決まっているので、大きな写真ではズームしたりしなければならない。 写真をズームして閲覧する 極端に大きな写真では全体のダウンロードだけで時間を要してしまう。そこで考えてみたいのがGoogleマップライクに写真をタイル状にし、必要な部分だけ拡大するという方法だ。それを実現するライブラリがBigshotになる。 BigshotはHTML5/JavaScriptを使って画像を表示する。マウスのスクロールでズームイン/アウトが可能で、マウスのドラッグで見る場所を切り替える事ができる。Java製のツールで予め写真
[JS]HTML5 Canvasを使って、画像にさまざまなエフェクトを与えるスクリプト -CamanJS
デモページ これらのエフェクトの種類は数多く用意されていますが、独自のプラグインを作成して使用することも可能です。 詳しくは、ドキュメントを参照ください。 CamanJS Document Creating a Plugin [ad#ad-2] CamanJSの実装 「caman.full.min.js」を外部ファイルとして記述し、下記のようにスクリプトを記述します。 <script type="text/javascript"> Caman("images/example-image.jpg", "#example-canvas", function () { this .saturation(20) .gamma(1.4) .vintage() .contrast(5) .exposure(15) .vignette(300, 60) .render(); }); </script>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]サイズが不明でバラバラな複数の画像を指定サイズにフィットさせて配置するスクリプト -ImageFit
deconcepter.jp
http://www.blurjs.com/
はてなブログ | 無料ブログを作成しよう
Luroni.Lab | マウスオーバーで跳ねるRSSアイコン なのです。