ツールキット - ページ 25

の WebGLの爆発的な成長 証明する ゲームの人気 ウェブ上で。 WebGL上で構築できるクールなことはたくさんありますが、ほとんどの開発者はそうしたいと考えています。 ブラウザゲームを詳しく調べる. WebGL 強力なフレームワークですが、それは あなたが必要とする全てではありません ウェブ上のゲーム. ゲームコントロール そして オーディオ また、ブラウザゲーム開発の大きな役割を果たします。. 無料 BabylonJSライブラリ これらすべてのトピックを網羅する完璧なリソースです。誰にでも入るのに最適です。 ブラウザゲーム開発. バビロンは 3Dゲームエンジンライブラリ 3Dグラフィックス用のWebGLを搭載。しかしそれはまた単なるWebGLライブラリ以上のものです. それはからすべてを扱うことができます コントロール に オブジェクトの振る舞い, そしてさらに 音響効果. それは本当に 完全なJavaScriptゲームフレームワーク...

多くない カルーセルライブラリ と競争することができます 滑らかな. これは、最も詰まったjQueryプラグインです。 動的カルーセルの構築 ウェブ上で. 完全に無料です jQueryの上に構築された. コードは設定するのがとても簡単です。 いくつかの依存関係が必要. しかし多くの機能を備えているので、これを機能させるために追加のライブラリを追加する価値があります。. に Slickをインストール, GitHubリポジトリにアクセスしてコピーをダウンロードできます。付属しています 2つのCSSファイル：のための一つ 基本設定 そしてもう一つの デフォルトのスリックテーマ. スペースを節約したい場合は、これらのファイルを基本のCSSスタイルシートに簡単に組み合わせることができます。. それなら、あなたは必要です 2つのjQuery依存関係： プライマリjQueryライブラリ に加えて jQueryの移行. スリックには jQuery 1.7以上+ これは現代の開発環境では問題ないはずです. ここから、あなただけの追加...

無料 D3.jsライブラリ あなたを可能にする多くのうちの1つにすぎません インタラクティブグラフィックを作成する ページ上。 D3はおそらく最も人気のあるものですが、それを使うことを学ぶのは簡単なことではありません。. それが理由です Plottable.js そのような貴重な図書館です。無料のオープンソースプロジェクトです。 D3.jsの上に構築された, 誰でも簡単に作成できるようにする 対話型データグラフを一から作成. この図書館 汚れた作業をすべて処理, そのため、データなどの詳細に集中することができます。プロット可能 適切なコードを生成します 選択したグラフのサイズと位置. 各チャート 独自のコンポーネントを持っています あなたができるPlottableで テンプレートコードをコピー/貼り付け 自分でグラフを再構築する。これを書いている時点では、次の中から選択できます。 10プロットグラフスタイル, 棒グラフ、円グラフ、散布図、面積図を含む. あなたはできる コンポーネントを個別に再構築する そして 設定を動的にカスタマイズする. これにより、インタラクティブな要素、色、アニメーション、配置、サイズなど、必要なものを簡単に変更できます。. の...

あなたはにアクセスできます あなたの指先で何百ものフリーコードライブラリ. オープンソースコミュニティに助けを求めることができれば、プロジェクトを最初から構築する必要はありません。. しかし、どのようにして何百というライブラリを検索しますか。 あなたのニーズに最も合うものを見つけてください? それがその理由です ボイルプレート とても便利. このウェブサイト すべての最高の定型テンプレートをキュレートします ウェブサイトからモバイルアプリまで、あらゆる種類のプロジェクトのために。あなたはできる 使用している言語を検索する そして、新しいプロジェクトに最適な定型テンプレートをすべてすばやく分類する. 各ページは とてもよく整理された あなたも 選択肢が多すぎても負担がかかり過ぎない. 実際、私はこのサイトが最高の図書館を早く見つけたい人のために設計されていると主張するでしょう. 例えばjQueryページを見てください, アプリやプラグインを作成するための定型的なテンプレートがいっぱい. それぞれがプロジェクトへの直接リンクと一緒に、GitHubのトータルスター＆ウォッチを特集しています. あなたは正確に見ることができます プロジェクトが作成されたとき, 最後に更新された日時, そしてその リポジトリ内のすべてのファイルの合計サイズ. この情報はすべて、あまり手間をかけずに一目で決定を下すのに役立ちます。. 唯一の欠点はBoilrplateがアイテムのみをキュレートするということです。 GitHubから, そう...

プログレスバー Web上のほとんどのユーザーに広く知られています。開発者にとって、それはしばしば複雑なプロセスです。 最初からプログレスバーを作成する. しかしと ProgressBar.js あなたはする必要はありません! この無料のオープンソースライブラリ 依存関係はありません そして すべての主要ブラウザをサポート, IE9を含む+. デフォルトでは、 単純なバーを使う, またはできます いくつかの基本的な形から選ぶ, といった： 単線 半円 フルサークル 平方 三角形 あなたもデザインできます あなた自身のカスタム形状 心、雲、あるいはあなたのウェブサイトのロゴの文字などさえ。これにはある程度の努力が必要ですが、最終的な結果は信じられないほどです。. 図書館 SVGパスで動作します, あなたができるならそう 輪郭を描かれた形を造る SVGマークアップを使えば アニメ化...

