ツールキット - ページ 21

Oculus Rift、HTC Vive、およびその他のVR製品は、テクノロジの未来を変えました。私たちはVRヘッドセットのアイデアを嘲笑するかもしれませんが、1990年代のインターネットとよく似ています、VRは未来の道です. そしてWebVRのおかげで我々はすでに 強力なJavaScript APIを使用してインターネットとVRを統合する. このライブラリは完全にフリーでオープンソースで、W3Cによってサポートされています。そのため、バーチャルリアリティに慣れている場合は、ぜひこのライブラリを使用することをお勧めします。. WebVRはまだ実験的なもので、あなただけができます VRヘッドセットのブラウザでテストする. このため、ブラウザで実際のデモを見ることはできませんが、確かに試すことはできます. ほとんどの例では、次のように警告しています。 お使いのブラウザはサポートされていません. しかし、あなたはまだアイデアがVRの背後にあるものを見ることができます Web開発者がWeb上で仮想現実を作成する方法をWebVRが劇的に変えることができる理由. Moz VRサイトは、他にも素晴らしい場所です。 ライブプロジェクトをチェックする. また、これらはVRヘッドセットで最もよく機能しますが、それらの多くはWebVRで構築されています. WebVR APIは実際には Firefox Nightly Buildでサポートされています そして Chromiumの今後のバージョン. これは非常に実験的なライブラリですが、開発者がWeb上でも仮想現実に興味を持っていることを証明しています. 誰がWebVR APIを管理しているのか疑問に思う場合は、実際にはW3CチームによってGitHubでホストされています。これは理想的には公式のW3C仕様になるでしょう、そしてそれはW3Cがそれを通り抜けたら仕様がどのように実装されることができるかについての編集者のドラフトさえ持っています. このWebVR APIには、...

あなたはCSS3を使っていくつかの素晴らしいことを構築することができます カスタム入力フィールド に ドロップダウン そしてさらに ベクトルグラフィック. これらのテクニックは すぐにJavaScriptを追い越す, 開発者がより良いユーザーエクスペリエンスを作り出すことをより簡単にする. 構築するのが最も難しいものの1つは スピナーアニメーションの読み込み しかし現代のCSSアニメーションはそれをかなり簡単にさえします. ゼロから構築する時間を節約するために、次のようなライブラリを使うことができます。 CSSPIN のトンで 定義済みのカスタムスピナー. これらのアニメーションはすべて無料で複製でき、完全にオープンソース化されているので、 全権アクセス あなたが望むようにコードを編集する. このライブラリでスピナーを設定するのは簡単です。あなただけ CSSライブラリをコピーする あなたのページに カスタムHTML要素を追加する あなたがそれらを出現させたいところはどこでも. これらのカスタムスピナーは使用のみ 1つのHTML要素 アニメーション効果を作成します。グラフィックとアニメーションの効果が 純粋にCSSクラスを通してレンダリングされる. そして、あなたはソースコードにアクセスできるので 形、色、サイズ、およびアニメーション速度を置き換える...

がある 多数のライトボックスプラグイン そしてそれらはすべて素晴らしいです さまざまな理由で. ポートフォリオサイトでうまく機能するものもあれば、レスポンシブレイアウトに最適なものもあります。. しかし、私のお気に入りの新しいプラグインの1つは、 baguetteBox.js, JavaScript開発者Marek Grzybekによって作成されました. もちろん、このプラグインは完全に無料で使用でき、手動でコードを掘り下げたい場合はGitHubをオープンソースにしています。. 図書館 依存関係はありません, そのため、jQuery、Zepto、その他の機能なしで実行できます。それは 本当に簡単な設定の純粋なJavaScriptライブラリ. それは モバイル機器で完璧に動作する, デスクトップとラップトップのデフォルトの動作と共に、スワイプとタップをサポートすることができます。それはそのいくつかのフルスクリーンギャラリーのうちの1つです。 完全なモーダル効果とともに、モバイルインタラクションをサポート. をチェック デモページ それが生きているのを見るために。それはと一緒に、フル機能のギャラリーを持っています 機能させるには1行のコードが必要： baguetteBox.run（ '。baguetteBoxOne'）; したがって、この クラスを持つコンテナ要素をターゲットとする .baguetteBoxOne そしてギャラリー全体がそれをうまく動かします. あなたは出来る カスタムオプションを設定する...

誰もが知っている ツールチップ そしてあなたがそれらを作るのを助けるために無料のリソースがたくさんあります。しかしながら, カスタムメッセージバブル または “ポッパー” また非常に便利です. 彼ら ホバーイベントに限定されない, そのため、それらはページに一貫して表示され、他のユーザーの動作を回避することができます。. これらを作成しようとしているなら 吹き出しポッパー あなたのサイトに Popper.js 最良の選択です。これは、公式のjs.org Webサイトでホストされている無料のオープンソースプラグインです。. あなたは複雑なインターフェースを持つ多くのウェブサイトでこれらのバブルのヒントを見つけるでしょう。時々彼らは申し出ます 簡単なヒント, ウォークスルー, そして オンボーディングアドバイス インターフェースの初心者向け. Popper.jsを使うと、ユーザーがツールチップを作成するためだけにホバーするのを待つ必要はありません。代わりに、ポッパーを強制的に どこにでも現れる, 任意のサイズ, 任意の色, 動的ポジショニング. Popper.jsデモページをチェックして、私が何を意味するのかを確かめてください。それは付属しています 豊富な位置決め機能 画面の位置に基づいてポッパーの位置を自動的に反転させることができます。....

