ツールキット - ページ 22

すべてのWebブラウザには デフォルトのコンテキストメニュー. これはユーザーが どこでも右クリック ページ上で、それは通常同じようなオプションがあります、 “コピーする”, “保存する”, または “要素を検査する”. とともに justContextライブラリ, あなたは建てることができます 特別なコンテキストメニュー あなたのサイト上の任意の要素のために。これらは 自動入力 好きなものと一緒に カスタム関数を書く ユーザーがカスタムメニューのオプションをクリックしたときに実行されます。. どのページ要素でも独自のコンテキストメニューをサポートできます。これはあなたができることを意味します 個々の商品をターゲットにする スライドショーやHTML5ビデオプレーヤーなど ページ本体全体をターゲットにする. あなたは完全にコントロールすることができます コンテキストメニューのテーマ, フォント、色、アイコン、さらにはメニューをセクションに分割するための区切り記号も含まれます。このプラグインは本当にあなたが作成することができます 最初からフルコンテキストメニュー あなたが好きな機能を使って. デフォルトでは、justContextは付属しています 二つのテーマ： 闇と光....

派手なアニメーションはウェブ上で1ダースです。信じられないほどたくさんのものが作成されやすくなっています アニメーションライブラリ. Cascade.js リストに追加するライブラリがもう1つあり、それは間違いなくユニークなものです。 Cascadeでは、を使用してカスタムアニメーション効果をデザインできます。 カスケードレター テキストまたは カスケード要素 メインコンテナ内. この図書館は 依存関係なし;それは古典的なJavaScript上で動作します。 npm、Bower、またはGitHubから直接コピーをダウンロードすることでインストールできます。. CascadeJSを機能させるためには、 2つのファイルが必要：CSSファイルとJavaScriptファイルどちらも同梱されています 縮小バージョン ページサイズを数KB節約する. 各Cascade要素は別々の部分に分割されます。 個別にアニメートする スルー 要素です。これらは 動的に追加, だからあなたはあなたのHTMLの何も変更する必要はありません. しかし、あなたはする必要があるでしょう を設定する フロー（） 関数 アニメーション化する要素をターゲットにした後、ファイル内で. あなたは実際にできます jQueryを使う このライブラリでは、必要に応じて...

ウェブデザインは美しさと楽しいインターフェースデザインでいっぱいです。いくつかの機能は機能しますが、他の機能はショー専用です。. グラデーショントランジション あります ショー専用 しかし、彼らはかなりパンチを詰める! あり Granim.js, あなたは建てることができます カスタムフルカラーグラデーショントランジション 滑らかに見え、どのWebサイトともうまく調和している. 発見できる たくさんのカスタム例 背景画像を使用した単純なトランジションからより複雑なアニメーションまで、さまざまなスタイルのメインのサンプルページに. Granimは私が知っている唯一のJSライブラリです グラデーショントランジションへの取り組み. これは私がいつも疑問に思っていたし、本当に良い答えを見つけたことがない質問です。 Granimは完璧なソリューションです バニラのJavaScriptに基づいて構築された, そのため、jQueryや他のJSライブラリと一緒に実行できます。. ただ 落とす granim.js あなたのページにファイルする 始めるために。 GitHubからコピーをダウンロードするか、ライブCDNからホストすることができます。. これが 基本的なコードサンプル GitHubリポジトリから： 物事はこれよりはるかに複雑になることがあるので、本当にすべきです 例を掘り下げる...

たくさんの無料のアニメーションライブラリがあり、すべて異なる効果や専門性を持っています。しかし、新しいParticles.jsライブラリーは、以下のものを作成することによってまったく新しい方向に進みます。 アニメーション粒子 それ リアルタイムで動く ページ全体. この使いやすいライブラリは、GitHub上で完全に無料でオープンソース化されています。それは確かにあなたがあなたのサイトのUXを改善するのを助けないでしょうが、それはあなたがいくつか追加するのを助けることができます インターレース粒子効果 背景へ. メインページには、 ライブインタラクティブデモ ライブラリの機能を試すことができます。これにより、粒径、速度、形、色、位置を調整できます。. これはとても詳細なライブラリなので、それは必要です JavaScriptをよく理解している それを動かすために。このライブデモは、JavaScriptで可能なことを誰でも確認できるようにこれらの設定を試してみることができるため、非常に有益です。. そして、これらのグラフィックをエクスポートしても問題ない場合は、 画像を直接保存する Webアプリのデモページから。あなたはできる 生のPNGをエクスポートする あるいは カスタム設定をすべて保存します JSONファイルに変換してから、Particles.jsスクリプトに直接インポートします。. デフォルトでは、あなたが選ぶことができます 一握りのテーマ パーティクルスタイルが異なる場合 NASAスター 泡 雪 ニャン猫の星 デフォルトの幾何学的図形 これらのデフォルトでも、...

