All-in-one animation engine. A fast and versatile JavaScript library to animate the web.
Anime.js | JavaScript Animation Engine
All-in-one animation engine. A fast and versatile JavaScript library to animate the web.
現代の JavaScript チュートリアル
私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。
JavaScript Standard Styleのススメ - Qiita
みなさんは、JavaScriptのコードを書くときに文字列は何で囲みますか？シングルクォート？ダブルクォート？ インデントに使用する文字はスペース？それともタブ？ JavaScript Standard Styleは、そのように千差万別なコーディングスタイルを統一するためのスタイルガイドの一つです。1 JavaScript Standard Styleのルール JavaScript Standard Styleには、次のようなルールがあります。 インデントはスペース2個 文字列はシングルクォートで囲む 未使用の変数は禁止 文末のセミコロンは禁止 キーワードの後にスペースを入れる 関数名の後にスペースを入れる 値の比較に==ではなく===を使用 ただしobj == nullはnull || undefinedをチェックするために許容される 常にNode.jsのerr引数をハンドル ファイルの
新人にドヤ顔で説明できるか、今風フロントエンド開発ハンズオン(git/node.js/ES6/webpack4/babel7) - Qiita
概要 今風の手法でJavaScriptアプリを作ろうとすると色々ツールがあって便利な反面、複雑でわからないことがたくさんあります。 わからないことがあったら、それを放置せず、しっかり理解して大いに寄り道しつつブラウザで動作するJavaScriptアプリをゼロから作っていきます ブラウザ上で動作するフロントエンドアプリを作ったら、ライブラリ化してnpmモジュールとして公開します 対象読者＝今風のJavaScript開発の入門者、初心者 11年前からタイムトラベルしてきたひと ブラウザ用アプリを作りたいが今風の手法の初心者(jQueryだけでなんとか生きてきた人とか） Node.jsの環境をつかってフロンドエンドアプリかいているけど、「何となく」理解している人 来年の新人教育係 キーワード 本投稿では、以下のようなキーワードが出てきます。 Node.js、npm、ES6(ECMAScript6
ブラウザからデバイスに、OSまで！UA判定に便利なライブラリ「UAParser.js」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドエンジニアのつっちーです。 UA判定処理って、自分で書くのは面倒ですよね。条件をそのたび調べたり、微妙に書き間違えて正しく動作しなかったり……。 今回は、そんなUA判定に便利なライブラリ、UAParser.jsについて取り上げたいと思います。 UAParser.jsの特徴 UAParser.jsは、下記のような特徴をそなえたjavascriptライブラリです。 導入方法が豊富 判定可能な要素が多い 簡単に使える まず、導入方法としてはCDNから取得、Node.jsでバンドルなど、さまざまな選択肢があります（今回の記事では一般的な2つの導入方法をご紹介していきます）。 そしてこのUAParser.jsは、ブラウザだけでなく、デバイス情報、OSまで、多くの要素を判定可能です。そう聞くとなんだか処理が面倒くさそう、と思ってしまいますが、使い方はとても簡単です。 参考UR
これならすごく簡単！ページを高速に表示させるLazy Loadを実装できる超軽量ライブラリ -Lazyestload.js | コリス
最近はLazy Loadを採用しているサイトが増えていますね。 Lazy Loadとは、画像やiframeコンテンツなどが見えていない状態（ビューポート外）はロードさせずに、見えはじめた状態（ビューポート内）の時だけロードさせるようにして、ページの表示を速くするテクニックです。 そんなLazy Loadを外部ファイルとimg要素にclassを加えるだけで、簡単に実装できる超軽量JavaScriptライブラリを紹介します。 Lazyestload.js -GitHub Lazyestload.jsの特徴 Lazyestload.jsのデモ Lazyestload.jsの使い方 Lazyestload.jsの特徴 Lazy Loadを外部ファイルとimg要素にclassを加えるだけで実装。 画像はビューポート内にある時、およびスクロールが停止した時にロード。 ロード前の状態は、CSSで簡単にス
パララックスの実装におすすめのJavaScriptライブラリまとめ【2021年版】 | Web Design Trends
Webデザインにおいて、定番テクニックの1つとして使われるのがパララックスです。パララックスはライブラリを使用することで手軽に導入することができ、Webサイトの印象を大きく変えることができます。 今回は、パララックスの実装におすすめのJavaScriptライブラリをご紹介します。 基本的にVanilla JSで作られているで、依存関係など意識せずに利用することができます。 パララックス（Parallax）とは、英語で「視差」という意味で、Webサイトにおけるパララックスはスクロールなどの動きに合わせて要素が動くスピードをずらしたり、異なる動きを加える演出のことを指します。 数年前に大きく流行し、現在ではWebサイトの定番テクニックの1つとして定着しています。 パララックスをWebサイトに取り入れることによって、デザインに立体感や奥行きを生み出すことができ、また一味違った雰囲気のデザインを作
Before Gutenberg - WPerが知っておくべきES6とReactのこと - Capital P
この連載ではGutenbergがリリースされる前にやっておくべきことをまとめているのだが、Gutenbergがもたらしたもっとも大きな変更点として、Reactの導入がある。これにより、次の新しい要素が導入される。 ES6/ES Next React + JSX さて、以上の概念について慣れ親しんでいる人は特に驚きはないだろうが、これまでjQueryぐらいでしかJavaScriptを学んでこなかった方は本稿を読んで今後の参考にしてほしい。 TL;DR ES6とは、新しいJavaScriptだが、ブラウザ互換性のために色々工夫する必要がある。 WordPressではES5による記法を提供しているが、ES6(ESNext)で書くべきである。 挫折した人はツール類の登場を待つか、Webアセンブラーに転職しよう。 ちなみに、TL;DRとは、”Too Long, Don’t Read”の略で、長文ブロ
Appleのようなスクロールに連動したエフェクトもこれなら簡単に実装できる1KBの超軽量スクリプト -ScrollOut | コリス
スクロールするとコンテンツをふわりと表示させたり、追従するように表示させたり、ビューポートに表示されてない画像をLazyLoadさせたり、そういえば今回のApple Watchでも面白いスクロールエフェクトが採用されていますね。 スクロールによる変化を検出し、それに合わせてCSSのさまざまなエフェクトを簡単に与えることができる1KBの超軽量JavaScriptライブラリを紹介します。非常にシンプルなので、他のJavaScriptやCSSアニメーションのライブラリと一緒に使用することも簡単です。 実装が簡単 スクロールの変化を検出し、CSSのさまざまなエフェクトを簡単に与えることができます。 超軽量 1KBの超軽量ライブラリ。 依存は無し スクリプトは単体で動作し、他スクリプトへの依存は一切ありません。 ブラウザのサポート IE11を含む、デスクトップ・スマホ用のすべてのブラウザをサポート。
これを使うとスクロールに連動したアニメーションが簡単に！わずか2KBの超軽量JavaScriptライブラリ -Sal.js
スクロールに連動して、ページ上の要素をアニメーションで表示するライブラリはいくつかあります。その中でもかなりの超軽量で、他スクリプトへの依存が一切ないスクロールアニメーションのライブラリを紹介します。 しかも実装は超簡単。手間がかかりそうと思っていた人は、ぜひお試しを。 Sal.js Sal.js -GitHub Sal.jsの特徴 Sal.jsのデモ Sal.jsの使い方 Sal.jsの特徴 vanilla JavaScript vanilla JavaScriptで書かれており、他のスクリプトへの依存はありません。 超軽量 2.26KBの超軽量スクリプト。 パフォーマンス パフォーマンスにフォーカスして設計。 実装が簡単 外部ファイルを加えて、HTMLにdata属性を加えるだけの簡単実装。 ライセンス MITライセンスで、個人でも商用でも利用できます。 Sal.jsのデモ デモでは、S
animsition
タイトルanimsition説明animsitionはページ遷移時にアニメーションエフェクトを追加するjQueryプラグインです。カテゴリー ライブラリーanimsition jQuery 組み込みファイル<!-- jQueryとanimsitionを追加 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.2/css/animsition.min.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script type="text/javascript" src="https://
画像がちゃんと読み込まれたら実行 を実現する ImagesLoaded ！ | ARAKAZE NOTE
ImagesLoaded アニメーションを多様するようなWebページを作っていると「画像が読み込まれるのが遅くてうまくいかない！」、「画像がちゃんと読み込まれてから関数を実行させたい！」といった場面にぶち当たることが出て来きます。 そんなときに便利なのが「ImagesLoaded」！非常に簡単な記述で、要望を満たしてくれます。 必要なもの 公式ページがあるのでそちらから必要ファイルをダウンロードしてきます。 １つしかありません！ <script src="js/imagesloaded.pkgd.min.js" type="text/javascript"></script> 使い方 使い方も至極単純です。通常のJSで使う場合のほかに、jQueryなどの書き方もあります。 //通常の書き方 imagesLoaded( '#container', function() {/*実行させたい処理
CEDEC2018発表資料 「編隊少女 -フォーメーションガールズ-」における3Dレンダリング技術解説 Babylon.jsとBISHAMON WebGL版の合成 - ICS MEDIA
CEDEC2018発表資料 「編隊少女 -フォーメーションガールズ-」における3Dレンダリング技術解説 Babylon.jsとBISHAMON WebGL版の合成 2018年8月22（水）～24（金）にパシフィコ横浜で開催されたCEDECにて、ICSが開発に携わっているブラウザゲームの技術について発表しました。この記事では、アイオウプラスよりリリースしているブラウザゲーム「編隊少女 -フォーメーションガールズ-」で採用したWebGL関係の技術を紹介します。 CEDEC（Computer Entertainment Developers Conference）はゲームを中心とするコンピュータエンターテインメントの開発、ビジネス、関連する技術、機器の研究開発などに携わる人々の技術力向上と知識や情報の交流を促進するためのカンファレンスです(公式サイトより) 当日の発表資料は下記リンクからご覧いた
[JS]実装が簡単で、操作も快適！スクロールに対応したコンテンツを実装できる超軽量ライブラリ -SimpleBar
スクロールバーをカスタマイズしてコンテンツを設置できるJavaScriptのほとんどは、スクロールの挙動が独自だったりします。ブラウザのネイティブのスクロール操作を使用し、快適に動作するコンテンツを実装できるライブラリを紹介します。 5kBの超軽量で、他スクリプトの依存はありません。また、IE9+対応なのも安心ですね。 デフォルトのスクロールバーをカスタマイズ 同系統のスクリプトの多くはJavaScriptでスクロールバーを模倣しますが、当スクリプトはデフォルトのスクロールバーを使用するので、パフォーマンスを損なうことはありません。 スクロールバーのデザイン スクロールバーはCSSでスタイルを簡単に変更できます。 5kBの超軽量スクリプト 他のスクリプトの依存はなく、超軽量の単体で動作するスクリプトです。 ネイティブのスクロール スクロール操作にJavaScriptは使用せず、ネイティブの
![[JS]実装が簡単で、操作も快適！スクロールに対応したコンテンツを実装できる超軽量ライブラリ -SimpleBar](https://cdn-ak-scissors.b.st-hatena.com/image/square/c05f7f05b6b7db411a8ec41b4abe63014f44478d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018080704-00.gif)
[JS]便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts
チャートやグラフを実装するのは面倒、と思われがちですが、そんな人にはこのスクリプトをお勧めします。 div要素一つと外部ファイルを一つ、あとはグラフのデータを設定するだけで、さまざまなチャートやグラフが簡単に実装できてしまう単体のJavaScriptライブラリを紹介します。 レスポンシブ対応で、アニメーションにも対応、カラー変更やグラデーションやパターンにも対応している優れものです。 ApexCharts ApexCharts -GitHub ApexChartsの特徴 ApexChartsのデモ ApexChartsの使い方 ApexChartsの特徴 ApexChartsはシンプルなAPIを使用して、インタラクティブなチャートやビジュアライゼーションを作成するためのモダンJavaScriptのチャート作成ライブラリです。 MITライセンスで、個人でも商用でも無料で利用できます。 レスポ
![[JS]便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts](https://cdn-ak-scissors.b.st-hatena.com/image/square/b793c623eb3187e192351b9611f75aea908bbf46/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018080101-02.png)
ブロック要素をインタラクティブに傾けて立体的に表示できる「universal-tilt.js」:phpspot開発日誌
universal-tilt.js | JavaScript & jQuery parallax tilt effect library ブロック要素をインタラクティブに傾けて立体的に表示できる「universal-tilt.js」 次のようにマウスホバーで平面的な要素を立体的に傾けて表示させられます。 関連エントリ 立体的なサイコロ画像を描画するイラストレーターチュートリアル 立体的でクールなアプリ用アイコン集「170 dock icons」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2019年までに見直しておきたい
CSS・JavaScriptの手法 - Speaker Deck
Parallax background
Vue.jsとReact.jsを習得するために、どのように学んでいけばよいのか -VueとReactのデベロッパ用ロードマップ
ハンバーガーメニューの実装もこれなら簡単！パネルを左右上下からスライドさせる超軽量スクリプト -Pushbar.js