A フロントエンドフレームワーク あるべき 軽量で使いやすい. ブートストラップは最も人気がありますが、最も重いものもあります。そして、Bootstrapに代わるものがたくさんある世界では、好きなものを見つけるのは難しいかもしれません。. Mini.css です 新しいフレームワーク それは本当にその名前の通りです。現在のバージョン2.xでは、このフレームワークは できるだけ小さい, 現在gzipしたときのたった7KB. 全体のフレームワークは モバイルレスポンシブ そしてあなたが必要とするどんなレイアウトでもうまくいくはずです。しかし、目標はこのライブラリをスリムに保つことです あなたの仕事に必要最低限​​のものを提供する. あなたはできる Mini.cssを任意のパッケージ管理システムと一緒にインストールする Yarn、npm、Bowerなど。それはまたある場合もあります 直接インストール GitHubからファイルをダウンロードした場合. Webページに追加されたら、 通常のようにサイトをマークアップする そしてあなたは すぐに効果に気付く. タイプ、ボタン、リンク、フォーム、テーブル、これらすべてのデフォルト要素は、Mini.cssライブラリの基本スタイルに付属しています。レスポンシブレイアウトを設定するには、 グリッドシステムを使用する必要があります 拾うのはそれほど難しくありません. すべてのドキュメントは 平易な英語で書かれて, それは理解しやすいです。さらに、彼らは...

グラフィックとビジュアルは、Webコンテンツを改善するうえできわめて重要な役割を果たします。最新のテクノロジでは、SVGアイコンなどのカスタムビジュアルをページに簡単に追加できます。. しかし、ゼロから構築できるもう1つの驚くべきビジュアルはWebチャートです。. これはあなたを助けることができます データを視覚的にグラフ化する だからあなたの訪問者はすぐに関連情報を読み飛ばすことができます。グラフを自分でコーディングするのではなく、Billboard.jsのようなライブラリを使用してすべての面倒な作業を行うことができます。. これは実際にはJavaScriptデータ視覚化ライブラリであるD3の上に構築されています。それはあなたが求めることができる最も安全な依存関係にすることをそこに容易にそこで最も人気のあるものです. Billboard.jsを使えば、D3 APIにすばやく簡単にアクセスできます。ビルボードの主な目的は 使いやすさ、誰にでもアクセス可能. JavaScriptをある程度経験しておくと役立ちますが、必ず専門家になる必要はありません。. コードベース全体でES6構文が使われていることに注意してください。. あなたが〜をするなら コードのコンパイル方法を知っている あなたは大丈夫なはずです。 ES6のホットな機能のいくつかを実際に説明しました。. このプラグインに関する技術的な詳細はすべて素晴らしいと思われるかもしれません。しかし、あなたはおそらく知りたいだけなのでしょう これができること. デモページを見て、実際の例をいくつかクリックしてください。. 円グラフから散布図、カスタムアニメーションの棒グラフまで、あらゆるものを見つけることができます。. Billboard.jsを使えば データを完全に管理. ページ上での表示方法、構造化方法、追加するUI / UX機能の種類（ある場合）を制御します。. それは本当に素晴らしいチャートライブラリです、そしてそれは拾うのが最も簡単なものの1つです。詳細については、プロジェクトのGitHubリポジトリをご覧ください。. ブラウザのコードを使っておもちゃになりたい場合は、CodePenでこのスニペットを詳しく調べることもできます。.

の デフォルトのHTML5ラジオボタン かなり退屈です。する方法があります それらをカスタマイズする CSS3を使うが、ほとんどのテクニック ルックスだけに焦点を当てる. Radiobox.css に焦点を当てる ルックス そして スタイル ラジオ入力へのカスタムCSS3アニメーションの追加. このライブラリは 完全に無料 そして オープンソース, GitHubでダウンロードできます。このCSSライブラリでは、次のものから選ぶことができます。 12種類以上のアニメーション ラジオボタンに適用されるもの. カスタムCSSスタイルがなくても、 通常のラジオ入力のように見える. しかし、ユーザーがボタンをクリックして選択すると、 クレイジーなアニメーション効果を得る. 見ることができます 実例 その名前の横にある各スタイルをデモするメインのRadioboxページに. Radioboxをインストールすることができます npmまたはbowerからまっすぐ, あるいはあなたのマシンにローカルにファイルをダウンロードしてください。 GitHub...

Webアニメーション 方法を提供します 人々の注目を集める そして さらに描く ウェブサイトに。そこにはたくさんのツールがあります 無料のアニメーションを作成する しかし Shift.css 束の最新の一つです。. それは 無料のオープンソースフレームワーク 作成するために作られた 任意のコンテナ内の動的アニメーション. そしてこれらのアニメーション 1つのシーケンスにロックされていません. あなたは実際にカスタムアニメーションを作ることができます 各要素 ブロック内でこれらを適用する ある順序で. の デモページを移動する 私が言葉で説明できるよりもずっと上手にあなたを見せることができる. あなたが気付くことの一つは、コンテナ内の各要素は 別のHTML要素. SVGであろうと画像であろうとなかろうと、あなたは全部を別々にアニメートすることができます。 独自のカスタムアニメーション効果を作成する. ライブラリには2つのファイルがあります。 .CSS そして...