Amazon.co.jp: Vue.js入門 基礎から実践アプリケーション開発まで: 川口和也, 喜多啓介, 野田陽平, 手島拓也, 片山真也: 本
お手軽360°パノラマ制作入門！ JSでパノラマビューワーを自作しよう - ICS MEDIA
360°の全方向を自由に見渡せるパノラマコンテンツは、GoogleストリートビューのようなWebサービスによって身近なものになってきています。前回の記事「お手軽360°パノラマ制作入門！ THETAで撮影しWeb公開に挑戦しよう」では、360°の静止画・動画が撮影できるカメラ「RICOH THETA S」で撮影したパノラマをYouTubeなどのWebサービスで手軽に公開する方法を紹介しました。 今回は、カスタマイズ性の高いWeb用の360°パノラマビューワーの実装方法を、初心者用と上級者用として2通り紹介します。初心者用のものはHTMLで3Dを作成できるライブラリ「A-Frame」を使い、上級者用としてはJavaScript製の3Dライブラリ「Three.js」を用います。 パノラマ静止画を表示する360°パノラマビューワー 次のデモは、本記事で解説するサンプルの完成形です。360°パノラ
捕獲シーンも完全再現！ポケモンGOの面白HTML/CSSスニペットまとめ
すでにアメリカなどを中心に、世界的大ブームとなっているポケモンGO が、ついに日本でも配信が開始されました。この人気はウェブデザインのアイデアとして、じわじわ影響を与えはじめているようです。 今回はコード共有サイト CodePen より、ポケモンGO をモチーフにしたHTMLスニペットをいくつかご紹介します。モンスターの捕獲シーンを再現したり、コミカルな動きをCSSアニメーションで表現したり、面白い作品が公開されていました。 詳細は以下から。 ポケモンGOをモチーフにした面白HTMLスニペットまとめ Pokemon Go – ZingTouch x Anime.js 軽量なアニメーションJSライブラリ Anime.js を利用し、モンスターの捕獲シーンを再現しています。サークルの大きさに合わせて、スワイプしてボールをタイミングよく投げることで、実際にキャッチすることもできます。 See t
これは凄い！Web制作が捗るモーフィング系の最新スニペットまとめ
作成：2016/04/25 更新：2016/06/29 Web制作 > ある形から別の形に連続で変化をかけていくモーフィングのような、視覚的な変化を表現できるスニペットをまとめました。トレンドをおさえた最新スニペットを厳選してピックアップ。 エンジニア速報は Twitter の@commteで配信しています。 背景色に合わせて、テキスト色をリバースさせる DOM要素の重なりを指定するCSS3のブレンドモードmix-blend-mode: differenceを使って、背景色と同時にテキストカラーを反転させていく方法。CSSだけでこれができるのは驚き。 進捗を示すプログレスバーなどで使うと、コントラストがはっきりするので見やすくなりそうです。 mix-blend-modeの「 difference」についてはCSS3のブレンドモードが素敵！ 新プロパティmix-blend-modeを使いこな
スマホWebサイト/ハイブリッドアプリ開発を高速化するJavaScriptフレームワークまとめ | BACKEND AS A SERVICE mbaas BLOG
デスクトップ向けのWebサイト開発ではjQuery/Backbone.js/AngularJS/Ember.jsなどを採用するケースが多いのかなと思います。しかしスマートフォン、タブレット向けのWebサイトとなるとまた勝手が違います。特にUI周りの取り回しであったり、タッチ/マルチタッチイベント、スマートフォン特有のAPIなどを適切に扱えなければなりません。何よりハードウェアの性能がデスクトップより低いので高速にストレスなく動作させるためには軽量でなければなりません。そこで今回はスマートフォン、タブレット向けのWebサイトを構築したり、HTML5によるハイブリッドアプリを開発するのに使えるJavaScriptフレームワークを紹介します。ぜひ皆さんの開発に役立ててください。mBaaSお役立ちブログ トップ> ブログ> Tips> スマホWebサイト/ハイブリッドアプリ開発を高速化するJava
今一番気になるCSSの美しいエフェクト！インクを水面に落としたように波紋が広がり消えていく -Ripple Click Effect
Googleが先日発表した新しいUX「Material Design」の中で特に注目されているのが、タップやクリックをするとインクを落としたように波紋が広がるエフェクト。 これを実装するテクニックを紹介します。 Material Designについては、前の記事（「波紋」のアニメーションを実装するテクニック）で動画を紹介しています。 この波紋のエフェクトはあちこちのコミュニティで盛んで、その中でもここで紹介するエフェクトはかなり美しく仕上がっています。 デモではリストで配置したナビゲーションの各アイテムをクリックすると、そのクリックした地点を中心に波紋が広がり、フェードで消えていきます。 ※上記はエフェクトが分かりやすいよう、各アイテムの高さを広げています。 実際の動作は、下記ページでお楽しみください。 Ripple Click Effect from Google Material De
スクロールしてもついてくるスティッキーヘッダーをJSで実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです。フロントエンドエンジニアのはやちです。 健康診断の結果が届き結果がオールAの超絶健康体だというのがわかって浮かれてるはやちです♪ｷﾞﾐｷﾞﾐ└( ＾ω＾ )」ｼｪｲｸ♪ 野菜を食べ続けた結果ですね、みなさんも野菜を食べましょう( ˘ω˘)☝ そんなのどうでもいいですね。 さて、今回は縦に長いコンテンツなどでよく見かけるスティッキヘッダーを作ってみました。 ご紹介します( ˘ω˘)☝ スティッキーヘッダーとは？ スクロールしてもヘッダーがついてくる技法のことです。 ページ移動がしやすいため使用されることが多いです。また、縦に長いLPのページ内リンクで使用されることもあります。 なんだかスティッキーフィンガーみたいですね( ˘ω˘)<ｱﾘｰﾃﾞｳﾞｪﾙﾁ HTMLとCSSの準備 まずは準備の方法をご紹介します( ˘ω˘)☝ HTML ヘッダーは固定に配置しておくための#header
Intro.js - Step-by-step guide and feature introduction for your website
No dependencies, fast and small 10KB JavaScript and 2.5KB CSS, that's all (minified, gzipped). User-friendly Navigate using keyboard or mouse. Easily change the themes for your website. Browser compatibility Works on Google Chrome, Mozilla Firefox, Opera, Safari and even Internet Explorer. Why using Intro.js? When new users visit your website or product you should demonstrate your product features
いろいろな動きをするニュースティッカー(News Ticker) jQueryプラグイン - develo.org
HTML、CSS、Javascript、デザイン、絵を描いたり。 このページの先頭へ戻る
[JS]これスゴイよ！スクロール時にさまざまな楽しいエフェクトを与えるスクリプト -ScrollMagic
スクロールに合わせて、さまざまなアニメーションをシンクロさせるjQueryのプラグインを紹介します。 Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、div要素の内側のスクロールなどにも対応しています。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
