【脱jQuery】jQuery <=> vanillaJS 書き換え集
jQuery <=> JavaScript全書き換え一覧ではありません jQueryで書いていたコードをvanilla(素のJavaScript)に書き換えたいけど書き方がわからなくて調べ方もピンとこない状態の自分がこれを見ることができたらきっと嬉しいと思ったのでここに供養します。 脳の記憶容量が8バイトくらいしかないので今でもシンプルにJavaScriptの書き方をページ内検索して使ったりしています。 /*----------------------------------- セレクター ------------------------------------*/ //html $("html") document.documentElement; //body $("body") document.body; //id $("#hoge"); document.getElementBy
CSSアニメーションの実装もこれで簡単！ さまざまなプロパティの値をトゥイーンさせるスクリプト -ScrollBtween
Webページ上のあらゆるDOM要素に対して、CSSアニメーションを実装できるスクリプトを紹介します。 実装は簡単です、CSSのプロパティの値を「#fff to #000」「0 to 100」のように記述して、#fffから#000にトゥイーンさせ、0から100にトゥイーンさせます。 スクロールで背景色を変化させたり、ぼやけた画像をくっきりと表示したり、スクロール位置に基づくプログレスバーやパララックスも簡単に実装できます。 ScrollBtween ScrollBtween -GitHub ScrollBtweenの特徴 ScrollBtweenのデモ ScrollBtweenの使い方 ScrollBtweenの特徴 ScrollBtweenは、Webページのドキュメント（任意のDOM要素）をスクロール位置に関連してCSSのさまざまなプロパティの値を変化（トゥイーン）させるスクリプトです。ネ
Webページに軽快な視差効果、スクロールすると要素が近づいてくるエフェクトを実装できる軽量のJavaScript -PushIn.js
Webページにインタラクティブな視差効果のアニメーションを実装できる軽量のJavaScriptを紹介します。 スクロールすると要素が近づいてくるエフェクトは、Appleのランディングページなどでもよく見かけます。スクロールすると要素が押し出されるように近づくプッシュイン、スクロールすると要素に向かってカメラが近づくドリーインなどのエフェクトを簡単に実装できます。 PushIn.js PushIn.js -GitHub PushIn.jsの特徴 PushIn.jsのデモ PushIn.jsの使い方 PushIn.jsの特徴 PushIn.jsはJavaScriptとCSSを使用して、ユーザーがWebページをスクロールしたときに指定した要素のスケールを操作することにより、要素が移動するような錯覚を作り出します。ブラウザに組み込まれているrequestAnimationFrameを使用しており、
Lighthouseの点数を50点以上改善したお話 – TravelBook Tech Blog
トラベルブックのフロントエンドチームでは2020年の9月から、ページのパフォーマンス改善に取り組んでいます。 今回は今までどのようにやってきたのかを紹介したいと思います。 Core Web Vitals 2020年5月、Core Web Vitals がSEOに影響されるというのがGoogleから発表され、集客的にもユーザー体験をページパフォーマンスが重要になりました。 弊社はメディアサービスを運用しており、SEOはビジネス的に重要な指標としています。 そのため、Core Web Vitals をパフォーマンス改善の指標としました。 Core Web Vitalsはより良いユーザー体験を提供するための指標となっていて、読み込み時間、インタラクティブ性、視覚的な安定性 に焦点をあてた下記3つの指標をベースに計測します。 Largest Contentful Paint (最大視覚コンテンツの
CSSフィルターやクリッピング、タイムスケールなど！ 表現の幅を広げる「Tween24」の新機能 - ICS MEDIA
CSSフィルターやクリッピング、タイムスケールなど！ 表現の幅を広げる「Tween24」の新機能 「Tween24.js」はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装可能なJavaScriptライブラリです。筆者が開発を続けており、2022年3月に正式リリースをしてからも機能追加のアップデートを重ねて、バージョン1.4となりました。 この記事ではバージョン1.1〜1.4で追加された機能について紹介します。バージョン1.0のリリースから下位バージョンとの互換性があるため、すでにお使いの方もそのまま利用いただけます。 基本的な使い方や導入方法を知りたい方は、記事『新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました』をご覧ください。 バージョン1.1〜1.4の主なアップデート内容 新機能：トゥイーンを繰り返すrepeat()
マイクロソフト、Webブラウザで3Dゲームがびゅんびゅん動く「Babylon.js 5.0」正式リリース、WebGPUにフル対応、iOS/Androidなどクロスプラットフォーム展開も
マイクロソフト、Webブラウザで3Dゲームがびゅんびゅん動く「Babylon.js 5.0」正式リリース、WebGPUにフル対応、iOS/Androidなどクロスプラットフォーム展開も マイクロソフトは、JavaScriptで2Dや3Dモデルを高速に扱えるライブラリ「Babylon.js」の最新版「Babylon.js 5.0」正式版をリリースしました。 We'd like to formally introduce the next version of the Babylon Platform - #BabylonJS5 Blog: https://t.co/aMgjIIeIin Video: https://t.co/OMssjZZPPz#gamedev #gamedevelopment #indiedev #indiedeveloper #webdev #3D @WebGPU #w
Web Animations APIのcompositeが凄過ぎてすごいからみんな見てくれ - Qiita
この記事はようやくSafariでもフルサポートされそうなWeb Animations APIのcomposite（効果の組成）って機能がすごいよ！！って、ただそれだけを伝えたい記事です。平たくいうと複数のアニメーションを簡単キレイに合成できる機能なのですが、通常のWebのコーディングでもよく出てくる辛さを解決してくれる結構すごいヤツなのです。 ▼ こういうアニメーション作るのもだいぶん楽になります Web Animations APIで星空パーティクル 単にCSSのアニメーションをJSで描けるよってだけではあるんだけど、ライブラリなしでそこそこ簡単にインタラクティブなもの作れるって意味ではうれしい。主要ブラウザ全部で使える。https://t.co/8H8zXfc5NL pic.twitter.com/bfTERJPxIX — ゆき＠ティアF47a (@yuneco) October 11
現場で使えるアニメーション系JSライブラリまとめ（2022年版） - GSAP, CreateJS, WebAnimation, Velocityなど - ICS MEDIA
現場で使えるアニメーション系JSライブラリまとめ（2022年版） GSAP, CreateJS, WebAnimation, Velocityなど ウェブサイトのインタラクションやUIの振る舞いなど、HTMLでモーションを実装する機会は多々あります。HTML要素の簡易的なアニメーションであればCSS Transitionを使ったことのある方も多いでしょう。しかし、WebGLやCanvas、SVGなどJavaScriptが実装の中心となる制作作業では、CSS Transitionでは対応しきれず、アニメーションライブラリ（トゥイーンライブラリとも言います）が必要となる場面があります。 JavaScriptのアニメーションライブラリは多種多様なので、どのライブラリを採用するのか悩みどころ。本記事ではHTMLのJavaScriptライブラリについて、使い勝手や書式を紹介します。 今回紹介するメジ
アニメーションライブラリ「Tween24.js」正式リリース！ 相対値や曲線移動などバージョン1.0の新機能 - ICS MEDIA
アニメーションライブラリ「Tween24.js」正式リリース！ 相対値や曲線移動などバージョン1.0の新機能 「Tween24.js」はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装可能なJavaScriptライブラリです。筆者が開発を続けており、今回の2022年3月のアップデートでは6つの新しい機能を追加し、バージョン1.0として正式リリースとなります。 正式リリースでメジャーバージョンが変わりますが、仕組みの変更はなく下位バージョンとの互換性があるため、すでにお使いの方もそのまま利用いただけます。 基本的な使い方や導入方法を知りたい方は、記事『新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました』をご覧ください。 今回のアップデート内容 新機能：曲線的に座標移動させるbezier() 新機能：設定時からの相対値でトゥイーン
パララックスもこれで簡単に！ HTMLやCSSを変更せずにシンプルに実装できるスクリプト -simpleParallax.js
ユーザーのスクロール操作に合わせて視差効果を与えるパララックスのエフェクトをシンプルに実装できる軽量のバニラJavaScriptのライブラリを紹介します。 実装は非常に簡単で、HTMLやCSSを変更せずに、パララックスのさまざまなエフェクトを実装できます。 simpleParallax.js simpleParallax.js -GitHub simpleParallax.jsの特徴 simpleParallax.jsのデモ simpleParallax.jsの使い方 simpleParallax.jsの特徴 simpleParallax.jsは、<img>で実装された画像にパララックスアニメーションを追加する、非常にシンプルで軽量なバニラJavaScriptのライブラリです。
マイクロインタラクションからクリエイティブ表現まで！Tween24.jsを使った演出表現 - ICS MEDIA
ウェブサイトのリッチな表現に欠かせないアニメーション。実装にはCSSを使ったものからJavaScriptを使ったもの、WebGLを使ったものまでありますが、今回はTween24.jsを使ったウェブ制作の場面で使える実践的表現を紹介します。 基本的な導入方法や使い方は記事『新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました』をご覧ください。 CSSアニメーションとの違い CSSのtransitionプロパティや@keyframesを使ったアニメーションなどがあります。これらは比較的手軽にアニメーションを実装できるのがメリットです。手軽さとは引き換えに複雑なアニメーションや動的に変数が変わるようなアニメーションが苦手です。一方でJavaScriptを使った手法は、複雑なものや動的なアニメーションも実装できるメリットがありますが、CSSと比べると記述量も
日本のWEBに革命をもたらす BudouX で自動文字組みを行う。しかも、Web Componentとして
WEB 開発において日本語が抱える問題 日本語を使った WEB 開発は常に「改行問題」を抱えています。例えば、👇 の様に 記事 という単語の 記 と 事 で改行されていたら読みにくいです。 見た目重視の WEB サイトだと、「この改行を手動で美しく見えるように修正して欲しい。」 という声も無視できません。 いわゆる「文字組み」です。例えば、👇 の様に改行を入れてやります。 しかし、この方法は解決になっていません。なぜなら、WEB ブラウザ の幅はレスポンシブに可変するからです。ちょっと画面幅を狭めるだけで 👇 の様に崩壊します。 これに対応するためには、メディアクエリをくしして画面幅に応じた<br>タグを仕込むか、改行したくない文字列を手書きで<span style="display:inline-block;"></span>で囲む必要がありました。👇 の様に... <span
まだ使ってる？今は非推奨となったJavaScriptの書き方
2021年11月18日 JavaScript いつも何気なく使っていたコードをふと調べ直してみると、知らないうちに「Deprecated（非推奨）」と書かれている…なんてこともありますよね。今回はJavaScriptを書いていて出くわした非推奨となったものをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ document.write 画面にテキストを表示する document.write 。JavaScriptの勉強を始めて最初に書いたコードがこれだったという方もいるのではないでしょうか？これはブラウザーのレンダリングに悪影響が出たり、DOMへの影響などを考慮して「強く非推奨」とされています。 これまでの記述例： document.write('やっほーい'); 解決策1：textContent や innerHTML を使う 代わりに文字列を書き換える textConte
Swiper - The Most Modern Mobile Touch Slider
Swiper is the most modern free and open source mobile touch slider with hardware accelerated transitions and amazing native behavior. Use it on websites, web apps, and mobile native/hybrid apps. Swiper, along with other great components, is a part of Framework7 and Ionic Framework - a fully-featured frameworks for building iOS & Android apps.
タッチフレンドリーな3Dパララックスを実装する軽量JavaScriptライブラリ・「Atropos」 - かちびと.net
Atroposはタッチフレンドリーな3Dパララックスを実装する軽量JavaScriptライブラリです。 PCではマウスホバーで、タッチデバイスではドラッグで動かす事が出来ます。非依存で軽量なので手軽に導入する事が出来ます。 <link rel="stylesheet" href="atropos.css" /> <script src="atropos.min.js"></script> <script> const myAtropos = Atropos({ el: '.foo', }); </script> HTMLで必要なコンテナを作り画像を挿入します。 <div class="atropos my-atropos"> <!-- scale container (required) --> <div class="atropos-scale"> <!-- rotate contain
GUIも備わったモーショングラフィックスの為のアニメーションJavaScriptライブラリ・「Theatre.js」 - かちびと.net
Theatre.jsはモーショングラフィックスの為のアニメーションJavaScriptライブラリです。GUIのエディターも備わってるそうです。 実際にビジュアルで動きを見ながら直感的な操作でアニメーションを作成する事が可能、というもので高度なアニメーションも作れるので意味やニュアンスを的確に伝える事が出来ます。 Three.jsと併用する事で3Dにも対応可能です。人と人とのコミュニケーションもノンバーバルコミュニケーション(非言語)のほうが重要性が高いと言われています。 Webに関してはより細かな意図を伝えるために、複雑なアニメーションを使うのも有効な手段の一つだと思います。ライセンスはApache-2.0です。 Theatre.js
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google製のJavaScript教育ツール「Grasshopper」は基礎から学べて初心者に優しい！【どれ使う？プログラミング教育ツール】
ScrollMovie
3D model-viewer embed
これなら実装がすごく簡単！タイプライターのようにテキストを表示するアニメーションを実装できるスクリプト typewritten-text