オンラインコンテンツの大部分はテキストベースですが、タイポグラフィがうまく設計されていない限り、人々はあなたのサイト上のテキストを読むことに興味がありません。. 一緒に働くかも カスタムフレームワークですが、それらは制限的に感じることができます. 代わりにSasslineを試してください。Sasslineは、Web上で完璧なグリッド線を作成するためのSassベースの無料ライブラリです。. この無料ツールはSass上で動作するので、最初にその前処理言語の周りのあなたの道を知る必要があります。まだWeb開発に慣れていない場合は、 Sasslineを選ぶ前にあなたのCSSとSassを練習してください. しかし、一度それを学ぶと、二度と同じようにレイアウトを設計することは決してないでしょう。. レムユニットを使用して作成します あなたのテキストを全面的にフィットさせるカスタムベースライン. これには、すべてのヘッダー、段落、ブロック引用符、すべてのものが含まれます。. Sasslineにはレスポンシブブレークポイントが付属しているので、Sasslineグリッドに基づいてテキストサイズ（および行の高さ）を自動的に調整できます。これはSassのミックスインに依存しています。. だからこそ私はこのツールを特にお勧めします。 経験豊富なWeb開発者 彼らのワークフローを改善しようとしている. デモページには、このベースライングリッドがリストアイテム、プルクォート、さまざまなヘッダーサイズなど、どのように機能するかの非常に明確な例が示されています。. さらに、コードに細かい調整を加えたい場合は、これをBootstrapなどのフロントエンドフレームワークに追加することもできます。の Sasslineライブラリ全体が非常に用途が広い そしてそれはSass愛好家のための至る所での定番であるべきです. はじめにメインのGitHubリポジトリにアクセスしてソースファイルのコピーをダウンロードしてください。. また、Sasslineライブラリの機能を説明するセットアップの手順と、この素晴らしいブログ投稿へのリンクもあります。.

もしあなたが必要ならば コンテナを自動入力する柔軟な要素を作る Scalableを強くお勧めします。この無料のオープンソースJSスクリプトは、あまりストレスをかけずに流動的なデザインを作成するのに最適です。. Scalable.jsライブラリ内のすべては順応性があるため、すべてのコンテナのスタイル、サイズ、位置、および内部の内容を変更できます。要素をページの上部または下部に配置する必要がありますか。 Scalableにはそのためのオプションがあります. これがどのように機能するかについてもっと学ぶためにGitHubレポジトリを覗いてみてください. 最も基本的な形式では、このスクリプトはターゲットページ要素と表示をカスタマイズするためのいくつかのオプションを取ります。これはGitHubから直接取ったいくつかのサンプルコードです： var scalable = new Scalable（containerEl、options）; 当然ながら、最初のパラメータは、ターゲットとするコンテナ要素のいずれかです（理想的には、 または似たようなもの）. optionsパラメータはkey => valueの組の配列を取ります。これらのオプションは次のとおりです。 コンテナの高さの値、最小幅と最大幅、最小スケールと最大スケール （つまり、内部要素に合わせてどれだけ拡張できるか）. 使用可能なデモについては、メインのプロジェクトページをご覧ください。コンテナの四隅をドラッグして、内側のフレキシブルアイテムのサイズを自動的に変更できます。その領域の下にあなたが見つけるので、これはかなりクールです。 使用可能なコード ページから直接取得. 純粋なCSSだけで柔軟な要素を処理する方法があります。しかし、これらのメソッドは時代遅れに感じることがあり、JavaScriptほどの制御はできません。. 試してみたいのであれば、GitHubからコピーを入手して、あなたが何を考えているのかを見てください。. Scalableはまだ活発に開発されていますが、ニーズに合わせて編集するのが簡単なスクリプトです。.

データチャートは、見るのが最もおもしろいものではありません。, 特にデータに満ちているもの。標準のデータチャートが あなたの注意を維持することができません, グーグルは、それを直すことができるかもしれない利用可能な新しいツールを持っています。それは呼ばれています Data Gif Maker、それはあなたのデータセットを完全にアニメーション化されたGIFに変えることができます. その背後にある論理は、静的なチャート生成ツールとは異なり、ユーザーはアニメーションGIFからより多くの情報を吸収できるようになるということです。同様に, あなた自身のチャートを作成するのもかなり簡単です, そして、これがあなたがそれをする方法です. を開く Data Gif MakerのWebサイトで、提供されている表に記入してください 必要な情報（名前、値、データサンプル）とともに. データが整ったら, 使用される色を選択してください その特定の情報を表すために。あなたにはオプションが与えられます 4色から選ぶ. テーブルに必要なデータをすべて入力したら、[]をクリックします。 比較を起動する 結果のGifのプレビューを取得するためのボタン。あるいは、をクリックすることもできます。 Gifとしてダウンロード GIFをダウンロードして端末に保存するボタン. Data Gif Makerについて注意することの1つは、サービスが 1回のバッチで5つの別々のGIFを作成できます. つまり、5つの異なるデータセットを入力し、それらを一度にGIFに変換することができます。これは それらのために特に有用...

Webゲーム おかげで長い道のりを WebGL そして 関連HTML5 API. 3D用の最も有名なオープンソースライブラリは Three.js. Three.jsは強力ですが、同時に 最初から学ぶのは複雑. 代わりに、できます Whitestorm.jsを拾う, 3D Webグラフィック用に作られたオープンソースフレームワーク。それ Three.jsを使用します より速く構築し、ブラウザでリアルな3D効果を作成するための基盤となるテクノロジとして. Whitestormには 独自の物理エンジン Three.jsレンダリングの上に構築されています。これにより、オブジェクトに現実的な重力やその他の同様の効果を作成できます。 相互作用し、互いに反応する. そしてホワイトストームは 完全モジュラー, そのため、どの機能をページにロードするかを完全に制御できます。それを使用します 弾丸物理ライブラリ のJavaScriptに移植された Web上でフルサポート. これが基本的なコードの断片です。 新しいThree.js環境を作成します Whitestormを使う. const...