【脱jQuery】jQuery <=> vanillaJS 書き換え集
jQuery <=> JavaScript全書き換え一覧ではありません jQueryで書いていたコードをvanilla(素のJavaScript)に書き換えたいけど書き方がわからなくて調べ方もピンとこない状態の自分がこれを見ることができたらきっと嬉しいと思ったのでここに供養します。 脳の記憶容量が8バイトくらいしかないので今でもシンプルにJavaScriptの書き方をページ内検索して使ったりしています。 /*----------------------------------- セレクター ------------------------------------*/ //html $("html") document.documentElement; //body $("body") document.body; //id $("#hoge"); document.getElementBy
【JavaScript】超軽量でカード型レイアウトを実装できる［Magic Grid］の使い方
今日こちらで紹介するJavaScriptのプラグイン［Magic Grid］は、高さの異なる複数のカード型レイアウトを実装する際に役立つライブラリです。 高さが揃っている複数のカードを配置するのであれば CSS Grid や Flexbox で簡単に実装できますが、高さが異なるカードをレンガ状に綺麗に配置するとなると、どうしてもjQuery等のライブラリに頼らざるを得ません。 この手のライブラリの有名どころは［jQuery Masonry］ですが、［Magic Grid］は同じように簡単に実装できる点が大きな魅力です。 ［Magic Grid］の挙動のサンプル ［Magic Grid］を実際に試しているGif画像です。 ウィンドウ幅を変更すると、配置されたカード型の要素が移動して再配置されます。 スムーズで気持ちいい動作ですね。 GitHub : Magic Grid JavaScript
パララックスの実装におすすめのJavaScriptライブラリまとめ【2021年版】 | Web Design Trends
Webデザインにおいて、定番テクニックの1つとして使われるのがパララックスです。パララックスはライブラリを使用することで手軽に導入することができ、Webサイトの印象を大きく変えることができます。 今回は、パララックスの実装におすすめのJavaScriptライブラリをご紹介します。 基本的にVanilla JSで作られているで、依存関係など意識せずに利用することができます。 パララックス（Parallax）とは、英語で「視差」という意味で、Webサイトにおけるパララックスはスクロールなどの動きに合わせて要素が動くスピードをずらしたり、異なる動きを加える演出のことを指します。 数年前に大きく流行し、現在ではWebサイトの定番テクニックの1つとして定着しています。 パララックスをWebサイトに取り入れることによって、デザインに立体感や奥行きを生み出すことができ、また一味違った雰囲気のデザインを作
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() {/*実行させたい処理
ブロック要素をインタラクティブに傾けて立体的に表示できる「universal-tilt.js」:phpspot開発日誌
universal-tilt.js | JavaScript & jQuery parallax tilt effect library ブロック要素をインタラクティブに傾けて立体的に表示できる「universal-tilt.js」 次のようにマウスホバーで平面的な要素を立体的に傾けて表示させられます。 関連エントリ 立体的なサイコロ画像を描画するイラストレーターチュートリアル 立体的でクールなアプリ用アイコン集「170 dock icons」
どんどん簡単になっていく！最近見かけるアニメーションを伴ったさまざまなUIが実装できるスクリプト -LayerJS
アイコンをクリック・タップすると横からスライドして表示されるナビゲーション、サムネイルをタップするとズームして次のコンテンツを表示、今までとは異なるうるさくないパララックスエフェクト、ほかにもスライダーやアコーディオンやモーダルなど。 最近のWebページやスマホアプリでよく見かけるアニメーションを伴ったさまざまなUIが簡単に実装できる超軽量スクリプトを紹介します。 他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。 ユニバーサル スライダー、ポップアップ、アコーディオン、メニュー、パララックス、ジャスチャーなど、さまざまなUIパターンを簡単に実装できます。 ピュアHTML HTMLのdata属性を使用して、インターフェイスをレイアウトし、インタラクションを定義します。 互換性 React、VueJS、Angu
CSSだけでも実装できる！ページ内アンカーやページ上部にアニメーションでスクロールさせるCSS, JavaScriptのまとめ
ページ内のアンカーやページの上部にアニメーションで、スムーズにスクロールさせるCSS、単体のJavaScript、Vue.jsやjQueryのプラグインを紹介します。 現在では、CSSだけでも実装できるようになりました。IEは例のごとく非対応ですが、ポリフィルがあるので利用できます。 イラスト: Girls Design Materials CSSでページをアニメーションでスクロールさせる JavaScript単体でページをアニメーションでスクロールさせる プラグインでページをアニメーションでスクロールさせる CSSでページをアニメーションでスクロールさせる CSSのプロパティ「Scroll-behavior」を使用すると、アニメーションを使用してスムーズにスクロールさせることができます。 Scroll-behaviorのサポートブラウザ scroll-behavior -MDN web
ページトップへ戻る！ jQuery非依存のライブラリ「MoveTo」でスムーススクロールを実装しよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのライダーです。 夜中でも買いに行ってしまうくらい、コンビニの肉まんにどハマりしています。そんな便利なコンビニも、24時間営業を見直す、というニュースが流れ、時代の流れを感じています。 フロントエンド界隈でも時代は流れ、以前はデファクトスタンダートと言われていた（らしい）jQueryは、ブラウザの実装が進むにつれ、使われないことも増えてきました。 そんな中、実装に困ったのが「ページトップへ戻る」ボタンでした。そこで今回は、jQueryに依存せず「ページトップへ戻る」を実装できるライブラリをご紹介します！ MoveTo 「MoveTo」は、Webサイトにスムーススクロールを実装できるライブラリです。 スムーススクロール ページ内遷移などでスムーズにアニメーションすることなどを指します。 有名なものだと、多くのサイトで見られるインターフェースの「ページトップ
スクロールイベントやマウスホイールイベントをlodashのthrottleで間引いていい感じにしよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、まろCです。 今日は、スクロールでギュインギュイン動くサイトを作るときに、そのイベントの制御をうまいことやってみようという記事になります。 イベントの問題点 通常、scrollやmousewheelをaddEventListenerすると、そのイベントごとに処理が走ります。デュルルルって移動させると、そのデュルルルの間に20回くらい処理が走ることになります。 それはブラウザにとって負担になりますし、処理自体が何度も走ることで意図しない動きが発生します。つまり、バグってるなと思われて、ディレクターやデザイナー、そのサイトを見ている全ての人々に“伝わらないサイト”として認定されてしまします。 そうなったら悲しみです。得るはずだった喜びが全て深い深い闇に消え、それを救い出す方法さえも見つけられないまま過ごす日々に生きがいを見出すことができるのでしょうか？ throttle あなたの素
Topへ戻ろう！シンプルなスムーズスクロールJSライブラリ、jump.jsをご紹介！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
バスタオルはフワフワよりゴワゴワ派、フロントエンドエンジニアのザワです。 ウェブサイトでよく見かける動きの一つ、ボタンをクリックすると、するするっと目的の位置にスクロールする動きがありますよね。TOPへ戻るボタンや、ページ内アンカーなどが代表的に見られると思います。jQuery信仰派であった時は、animate関数を使用していたものです。今回は、jQueryを使わずに簡単に実装できるJSライブラリであるjump.jsをご紹介したいと思います。 インストール まずはライブラリをインストールしましょう！ github Demo 使い方 jump(‘.target’); え、それだけ？ はい。それだけです。 第一引数には、上に挙げた例のように、セレクタを渡す他に、ノードを渡したり、現在位置からの相対値を渡すことができます。 //node const node = document.querySe
スクロール時にちょっとしたアニメーションを加えたいときに使えるJSライブラリ「ScrollReveal」
シンプルなスクロールアニメーションを実装したいときに使えそうなライブラリを見つけたのでご紹介します。「ScrollReveal 」というやつです。 無意味にたくさん動くアニメーションはUIやユーザの情報消費の邪魔をするので好きではないですが、単調なページをより魅力的に見せるための「気の利いた」アニメーションならいいですよね。 ScrollRevealのいいところ 3.3KB（minified / gzipped）で軽量 単体で動く。jQueryなどのライブラリに依存しないし別途CSSも必要ない 実装がシンプル アニメーションを細かく調整できる まだ開発中でv4がそろそろ完了しそう？（2017年内にと書いてあります が…） animate.css のようなCSSアニメーションのライブラリと連携させるスクリプト や他にもAOS とかDelighters.JS とかもあるんですが、単体でサクッと
最新版で学ぶwebpack 4入門 - BabelでES2017環境の構築(React, Three.js, jQueryのサンプル付き) - ICS MEDIA
最新版で学ぶwebpack 5入門 Babel 7でES2023環境の構築 (React, Vue, Three.js, jQueryのサンプル付き) ECMAScript 2015(略：ES2015)以上の言語仕様でJavaScriptを書くことが、昨今のウェブのフロントエンドエンジニアの基本テクニックです。しかし、ECMAScript 2015以上の仕様のJavaScriptで記述すると、Internet Explorer 11など古いブラウザでは動作しないこともあります。そこでBabelなどのトランスパイラと呼ばれるツールを使って、ES2015〜ES2023の仕様で記述したJavaScriptファイルを互換性のあるECMAScript 5に変換します。 トランスパイラとして一番有名なのが「Babel」というツールです。ただ、BabelにはECMAScript Modules（impo
便利すぎ！jQuery不要のスライダー「Swiper.js」で色々と遊んでみよう | WordPressテーマ／DigiPress
汎用性に優れている、超定番のjQueryベースのスライダーライブラリといえば、「slick」、「bxSlider」、「FlexSlider」 あたりでしょうか。 しかし、これらの名だたるライブラリよりも、総合的に機能が豊富でカスタマイズ性にも富み、しかもjQueryに依存しないJavaScriptスライダーライブラリとして人気を集めているのが、「Swiper.js」です。 試してみたところ、モバイルデバイスとレスポンシブ表示にも対応しているだけでなく、パラメータが豊富で非常に凝ったスライドショーでもあまりに簡単に実装できる優れものだったので、いくつかのサンプルと共にご紹介します。 Swiper.js の基本的な使い方 Swiper.js を使用するには、headセクション内にCSSと、</body>の前にメインのJavaScriptファイルを読み込んでおきます。 ライブラリ自体をダウンロー
GitHub - ApoorvSaxena/lozad.js: 🔥 Highly performant, light ~1kb and configurable lazy loader in pure JS with no dependencies for responsive images, iframes and more
Highly performant, light and configurable lazy loader in pure JS with no dependencies for images, iframes and more, using IntersectionObserver API Lozad.js: lazy loads elements performantly using pure JavaScript, is a light-weight library, just minified & gzipped, has NO DEPENDENCIES :) allows lazy loading of dynamically added elements as well, supports <img>, <picture>, iframes, videos, audios, r
Sticky Sidebar ⬆⬇
Sticky Sidebar 😎 Sticky Sidebar ⬆⬇ is a pure JavaScript plugin for making smart and high performance sticky sidebar, works with sidebar if it’s taller or shorter than the viewport, integrated with resize sensor to re-calculate the dimensions automatically when the size of sidebar or its container is changed, supports jQuery/Zepto and compatible with Firefox, Chrome, Safari, and IE9+. Source can b
Velocity.js
Overview Velocity is an animation engine with the same API as jQuery's $.animate(). It works with and without jQuery. It's incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined. Download Download Velocity, include it on your page, and replace all instances of jQuery's $.animate() with $.veloci
Web制作者がチェックしておきたい、気持ちいいインタラクションやUIを実装できるJavaScriptのまとめ
Webサイトやブログに、気持ちいいインタラクションやユーザーインターフェイスを実装できるJavaScriptを紹介します。実用的なものから、あまり見かけない新鮮なものまで、素晴らしいアイデアがいっぱいです！
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今どきのスムーズスクロール(2019年版)
Parallax background