😡webのスクロールでふわっと出てくるやつ絶対粉砕するマン【クソアプリ】 - Qiita
おひさしぶりです。この記事はクソアプリ Advent Calendar 2021の13日目です 突然ですが皆さんは「スクロールに合わせてふわっと出てくるwebページ」ってどう思います？ 最近多いですよね、あれ。 確かにオシャレだし楽しいしゲームとか作家さんのギャラリーサイトとかなら全然OK。でも情報が欲しくてアクセスしてるページで「ふわっ」ってされるとちょっとイラッとする。 ちょっと？...イラッと？...いや、 許さない、絶対 よろしい、ならば粉砕だ よそ様のサイトを粉砕する都合上、今回の実装はChrome機能拡張です。機能拡張はViteにChrome機能拡張用のプラグインvite-plugin-chrome-extensionを入れて作りました。今回は解説しないけど、これ超楽。フレームワークは無し、言語はTypeScriptです。 とは言え、クソアプリのためにChromeに機能拡張をイ
GSAP入門 - アニメーション制作のための高機能なJSライブラリ（前編） - ICS MEDIA
JavaScriptライブラリの「GSAPジーサップ」はウェブサイトのモーション制作に役立ちます。GSAPは高機能であり、実行性能が良好で、互換性も高い利点があります。 始点と終点の間を補間することでモーションを実現することは「トゥイーン」と呼ばれます（Betweenが語源のFlash用語）。トゥイーンの機能を提供するJSライブラリは多くの種類が存在しますが、その中でもGSAPは評判が高く、機能の多さでは群を抜いています。当サイトの記事『トゥイーンライブラリの比較検証』でも、類似のライブラリに比べて性能が高いことを確認しています。 旧TweenMax時代から数えてGSAP利用歴15年の筆者が、GSAPのおさえておくべき最低限の使い方から、現場で役立つテクニックを紹介します。 ▼GSAP公式サイト GSAP入門は前後編の2回にわたり解説します。前編では基本的なGSAPの使い方を中心に説明しま
11 JavaScript Animation Libraries For 2019
While browsing the web looking for a neat Javascript animation library, I’ve found that many of the “recommended” ones were not maintained for a while. After some research, I’ve gathered 11 of the finest libraries around to use in your app. I’ve also added a few more, mostly unmaintained, useful libraries. When building your UI with components, use Bit (GitHub) to easily share and reuse components
Lottieであなたの「サービス」をもっとリッチにアニメーションさせる話 - pixiv inside
この記事はピクシブ株式会社 Advent Calendar 2017の19日目です。 こんにちは、17新卒エンジニアのまつらいです。普段は主にpixivFANBOXというサービスでJavaScriptやPHPを書いています。今日は、ウェブブラウザ上で動く軽量で扱いやすいアニメーションを実現させることができる、僕の大好きな「Lottie / Bodymovin」について作例を含めて紹介します。 https://matsurai25.info/bodymovin/blue/ たとえば、デザイナー(※1)に貰ったAIファイルをそのままAfterEffectsで加工、レイヤー毎に動きをつけてみました。このページはiOS safariやIE11でも動作します。LPなどの目立つ部分でLottieを使うと、サービスがグッと印象的になるはずです。 なお、この例ではサイズの大きな画像が使っているので、端末の
アニメーションライブラリ決定版か!?anime.jsで軽量・軽快に実装！ - Qiita
少し前に、アニメーション最強のVelocity.jsの使い方という記事を書きましたが、対抗馬となるanime.jsが出てきたので使ってみました。 anime.jsとは？ 高機能かつ軽快なアニメーションする軽量ライブラリです。 Velocity.jsと違い、jQueryの$.animateと互換性はありませんが、記述方法が分かりやすくカンタンに導入できると思います。 なお、アニメーションは、Velocity.jsと同様にrequestAnimationFrameベースで動作させており、スムーズにアニメーションされます。 容量 Velocity.jsと比べると、anime.jsの方が軽いですね。 velocity.min.js : 34.4 KB anime.min.js : 9.21 KB 記述方法 はい、これで動きます。（右に100px移動） カンタンですね。
奇術の日なので、ScrollMagicとかJavaScriptのスクロール連動ライブラリについて調べてみました - Qiita
MITライセンス | Wikipedia GPL（GNU GPL v3）ライセンス | Wikipedia ここで言う「スクロール連動」とは、閲覧者のページ上のでのスクロール（量）を検知し、特定の量やビューポート（ブラウザの表示領域）内に特定の要素が検知されたときに、特定のイベントや演出が展開されるコンテンツ。としています。 ScrollReveal ScrollReveal は、他の類似ライブラリに比べてスター数も多く、頻繁にアップデートも行われているようで、2018年12月現在のバージョンは4.0.5。非商用はGNU GPL v3。商用ライセンスも用意されています。 アニメーションなど演出処理もjsに含まれた演出一体型ライブラリで、別途cssを読み込む必要はないので、手軽に使用できるのがメリット。他のライブラリと同様に、スクロール・要素検知イベントが用意されているので、イベント発火時に
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
