Fullscreen API をさわったのでメモ - Qiita
document.querySelector('img').requestFullScreen()とかすると画像が全画面表示されるやつ。画面ロード直後にいきなり全画面表示とかはできないようになってるのでclickイベント内とかで行う。 詳しくは以下 フルスクリーンモードを使用する - Web developer guide | MDN 画像ギャラリー的なUIでの利用を想定してみる。画像をクリックしたら最大化表示されるやつ。 <style> img{ width: 300px; height: 233px; border: solid 4px #aaa; border-radius: 16px; } img:hover{ border-color: #00aaff; cursor: pointer; } </style> </head> <body> <h1>FullScreen Demo
かっこよすぎる！JavaScriptで、画像に多く使われている色を背景色に設定しよう！サンプルコード付き - Qiita
かっこよすぎる！JavaScriptで、画像に多く使われている色を背景色に設定しよう！サンプルコード付きCSSJavaScriptjQuerynpmbower みなさん下の図のように、商品画像と背景が似たようないろになっている画面を見たことがあると思います。 下の図のような画面では、画像に多く使われている色(ドミナントカラー)を背景色に設定しています。 (※下記の画面はwebサイトではない(itunes)ため参考程度ですが) この記事では、ドミナントカラーを背景色に設定するまでをサンプルを追いながら紹介していきます。 実装 jquery.adaptive-backgrounds.js このライブラリを使用することで誰でも簡単に、画像のドミナントカラーを背景色に設定することができます。 1. jquery.adaptive-backgrounds.js をダウンロードする bowerを利用し
今流行りの(?)背景ぼかしメニューのCSS実装例 - Qiita
/* モーダルメニュー */ #modal-menu { position: fixed; width: 100%; height: 100%; background-color: rgba(50, 47, 45, 0.9); top: 0; left: 0; opacity: 0; transition: opacity .2s ease-out; pointer-events: none; /* 透明状態でもクリックを拾ってしまうので */ } /* bodyにis-menu-openクラスが付いたらモーダル表示 */ body.is-menu-open #modal-menu { opacity: 1; pointer-events: auto; } /* bodyにis-menu-openクラスが付いたら#contentをぼかしフィルター付与 */ body.is-menu-ope
Owl Carousel
How To Use 1. Load jQuery and include Owl Carousel plugin files To use Owl Carousel, you’ll need to make sure both the Owl and jQuery 1.7 or higher scripts are included. <!-- Important Owl stylesheet --> <link rel="stylesheet" href="owl-carousel/owl.carousel.css"> <!-- Default Theme --> <link rel="stylesheet" href="owl-carousel/owl.theme.css"> <!-- jQuery 1.7+ --> <script src="jquery-1.9.1.min.js"
RawGit
RawGit has reached the end of its useful life October 8, 2018 RawGit is now in a sunset phase and will soon shut down. It's been a fun five years, but all things must end. GitHub repositories that served content through RawGit within the last month will continue to be served until at least October of 2019. URLs for other repositories are no longer being served. If you're currently using RawGit, pl
【Canvas練習ノート】CanvasをPNG画像ダウンロード – toBlobとsaveAs
canvasをPNG画像へキャプチャしダウンロード。 PNG画像へのキャプチャは canvas.toBlob を使います。 ダウンロードは FileSystem API で行います。 canvas.toBlob HTMLCanvasElement のメソッド toBlob は Blobオブジェクト（画像）を返してくれます。 ただ残念なことに Firefox しかサポートしておらず、polyfill メソッドを用意する必要があります。 w3c: File API#blob stackoverflow: Which browsers (and versions) support the Canvas.toBlob method? MDN: HTMLCanvasElement Example: Save toBlob to disk with OS.File (Chrome Context On
Cubeの各面に異なるマテリアルを使うときはTHREE.jsのバージョンに注意! - not good but great
Cubeの各面に異なるマテリアルを使う 見事にハマったのでメモしておく。 //Cube var materials = []; for(var i = 0;i < 6;i++){ materials.push(new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) ); } var CUBE_WIDTH = 200; var CUBE_HEIGHT = 200; var CUBE_DEPTH = 200; var CUBE_WIDTH_SEGMENTS = null; var CUBE_HEIGHT_SEGMENTS = null; var CUBE_DEPTH_SEGMENTS = null; var cube_geo = new THREE.CubeGeometry( CUBE_WIDTH, CUBE_HEI
Three.js テクスチャの貼り方 - Three.jsを使って、作ってみた
Three.jsの物体へのテクスチャの貼り方を書いていきます。 テクスチャを貼り付けた、実行例がこちらです。 上のやつには、これらのテクスチャを使いました。 ① ② ペイントで、さくっと作りました（笑） ①のテクスチャはキューブ（立方体）に貼り、②のテクスチャは円に貼り付けました。 xyz軸は、THREE.AxisHelperのものです。軸にはテクスチャは貼っていません（笑） では、テクスチャの貼り方を解説していきます！ テクスチャの読み込み方はこちらです。 THREE.ImageUtils.loadTexture('ファイル名'); 有名な拡張子（png,jpg)は、ほとんど使えるようです。 THREE.ImageUtils.loadTextureだけでは、読み込んだだけです。 物体にテクスチャを貼り付けるには、マテリアルのプロパティの一つ「map」を使います。 こんな感じです。 var
RailsにJavaScriptのimage_path - リア充爆発日記
erb以外でassets配下の画像を参照するとき、SASSにはimage-pathというナイスなヘルパーがあるのにJSにはない。困る。 こういう誰でも困りそうなことは絶対誰かがなんとかしている。なんとかしていた。 http://dennisreimann.de/blog/referencing-rails-assets-in-coffeescript/ assets/javascripts配下に以下のようなコードを配置する image_helpers.js.coffee.erb <% imgs = {} Dir.chdir("#{Rails.root}/app/assets/images/") do imgs = Dir["**"].inject({}) {|h,f| h.merge! f => image_path(f)} end %> window.image_path = (name
Google Sites: Sign-in
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
[JS]lightboxの進化形、レスポンシブ対応で画像を拡大表示するスクリプト -SuperBox
lightboxよりJavaScriptと画像ロードの依存を少なくした、レスポンシブ対応で画像を拡大表示するjQueryのプラグインを紹介します。 デモページ：幅780pxで表示 SuperBoxの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="css/style.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/superbox.js"></script> Step 2: HTML まずは、基本構造です。 HTML5のdata属性で拡大する画像を指定し、classに「superbox-im
タッチデバイスに対応したフリーのLightbox・スライドショーjQueryプラグイン
【Swipeshow】スワイプで操作できるjQu... / 【Liquid Slider】スマートフォンのタ... / 【Sly】スライドショーとしても使えるタッチ操作...他...全6件
jQueryで背景画像を全画面表示する
jQueryで背景画像を全画面表示する 最近ではjavascriptでも表現できることが飛躍的に増え、Flashサイトのようなリッチなサイトも多くなってきましたね。 ということでFlashサイトと聞いて一番最初に思い浮かべそうな背景画像の全画面表示というのをjQueryで作成してみたいと思います。 投稿日2010年11月30日 更新日2011年04月26日 html+cssの準備 背景画像を全面表示するっていうタイトルですが、cssのbackgroundにはサイズを指定するプロパティがないので、気持ち悪いけど画像は普通に配置します。 html <img src="101121_2.jpg" width="100%" height="100%" id="bg" /> <div id="contents"> <h1><a href="#">jQueryで背景画像を全画面表示する。</a></h
[jQuery] いつでもどこでもローディングアイコンを表示 NETEYE Activity Indicator | バシャログ。
最近目がかゆくてやたらとクシャミが出るんですけど、PM2.5 ってホント迷惑ですね～。みなさん、こんにちは nakamura です。 最近ちょっとおぉ！と思った jQuery プラグインがあったので今日はそのご紹介です。Ajax を使った非同期な処理も今やすっかり定番ですが、毎回メンドクサイな～と思うのがローディングアイコン。アニメーション Gif を用意して、どこで呼び出しても見栄えがするように CSS 調整して・・・。あーもうしゃらくせえ！と思っていたら、その辺全部勝手にやってくれる jQuery プラグインがあったんですね～。 NETEYE Activity Indicator っていうプラグインがそれです。github で公開されてます。 NETEYE Activity Indicator jquery-plugins/activity-indicator at master ·
![[jQuery] いつでもどこでもローディングアイコンを表示 NETEYE Activity Indicator | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/6a7c7828e73c1691039a9aa0dce7f4c767e36c92/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_javascript.png)
iOSなどのスマートフォンのブラウザ側でリサイズをおこないファイルアップロードを爆速にする - 僕は発展途上技術者
iOS 6 より Safari からファイルをアップロードできるようになり、写真投稿が必要なウェブサービスで、投稿のためだけにアプリを用意する必要はなくなったかなあ、と最初は思っていました。 ところが、iPhone 5 などで撮った写真などはファイルサイズが結構大きく、Safari からアップロードするときはそのままのサイズで送るため、外出先で 3G だとアップロードにものすごく時間がかかってしまい、ほとんど使い物になりません。 そこで、アップロード前にブラウザ側で写真をリサイズできる方法はないかと探したところ、 » IOS6 and Safari Photo Uploading - File API + Canvas + jQuery Ajax Uploading and Resizing Files Asynchronously - Stack Overflow で紹介されていた »
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - YahooArchive/kobold: Visual regression testing framework, comparing screenshots from multiple builds
SVGをインラインに展開し、CSSでスタイル出来るようにするJSライブラリ・「deSVG」
Ingress Mission Icon Generator (Unofficial)
タイルの話
CSSとJavaScriptで画像を鏡に反射したようにさせてみる - DesignWalker