最速のアニメーションライブラリはこれだ! JSライブラリの性能をDOMとWebGLで比較検証 - ICS MEDIA
HTMLのアニメーション実装に役立つさまざまなJavaScriptライブラリがあります。前回の記事「現場で使えるアニメーション系JSライブラリまとめ」ではJSライブラリ7種類の特徴を紹介しましたが、本記事ではそれらのパフォーマンスを比較します。 JSライブラリのパフォーマンスが良いほど、たくさんのアニメーションがあっても滑らかに動きます。また、パフォーマンスがよければCPUへの負荷が低くなるため、サイト訪問者のスマートフォンの消費電力にも優しいとも言えます。ウェブ制作者はJSライブラリのパフォーマンスにも気を配りたいものです。 今回検証したJSライブラリ アニメーション（トゥイーン）用のJSライブラリやテクノロジーとして次の9種類で比較しました。バージョンは2022年5月現在の最新版を利用。ウェブページ用途の①DOM版と、ハイパフォーマンス用途の②WebGL版の2通りの方法で検証しています
便利すぎてしびれた！あなたが知らないCSS関数トリック8選
どんどん進化するCSSの中でも、意外と知られていないのがCSS関数。アイデア次第で実用的で応用の効くCSS関数を、もっと使ってみませんか？ CSSはWeb開発者が思っているよりもっとたくさんの可能性を持っています。スタイルシート言語は年々大きく進化を続け、JavaScriptなしでもブラウザーでさまざまな機能をさせるまでになっています。この記事では、JavaScriptをまったく使わない8つのCSS関数の賢いトリックに注目します。 1.軽量CSSツールチップ たくさんのWebサイトがツールチップを実装するのにまだJavaScriptを使っていますが、実はCSSのほうが簡単です。一番シンプルなのはツールチップテキストをHTMLコード内のデータ属性に記述する方法です（例：data-tooltip="…"）。このマークアップを使って、次のコードをCSSに記述すれば、attr()関数に与えられた値
pdf.jsをつかってPDFの内容をcanvasにレンダリングする - みかづきブログ その3
github.com すごいライブラリですね。さすがMozilla。 つかいかた 1. ライブラリをダウンロードして解凍 https://mozilla.github.io/pdf.js/getting_started/#download からライブラリをダウンロード 2. ソースを編集 viewer.htmlにアクセスした際、デフォルトではcompressed.tracemonkey-pldi-09.pdfを開くようになっているのですが、 web/viewr.js の28行目を編集することでデフォルトで開くPDFを変更できます。 3. サーバにアップ buildフォルダもwebフォルダもまとめてアップしましょう。 4. viewer.htmlにアクセス http://kimizuka.github.io/pdfjs/web/viewer.html PDFの内容がレンダリングされています。
[JS]縦長ページのスクロールエフェクトはこれが使いやすい！ビューポートをトリガーにしたスクリプト -in-view.js
ページをスクロールして、要素が表示された時にアニメーションを適用するエフェクトは非常に人気が高いですね。 要素がビューポートに入った時、そして出る時にそれぞれアニメーションを適用できる他のスクリプトに依存なし、超軽量（1.9kb gzip）のスクリプトを紹介します。 すべてのモダンブラウザとIE9+をサポートしており、現環境ほとんどで利用できます。 in-view.js -GitHub in-view.jsのデモ in-view.jsの使い方 in-view.jsのデモ デモは非常にシンプルで、ビューポートに要素が入った時と出る時にそれぞれアニメーションが適用されます。 アニメーションは入った度と出る度ごとに適用することも、一度だけ適用することもできます。
![[JS]縦長ページのスクロールエフェクトはこれが使いやすい！ビューポートをトリガーにしたスクリプト -in-view.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/42912a7e2d55f1411cc35125c5180a65f5fb702d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016090505.png)
私がscriptタグについて知っていること全て : 知られていない属性や実行順序など | POSTD
<script src="//typekit.com/fj3j1j2.js"></script> <!-- This second script won’t execute until typekit has executed, or timed out --> <script src="//my.site/script.js"></script> ローカルスクリプトとリモートスクリプトを組み合わせても同様に操作することができます。 機能的には、Webページの前の部分で重いスクリプトのロードがあると、サイトの表示が明らかに遅くなることを意味します。さらに、ページの最後の方で表示されるスクリプトは、それまでに存在するされたスクリプトの動作に依存することを意味します。 先行する全てのscriptタグがロードされ実行されるまで、ページ上の要素は表示されません。つまり、パフォーマンスへの悪影響を覚
[JS]これを使うだけでWebサイトのインタラクションやレイアウトがかなりよくなる、便利でちょっとずるいスクリプトのまとめ
縦長ページのスクロール エフェクトで再スクロールや上にスクロールする時にも適用したい、高さ指定のない画像を読み込む時にスクロールバーががっくんがっくんするのを避けたい、美しいレイアウトを簡単に実装したい、そんな便利でちょっとずるいスクリプトを紹介します。 ScrollTrigger ScrollTriggerの使い方 Scrollbear Scrollbearの使い方 Barba.js Barba.jsの使い方 Isometric Grids Isometric Gridsの使い方 Multiple.js Multiple.jsの使い方 anime.js anime.jsの使い方 ScrollTrigger ユーザーがスクロールすると、要素にアニメーションが適用されるスクリプトはいくつかありますが、その多くは一度アニメーションが適用されると再び適用されません。下にスクロールしてアニメーショ
![[JS]これを使うだけでWebサイトのインタラクションやレイアウトがかなりよくなる、便利でちょっとずるいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/28da41636539dd792d07680b0ac53af6ec4dba84/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016071113.png)
手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー
手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー人間の目は動きを感知すると反射的に目が動き、意識をそちらに向けるそうです。そのため、アニメーションは要素をほんの少し動かすだけで注目を集められるという強い力を持っています。今回はそんなアニメーションを手軽に実装できるCSSやJavaScriptのライブラリーをいくつか紹介します。 アニメーションを使う時に気をつけたい事アニメーションを使えば、前後の画面に繋がりを持たせたり、ユーザーに次の動きを予測させ、安心感を与えることができます。よく使われるものが、ふんわりと画面や要素を移り変えるフェードという効果です。目の前の物が一瞬で消え、パッと新しい物が現れる…なんて、現実世界ではありえませんよね。もちろん、単純に見ていて楽しい、かっこいい、なんていう刺激を与えられます。 しかし、ユーザーの注意をひこうとす
phiary
はじめに 『form 値 取得』とかで検索すると for 文で一通りチェックして... jQuery で要素を取得して val() で... ってのがヒットしますよね? これらの方法でも全然問題ないんですが, ピュアな JavaScript でもわりとスマートに値を取得, 設定することができます. っということで今回は, フォーム系要素の値をピュアな JavaScript で取得, 設定する方法を一通りまとめてみました. よかったら参考にしてください. デモ まずはデモです. 一通り form を並べてそれぞれ設定, 取得を行っています. console に各要素の値が表示されているのがわかるかと思います. コード デモのコードです. HTML <form name='mainForm'> <div> <h3>text</h3> <input name='_text' type='text
JavaScriptの勉強方法は？初級～中級者向けサイト14選
この記事のまとめ JavaScriptを勉強するメリットは、将来性があり需要の高い言語のため仕事に困らない点などがあげられます JavaScriptの勉強方法は、学習サイトや書籍を教材に、開発環境でプログラムを作成・動作させると効率的です JavaScriptの学習サイト選びでは、環境構築の有無や丁寧な解説、レベルの測定機能などがポイントです JavaScriptとは JavaScriptでできること JavaScriptの勉強方法・学習ロードマップ JavaScriptの学習サイト選びのポイント 初心者向けの学習サイト12選 中級者向けの学習サイト2選 JavaScriptに関するよくある質問 まとめ JavaScriptとは JavaScriptとは、Webサイト上で動的な処理を実現するために開発されたプログラミング言語です。近年のWebサイトの多くは、JavaScriptを用いて開発
[JS]その美しさ、一度見たら絶対忘れない！スゴ技のアニメーションを使った画像切り換えのテクニック
繊細で美しく、ダイナミックなアニメーションで画像を切り換えるスクリプトを使ったテクニックを紹介します。 2016年のインパクトのある成果物ベスト10には間違いなく入りますね。
![[JS]その美しさ、一度見たら絶対忘れない！スゴ技のアニメーションを使った画像切り換えのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/2b80cbe84952c5181c714203d0bc43c4fa7b61af/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016052601.png)
[JS]簡単で高性能！動画を背景としてブラウザやコンテナいっぱいに配置するレスポンシブ対応の軽量スクリプト -Bideo.js
動画を背景としてブラウザいっぱいに、もしくは指定したコンテナいっぱいに配置するレスポンシブ対応の単体で動作する軽量スクリプトを紹介します。 Bideoはおそらく、Background Videoの略でしょうかね。
![[JS]簡単で高性能！動画を背景としてブラウザやコンテナいっぱいに配置するレスポンシブ対応の軽量スクリプト -Bideo.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/442270a5803a50e9c86fc69781ff5060493cfb53/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016052501.png)
関数型プログラミングはまず考え方から理解しよう
※仕様の細かいツッコミはご勘弁を…。 オブジェクト指向で解く みんな大好きオブジェクト指向では、物単位で考えます。言わずもがなですね。やり方はいろいろあると思いますが、まずお弁当という単位で集めると 唐揚げお弁当クラス 状態 主食名 唐揚げ個数 値段 … 振る舞い： つまみ食い() 値段取得() 唐揚げ個数取得() … のような感じで、弁当に必要な要素と必用な処理をひとまとまりにして扱うというのがオブジェクト指向です。 お弁当スーパークラスを作って継承で唐揚げ弁当クラスを、というように拡張を考えた設計にするというのも汎用性が必要な場合は良いと思います。 では早速コードにしてみましょう。 言語はJavaScriptにしています。 (function(){ window.onload=function(){ ////////////////// // クラスの定義 // ///////////
JavaScriptユーザのための関数型プログラミング(後編) | POSTD
この記事の前編はこちら： JavaScriptユーザのための関数型プログラミング(前編) 遅延評価 遅延評価 は、 サンク や ジェネレータ などのもっと具体的な概念をカバーする一般的な用語の一種です。遅延評価は、その言葉が表すとおりのことを行います。つまり、値が必要になるまで評価しません。可能な限りずるずると、先延ばしにします。例えば、洗わなければならない食器が大量に、もしかすると無限にあるとします。食器を全て流しに置いて一度に洗うのではなく、ゆっくり、一度に1つずつ取って洗うのに似ています。 遅延評価の本質を少しでも理解しやすくするために、Haskellを使って説明したいと思います。まず、 プログラムがどのように評価を行うか を理解する必要があります。皆さんが慣れているほとんど全ての言語は、 最内簡約 を用いています。最内簡約とは、次のようなものです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Site is undergoing maintenance
CSSを使ってブラウザ上で動く検索エンジンを作る「Jets.js」:phpspot開発日誌
Page Not Found - NxWorld
タイプライター風エフェクトを実現するJS「TYPEWRITING」:phpspot開発日誌
https://www.ituore.com/entry/javascript-basic
HTML、CSS、JavaScriptでデスクトップアプリを開発できるElectron 1.0、Devtron 1.0、Spectron 3.0が提供開始
Web制作の実装や勉強に役立つ便利なチートシートのまとめ
