2019年になってもまだjQueryを使用している理由
現在、jQueryを使用している人、そしてjQueryを取り去ろうとしている人がいると思います。jQueryの使用に対する一つの考え方を紹介します。 Why I'm still using jQuery in 2019 by Martin Tournoij 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は元サイト様のライセンスの元、翻訳しています。 2019年になってもまだjQueryを使用しているのはなぜですか Hacker News での議論 多くの人が「普通のJavaScriptを使えば、jQueryは必要ない」と主張しています。私は多くを必要としないので、jQueryを必要としませんが、確かに便利です。 You might not need jQueryのようなページでは、jQueryを捨てるのは簡単だというアイデアを売り込もうとしていますが、逆にこのページの最初の例
jQuery A+ plugin
jQuery A+ is an unobtrusive script that adds useful features to 'A' tags allowing webpages to maintain compatibility with HTML standards. The script syntax is compatible with all HTML / XHTML standards. For example, you can open link in a new window/tab (like target="_blank") without invalidating the HTML code: <a href="index.htm" class="blank">Click Me</a> or open a popup window without using jav
【jQuery】無限スクロール［Infinite Scroll］を極限までカスタマイズ。 - ONZE
無限スクロールを実装する jQueryプラグインの［Infinite Scroll］を紹介します。 スクロールしてページの最下部まで移動すると、次のページの情報を自動で読み込み、ページの遷移無しで次々とコンテンツを表示してくれます。 ご存知のとおりFacebookのフィードやTwitterのタイムライン、TumblrのUIなど、超有名SNSサイトやモバイル版のアプリケーションでも導入されているので、その挙動は誰もが一度は体験しているでしょう。 最近ではクリエイティブ系のブログでも比較的多く実装されていて、需要も高まっているので、ウェブクリエイターの方々はマスターしておくべき技術の1つだと言えます。 さて。今日は、単に［Infinite Scroll］の実装方法を紹介するだけでなく、弊社オンズが実際に行った極限カスタマイズの方法も伝授します。 以下より本編をどうぞ。 基本の導入方法 ［Inf
【jQuery】ページのスクロールに応じて要素を表示する［Scrolla］の使い方
Webページのスクロールに合わせて要素を表示させるjQueryプラグイン［Scrolla］を紹介します。 同様の機能を持つプラグインでは［ScrollReveal］や［jquery.inview］または［WOW.js］などが有名ですが、これらと肩を並べて秀逸なので自信を持ってオススメできます。 実際に使ってみたサンプルは コチラからどうぞ。 Download : https://github.com/maximzhurkin/jquery-scrolla 導入方法は以下より。 ［Scrolla］のアニメーション部分は［animate.css］に依存します。 つまり必要になるファイルは3つ。 animate.css jquery.js scrolla.jquery.min.js これらのファイルを予め読み込んでおきます。 <link rel="stylesheet" href="animat
jQueryでアニメーション処理（「.animate()」）完了後に別の処理を実行させる方法｜BLACKFLAG
jQueryでアニメーションを実行させる「.animate()」。 一つのfunctionの中で複数実行させることも可能だったりするのですが、 アニメーション実行後、実行したアニメーション処理が完了した時点で別の処理を実行させたい、 という場合がたまにあったりするのですが、その記述方法をつい忘れてしまうことがあるので、 ここにメモ書きがてら紹介してみます。 jQueryでアニメーション処理完了後に別の処理を実行 $(function(){ $(セレクタ).stop().animate({アニメーション処理},1000,function(){ ～ここに処理を記載～ }); }); 例えば、画像にマウスオーバーした際に、 画像をアニメーション拡大させ、 拡大処理完了後に影を付ける（CSS3で）場合は。 $(function(){ $('img').hover(function(){ $(thi
サイトに手軽に目次機能を付加できるjQueryプラグイン「TOC」
ページに目次があると内容がある程度わかって分かりやすいこともあります。 WordPressとかだと、目次を付加するには、Table of Contents Plusとかが定番です。 先日、そういった目次機能を自由度も高く設定できる「TOC」というjQueryプラグインを使ってみたところ、自前で実装するのに結構使い勝手が良さそうだったので紹介です。 TOCとは TOC（jQuery Table of Contents Plugin）は、WEBページ上に目次を自動生成するjQueryプラグインです。 ちなみに、サンプルとして、このページの左側でも利用しています。（※モバイルでは非表示になっています） このTOCプラグインの特徴は以下です。 カスタマイズの自由度が高い目次をクリックするとスムーズにスクロール移動する現在見ているセクションをハイライト表示スクリプトが軽量スムーズなスクロール移動や、
jQuery with CoffeeScript | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. I don’t always write CoffeeScript, but when I do, I’m probably using jQuery too; I always forget the syntax for stuff. So I’m going to write it all down here so I can reference it until I memorize it. Note that the compiled example doesn’t include the automatic closure around everything you get in
表示ページに合わせて動的に「戻る」ボタンのリンク先URLを変更する方法【JavaScript / jQuery】
当ブログではヘッダーバーを固定しており、左上のロゴをクリックするとトップページに戻るようにしています。レスポンシブデザインによるスマートフォン対応を行いました。PCブラウザでのデザインが、そのままスマホでのデザインに反映されるようになったことで、スマホにおいては状況により、このロゴは「戻る」ボタンとしてクリックされるようになるんじゃないかと思い、記事のページが表示された時のみ、前のページに戻るような機能を実装することにしました。特にindexの2ページ目以降から記事ページに飛んだ時とかに威力を発揮するのではと思っています。
Drawer
Flexible drawer menu using jQuery, iScroll and CSS. InstallationStep 1: Link required filesDownloadDrawer v3.2.2jQuery 1.11.3+ Created by jQuery Foundation and other contributors.iScroll Created by Matteo Spinelli.CDN<!-- drawer.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css"> <!-- jquery & iScroll --> <script src="https://ajax.google
simple-sidebar
Press the icon in the top right corner of this page to run simple-sidebar. A jQuery plugin that allows to create a side nav as in modern mobile apps. It aims to simplicity so that everybody can use it no matter if expert programmers or not. For an even simpler and stable version of this plugin check the simpler-sidebar fork. Download Run one of these commands in your bash according to your needs.
TOC | jQuery Table of Contents Plugin
TOC is a jQuery plugin that will automatically generate a table of contents for your page. You can see an example of it on the left side of the page. Features Completely customizable Click to smooth scroll to that spot on the page Automatically highlight the current section Extremely lightweight (744 bytes gzipped) Can have multiple on a page Download Production Development Source Usage $('#toc').
jquery.kerning.js
jQuery.Kerning.js A kerning plugin specific with Japanese webfont Get Source Demo うつくし明朝 - plain ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 うつくし明朝 - kerned ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 M+ 2m Regular - plain ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 M+ 2m Regular - kerned ポラーノの広場 あのイーハトーヴォのすき
Fluidbox, a jQuery plugin for beautiful lightboxes
Replicating and improving the lightbox module seen on Medium with fluid transitions Introduction Opening images seamlessly in a lightbox on your page without interruption. This demo was inspired by how Medium handles embedded images. Made by Terry. This project was originally initiated as a personal challenge to replicate Medium’s lightbox module, but it soon developed into a full-fledged jQuery p
スクロールに応じて背景画像を徐々にblurさせる - かちびと.net
Result jQuery $(function() { zoom = $('.feature').css('background-size') zoom = parseFloat(zoom) / 100 size = zoom * $('.feature').width(); $(window).on('scroll', function() { fromTop = $(window).scrollTop(); newSize = size - (fromTop / 3); if (newSize > $('.feature').width()) { $('.feature').css({ '-webkit-background-size': newSize, '-moz-background-size': newSize, '-o-background-size': newSize,
スマホやタブレットのフリック（スワイプ）イベントを取得できる「jQuery Touchwipe」ライブラリ - へべれけな日記
スマホ用のページでフリック対応のインターフェースを実装したくて、でも一からつくるのめんどくさくてライブラリを探す。 いろんな人が公開しててざくざくでてくるも、フリック対象をfloatでレイアウトしてるものは多いのだけど、 今回はCSS3のBoxレイアウトに使えるやつを探してて、で、これが意外見つからとない。（なんか理由あるんだろうか？） で、たどりついたのがこれ。 「jQuery Touchwipe」 http://www.netcu.de/jquery-touchwipe-iphone-ipad-library フリックに反応するエフェクトではなくてフリックイベント自体の検出を実装するライブラリ。 というとなんか物足りなそうだけど、これがなかなか勝手がよかった。 なにせ使い方がシンプル。 $("#imagegallery").touchwipe({ wipeLeft: function(
ブラウザ対応が簡単に！「modernizr.js」の機能と利用方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、最近あだ名が増えるばかりのおじいちゃんと申します。 今回はブラウザ対応で便利な「modernizr.js」を紹介します。 modernizr.jsとは modernizr.jsはJavaScriptのライブラリです。 閲覧者のブラウザがどのような機能をサポートしているかをチェックして、HTMLタグにサポート状況を判別できるクラスを付与し、その結果を記録したmodernizrグローバルオブジェクトを生成してくれます。 それらを利用して、ブラウザごとの処理を記載することが可能となります。ということで、さっそく使ってみましょう。 ダウンロード 下記よりダウンロードが可能です。 Modernizr http://modernizr.com/ modernizr.jsをダウンロードしようとするとチェックボックスが並んでいるページが表示されます。これらの項目はmodernizr.jsを使用
a要素にclassを加えるだけで別窓や印刷、ページ内アンカーへのスクロールなどの機能を加えるスクリプト -jQuery A+ | コリス
HTML5でもXHTMLのどちらでもvalidなHTMLで、a要素にclassを加えるだけでリンクを別窓で開いたり、モーダルウインドウを表示したり、通知パネルを表示したり、ページ内アンカーへアニメーションでスクロールさせたり、ページの印刷ボタンとして機能したりなど、a要素にさまざまな機能を加えるjQueryのプラグインを紹介します。 デモページ デモでは、a要素をトリガーとするさまざまな機能がclassで設定できます。対応している機能は以下のようにたくさんあります。 リンクを別窓（タブ）で開く リンクを開く前に確認ダイアログを表示 iframeを使ったダイアログを表示 Ajaxを使ったダイアログを表示 モーダルウインドウを表示 フレーム内にリンクを表示 通知パネルを表示 印刷を表示 ページ内アンカーへアニメーションでスクロール スクロールのスピード設定 スクロールの位置設定 ※それぞれ細か
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MixItUp | KunkaLabs
CoffeeScriptでJQueryを使う時の「this」 - Qiita
anime.jsでテキストにアニメーションエフェクトを付与するコードをまとめたサンプル集・「MOVING LETTERS」 - かちびと.net