がある オンラインのCSSアニメーションWebアプリケーションのトン. しかし、細部のレベルや使いやすさと比べると、ごくわずかです。 アニミスタ. この無料のWebアプリはあなたをすることができます ボタンをクリックするだけでカスタムCSSアニメーションを生成. スライド、変形、揺れ、さらにはシャドウドロップアニメーションなど、デザイン済みのモーションから選択できます。. アニメーションを作成したら、次のことができます。 コードをエクスポートする 他のCSSジェネレータと同じです。ただし、このコードの方がはるかに使いやすく、さらに 内蔵の小型化ツールが付属しています. インターフェースは、最初は混乱を招くように感じるかもしれませんが、それはあなたが持っているオプションの数が多いからです! あなたはカスタムアニメーションを作る 次の3つの主なステップ そしてインターフェースを使う 上から下まで： モーションスタイルを選ぶ 上部の円から（スイング、スライド、フリップスケール） さまざまなモーションタイプでカスタマイズする 下に アニメーションオプションを編集する フローティング左側のオプションバー このプロセスを通して、あなたはアニメーションの総持続時間、イージングスタイル、ディレイ、ほとんど全てを変えることができます。そしてそれはすべて 純粋なCSS 3を介して動作します, それはさらに印象的になります. 一番上のナビゲーションバーにも注目してください。 さまざまな種類のアニメーションターゲットスタイル. の デフォルトは...

オープンソースのフロントエンドUIキット 開発コミュニティでは大流行しています。グリッドのレイアウト、ページ要素のスタイル設定、ドロップダウンなどの動的コンポーネントの追加に関するあらゆる面で時間を節約できます。. フラットデザインを使用したキットはたくさんありますが、近くに来るものはほとんどありません CSSミント. この100％無料のオープンソースUIキットは、あなたが想像できるすべてのプロジェクトやあらゆるタイプのウェブサイトに最適です。. CSS Mintの中核には、 ライブラリを正規化する 他のカスタムリセットと一緒に。これは クロスブラウザの問題とバグをすべて解決 コードベースを全面的に統一するため. すべてのCSSコードが続きます OOCSSの原則, そのため、既存のコードベースに簡単に追加（またはカスタマイズ）することができます。. 始めるためには、あなただけの CSS Mintスタイルシートを追加する あなたのプロジェクトに。これは、Bower経由で、またはCDNリンク経由でインストールすることができます。あるいはGitHubからコピーをダウンロードした場合はローカルでホストすることもできます。. 新しいWebページを作成すると、標準に準拠したHTML 5コードに従います。グリッドシステムはコンテナに基づいています 要素です。のようなほとんどのデフォルト要素 あります フルスタイル, と 異なるレイアウトのためのオプションのクラス. 箱から出してすぐのクラスがあります。 ボタン, タイポグラフィ, ナビゲーションメニュー, フォーム入力...

すべての優れたホームページには、強力な行動を促す（CTA）ボタンが必要です。これは、新しいアカウントにサインアップするか、eコマースショップから何かを購入するかにかかわらず、訪問者がどのような行動をとるのかを案内します。. しかし、あなたは ゼロからCTAを作成する必要はありません. あなたはウェブ上の何十ものカスタムCSS3ボタンを探すことも、あなたにとって物事をより簡単にすることができる同様のツールを使うこともできます。. この点で私が本当に好きなツールの1つは、Colorionによって作成されたこのグラデーションボタンライブラリです。持っています 数十のカスタムグラデーションの組み合わせ 本当にクールなホバー効果. ページを下にスクロールするだけで、どれだけの量を選択できるかがわかります。 Colorionは少なくとも持っている必要があります このコレクションには100以上のボタンがあり、新しいグラデーションコンボが追加されています 時々. あなたが好きなボタンスタイルを見れば クリックするだけ “コードを取得” 下のリンク. そこからあなたはただあなたのウェブページにあなたのコードをコピーして貼り付けることができます。激しいコーディングのない美しいグラデーションボタン. 実際にColorionをさらに深く掘り下げて、他にも色に関連するツールをいくつか見つけることができます。それらのほとんどは、画像から素材へのジェネレータのようにかなりニッチです。 画像を取り、それをマテリアルデザインのカラーパレットに変換します. しかし、彼らのグラデーションボタンライブラリは、おそらくWebデザイナーにとって最高のツールです。. 各ホバー効果はCSSに含まれているので、デザインに合わせてアニメーションスタイルを編集できます。. あなたがグラデーションでデザインするのが好きなら、あなたはこのライブラリを崇拝するでしょう. これらすべてのボタンがすべてのWebサイトで機能するわけではありません。しかし、あなたがあなたのサイトを同じような勾配に集中させるならば、あなたはたぶんそれらのほとんどを働かせることができます. そして、あなたがそのサイトについての質問や提案がある場合は、作成者@csaba_kissiに簡単につぶやきを撃つことができます.