Canvasなどでのアニメーションでは、物理演算を行うことができれば、 より面白い演出が可能となり、表現の幅も広がるので是非やってみたいものではありますが、 物理演算を自力で行おうとすると、それなりの専門知識と時間・労力が必要となります。 ただ、この物理演算をより簡単に行うことができるようになるJavaScriptのAPIがいくつか提供されています。 「Box2DWeb」というAPIが、Flashの時代から重宝され、JavaScript版も公開されており、 使い方が説明されたサイトも多くあるのですが、 若干ファイルが重い(ver.2.1.a.3のminify版で225KB)という問題もあります。 そこで他にもないかと探していたところ、 「Matter.js」という物理演算APIが軽量(ver.0.8.0のminify版で54KB)で使いやすそうでしたので、 実際にこのAPIを使ってCanv
Googleの新UX「Material Design」のアナウンス以降、波紋のエフェクトを数多く紹介してきました。例えばこれとかRiiple Click EffectとかWavesとか。 それらとは一味違い、WebGLでリアルな波紋を描くjQueryのプラグインを紹介します。 jQuery Ripples Plugin -GitHub ↑ファイルサイズを軽減してます。実際はもっと本物の水面です。 jQuery Rippleのデモ jQuery Rippleの使い方 jQuery Rippleのデモ デモはChrome, Safari, Firefox, Opera, IEは11+で、OpenGL 2.0対応のビデオカード内蔵のPCでご覧ください。 ページ上をクリックすると、そこから波紋がどんどん増えます。 jQuery Rippleの使い方 Step 1: 外部ファイル 当スクリプトとjq
The small print ZorroSVG has some minor pitfalls you should be a aware of: It only runs on browsers that support SVG 1.1 - which all the latest browsers do. Right now there are some subtle brightness differences in semi-transparent areas (maybe you can spot them in the example image's soft shadow). They might be gamma or color-profile related and I am still trying to improve on this. Some (older)
“Turn your photos into art with FotoSketcher – 100% freeware” 20 effects Over 20 different styles are available from pencil sketches to watercolor or oil paintings, pen & ink drawings and cartoons. Turn photos to paintings (landscapes, architecture, portraits, etc.) automatically! Show Gallery > Help me develop FotoSketcher FotoSketcher is 100% free, even for commercial use. However, if you like F
2014年11月5日 Web関連記事 WebデザイナーとしてWeb業界で活躍したいという初心者さんが、最初につまづきやすいのが、その専門用語の多さ。Webデザインの入門書をパラパラッとめくってみても、見慣れない単語に圧倒されてしまう人も多いのではないでしょうか?そこで今回はWebデザイナーなら知っておきたい単語をいくつかまとめてみました。Webデザインのお勉強中に「これなんだ?」という単語に出くわした時に参考にしてみてください! ↑私が10年以上利用している会計ソフト! 目次 あ行 か行 さ行 た行 は行 ま行 や行 ら行 わ行 あ行 アクセシビリティ Webアクセシビリティとも呼ばれます。アクセスのしやすさを表し、実生活上ではバリアフリーとも知られています。Webのアクセシビリティにおいては、音声によってWebページを読み上げたり、動画に字幕をつけるなどの工夫をして、身体の不自由な方でも
どうも、連載予定は絶対に次回を書かないでおなじみの僕です。 Paw.js is 何 マルチタッチに対応してない、いわゆるfastclickを実現するものやtapイベントを発行するライブラリ、やたら機能が多くかつ特にtouchmoveでのイベント過多で処理落ちしかねないライブラリが多かったので、現実的に使うであろう範囲でめちゃ軽なやつが欲しかったので作りました。 Paw.js あなたがもしモバイルWeb開発者で60fpsを出さなければ死ぬのであれば使えばいいと思いますし、そんな必要が無いもしくはフリックやジェスチャも取りたいと言うのであればHammer.jsとか使えばいいんじゃないでしょうか。 シンプル, 小さい, 速い touchevent, pointereventのマルチタッチ対応 tap, doubletap, pressの3つのカスタムイベントを発行 fastclick機能 です。
マウスホバーを基点とした動画再生 「CONTROL FILMS」は、一見するとサムネイルを並べただけの非常にシンプルなサイトだ。だが、サムネイル上にマウスホバーすると動画の再生が始まり、にぎやかなサイトに一変。コンテンツの魅力を引き出し、第一印象を覆すことに成功している。 今回はCONTROL FILMSを参考に、マウスホバーで動画を自在に制御するサイトを作ってみよう。 STEP 1:video要素の設置 最初に、動画を再生するためのvideo要素を設置する。video要素は、自動再生やループ、サムネイルの指定、コントローラーの表示/非表示等を属性値で設定できる。例では動画の自動再生(autoplay) / ループ(loop) / サムネイル画像(poster)を指定している。 ■ソースコード(HTML) <video autoplay loop poster="img/thumb.jpg
[速報]Google Container Engine発表。Dockerコンテナを実行しKubernetesで管理するクラウドサービス Googleは11月4日(日本時間5日)、サンフランシスコでイベント「Google Cloud Platform Live」を開催。Dockerコンテナ上でアプリケーションを実行し、それをKubernetesで管理するクラウドサービス、「Google Container Engine」(略称はGKE。Google Compute Engineの略称GCEとかぶるためにGKEになったのだと思われます)を発表しました。 これまでIaaS型のクラウドでアプリケーションを実行するには、仮想マシンのインスタンスを起動し、OSをインストールし、ネットワーク環境などを設定したうえでアプリケーションをインストールする、といった手順を踏む必要がありました。 Google C
孔明先生〜!最近引っ越ししたんだけど、前に住んでいた部屋の敷金が返ってこないんだ・・・僕の使い方がよくなかったみたいで「修繕費を差し引くから」って言われたんだ。
CSSで対話形式のフキダシデザイン 今日はフキダシデザインの作り方を書きます あ。前にも使っておきながら説明しなかったやつですね? あ、覚えてたか(笑)前に記事の中で使ったことあるね。 →みんなまだ意外とやってないブログの見せ方。pinterestやinstagramを貼り付ける方法 - AIUEO Lab2 ケチだなーと思いました(笑) 今日説明するから許して…。以下がCSSとHTMLです。 スポンサーリンク CSSとHTML CSS /*============================================================ フキダシデザイン ============================================================*/ .arrow_answer, .arrow_question { position: r
The document discusses schema design patterns for MongoDB databases. It introduces common patterns like attributes, subset, computed, and approximation. Attributes store optional fields as field-value pairs to index them easily. Subset duplicates a small subset of dependent documents to reduce working set size. Computed pre-calculates values to avoid repeated computations. Approximation uses fewer
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く