JS Cloudimage 360 View - 自由に360度させられる商品ビューワー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 正面からの商品画像だけで購入を決めるのは難しい製品は多数あります。左右や後ろからの写真を見てはじめて自分の納得いくものかどうか判断するでしょう。しかしそのために動画を見るのは面倒です。 今回紹介するJS Cloudimage 360 Viewは様々な角度から撮影した商品画像を使って360度回転できるウィジェットを生成します。 JS Cloudimage 360 Viewの使い方 デモです。画像は72枚用意されています。 ルーペ機能もあります（デスクトップWebブラウザのみ）。 下に薄い線をつけたり、影をつけられます。 自動回転もできます。 JS Cloudimage 360 Viewを使うためには、まず画像を用意する必要があります。36枚程度であれば十分そうで、その場合は10度ごと
商品を360度回転できる画像ビューワーを簡単に実装できるスクリプト -JS Cloudimage 360 View
商品の画像を複数枚用意することで、商品を360度ぐるぐる回転できる画像ビューワーを簡単に実装できるスクリプトを紹介します。 操作はかなり快適で、単体で動作するスクリプトです。 JS Cloudimage 360 View JS Cloudimage 360 View -GitHub JS Cloudimage 360 Viewの特徴 JS Cloudimage 360 Viewのデモ JS Cloudimage 360 Viewの使い方 JS Cloudimage 360 Viewの特徴 JS Cloudimage 360 Viewは商品の画像を複数枚用意することで、バーチャルツアーを提供できるシンプルでインタラクティブなJavaScriptライブラリです。 サポートブラウザは、IE9, 10, 11を含む、すべてのモダンブラウザです。 商品はユーザーが360度回転させることができ、拡大に
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);
Shop.js - Eコマース用のUIコンポーネント MOONGIFT
Webデザインフレームワークは多数ありますが、多機能なものほど縛りが強く、自分の思うようにデザインできないことがあります。そんな中、最近ではWeb Componentという概念によって、一つのコンポーネント単位でのUIも出てきています。 今回紹介するShop.jsはECサイトで使われる要素を小さなUIコンポーネントとしてまとめたライブラリになります。 Shop.jsの使い方 cartというタグがこのように表示されます。 洋服の数量を変えれば金額もアップデートされます。 checkoutタグで決済UIが出ます。 横から出てくるタイプのカート。 モーダル型の決済UI。 Shop.jsを使うことで商品一覧やカート、決済機能だけを手軽に組み込めるようになります。大量の商品がある中では利用が難しそうですが、数点の商品だけを厳選して扱うショップであれば良さそうです。 Shop.jsはHTML5/Jav
OpenSeadragon - こんな細かく！ズーム対応の画像ビューワー MOONGIFT
カメラの解像度は年々上がる一方ですが、そこまで高解像度で撮った写真もコンピュータ上で表示するだけではサイズのムダかも知れません。4K、8Kディスプレイになれば違いますが、1080pレベルのディスプレイでは表現し切れていない部分があるでしょう。 そこで写真をズームして表示できるOpenSeadragonを使ってみましょう。ズームイン/ズームアウトすることでこれまで見えていなかった細部まで確認できるようになります。 OpenSeadragonの使い方 サンプルの写真です。 ドラッグで写真を動かせます。 ズームするとこんなに細かいところまで。 フルスクリーンモードもサポートされています。 フルスクリーンで拡大。書かれている文字まで読めますね。 せっかく高解像度で撮った写真ですからそれに合わせたビューワーを使って表示するのが良いでしょう。思いもしなかった被写体が確認できるかも知れませんよ。 Ope
Toscani: Payment Info Experiment
Inspired by Square Wallet Download .zip Download .tar.gz View on GitHub Notes Right now, the two-digit year only allows for 12-29. Which is fine, but there's no support for automatically updating this when the year changes. We would have to update the mask manually. Might be better to leave it alone and allow server/client validation to handle this case in production. Auto-focus only works on the
[JS]これ、いい！サイトのデザインを損なわずにフォームの進捗を美しく表示するスクリプト -Fort.js
デモページ：Sections デモでは他にもグラデーションを使ったGradient、進む時に光るFlashなどが用意されています。 デモページ：Default デモページ：Gradient デモページ：Sections デモページ：Flash Fort.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 <head> ... <script src="fort.min.js"></script> <link rel="stylesheet" href="fort.min.css"> </head> Step 2: HTML バーを表示するdivをセットします。 <body> <div class="top"> <div class="colors"></div> </div> Step 3: JavaScript 適用するエフェクトを指
簡単ステップでウェブサイトに決済システムを導入でき、収益が最大化するよう手助けしてくれる「Stripe」
利用申請をし、承認が来たら決済システムを導入したいアプリやプログラムにソースコードを貼り付けるだけで利用できるようになるウェブ決済システムが「Stripe」です。PayPalよりも簡単にアプリやプログラミング上に決済システムを構築可能で、決済のたびに顧客をわざわざ他の決済専用ページに飛ばす必要もなくなります。 Stripe https://stripe.com/ Stripeは利用承認を得たら、決済システムを導入したいプログラミングのコードを埋め込むだけで利用可能になります。埋め込みコードはcurl・Ruby・Python・PHP・Java・Nodeと、複数言語で用意されています。 システムを導入するために必要なコストはなく、Stripeを使用して決済が行われる度に、決済額の2.9％＋30セント(約31円)の手数料がかかるのみ。その他の料金は一切必要ありません。なお、PayPalの場合、手
ネットショップを簡単に設置できるC2Cサービス「stores.jp」と「BASE（ベイス）」 | バニデザノート
商品ひとつから、誰でもネットでモノを売れるサービス。しかも無料からはじめられます。 個人から個人へのサービスということでC2Cなんて言われますが、外資系の企業や実店舗を持つオーナーさんも効果的に使っているようです。 もちろん、使い方は無限大なのは前提といたしまして。 商品数は少なめのほうが管理しやすそうです。手作りの雑貨や、家具、キャンペーン中の商品のみの展示など、１点〜３０点くらいで管理していくようなイメージでしょうか。 公式サイトとデザインを合わせて、カテゴライズして、いろんなカテゴリーに紐付けして、といわゆる今までのネットショップのように運営が目的であれば、カラーミーショップさんとかを使ったほうがおすすめです。 商品の人気をはかるような、広告的な役割で使うのもよさそうです。
通貨の変換が直感的かつ簡単に行えるJSライブラリ「money.js」:phpspot開発日誌
money.js / fx() - javascript currency conversion library 通貨の変換が直感的かつ簡単に行えるJSライブラリ「money.js」 次のように fx(数値).from("USD").to("GBP") のように書くだけで通貨の変換が行えるようです。 為替レートは自分で定義してもいいし、取得用のAPIプロバイダもオープンソースで配布されていてそこを叩いて変換することもできるそう node.jsのモジュールとしても使えるようです。 あんまり使うことはないのかもしれませんが、いざという時に知っておくと簡単にできてよさそうですね。 今後の国際化とかを考えると案外重要なライブラリかもしれません。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
)
tragopan - 別ライブラリへの依存性のないズーム/パン用JavaScriptライブラリ MOONGIFT
製品等のデータ比較のためのtable要素にフィルタ機能を付与する・「Products Comparison Table」
Loading...