脱jQueryの道その２:あの機能は素のJavaScriptでどうやるんだろ編
脱jQueryの道その２:あの機能は素のJavaScriptでどうやるんだろ編 脱jQueryの道の第二弾です。プラグインを使うまでもない小さな機能はjQuery使わない場合どう書くんだろう。ということでやてってみたいと思います。 投稿日2019年04月18日 更新日2019年04月19日 アニメーションはJavaScriptで制御する方法もありますが、極力CSSでおこないます。 ちなみに脱jQueryの道 第一弾はこちら。 脱jQueryの道 初級編 タブメニュー ディスプレイnoneとblockをフェードインで切り替えたいときはキーフレームアニメーション使うと簡単です。 JavaScript (() => { document.querySelectorAll('.tab-block').forEach((tabContents) => { let activeIndex = 0; c
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
フェード表示やタイピング風など、テキスト表示に動きをつけられるjQueryプラグイン 8 - NxWorld
いずれもテキストがフェードや回転といったアニメーション付きで表示されたり、一文字ずつタイピングされているような見せ方を実装することができるjQueryプラグインです。 同じようなプラグインが並んでいる感じですが、軽量なものやオプションが豊富に揃っているもの、日本語にもしっかり対応しているかなどそれぞれ特徴もあるので、こういったものを使いたい時に少しでも選択肢が広がるよう良さそうなものを備忘録兼ねてまとめました。 Letter by Letter JS Letter by Letter JS はテキストを徐々に表示させる効果を簡単に実装でき、1KBという軽さも特徴のjQueryプラグインです。 デモ画面などでは全て英語が使われていますが、日本語でも動くのは確認できました。 オプションとして表示スピードと表示タイプを指定することができ、表示タイプでは単純に表示させる'show'とフェード表示さ
CSSでアニメーションを作るのがグッと楽になるアニメーションライブラリまとめ
モダンブラウザの普及により、以前に比べるとCSS... / CSSアニメーションライブラリ / Animate.css他...全19件 モダンブラウザの普及により、以前に比べるとCSS3アニメーションを使う機会が増えてきています。CSSを使ったアニメーションは、プレフィックスが必要だったり、アニメーションの流れがコードを見ただけでは直感的に分かり辛かったり、自由に使いこなせるには慣れと経験が必要です。 そういった悩みを解決してくれるアニメーションライブラリが存在するのをご存氏でしょうか？ちょっとしたCSSアニメーションであればライブラリを使うことでいとも簡単に組み込むことができます。 そんなありがたーいライブラリを集めました。
Googleから学ぶ ヌルヌルサクサクなスライドメニュー - Qiita
スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。 一方Google先生はパーフェクトなスライドメニューを実装していた さすがGoogle先生！ 俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。 1. スライドのアニメーションがとても滑らか・ちらつかない 2. ボタンの反応にストレスを感
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sidebar Transitions