サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
現在、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+ is an unobtrusive script that adds useful features to 'A' tags allowing webpages to maintain compatibility withHTML standards. The script syntax is compatible with allHTML / XHTML standards. For example, you can open link in a new window/tab (like target="_blank") without invalidating theHTML code: <a href="index.htm" class="blank">Click Me</a> or open a popup window without using jav
無限スクロールを実装する jQueryプラグインの［Infinite Scroll］を紹介します。 スクロールしてページの最下部まで移動すると、次のページの情報を自動で読み込み、ページの遷移無しで次々とコンテンツを表示してくれます。 ご存知のとおりFacebookのフィードやTwitterのタイムライン、TumblrのUIなど、超有名SNSサイトやモバイル版のアプリケーションでも導入されているので、その挙動は誰もが一度は体験しているでしょう。 最近ではクリエイティブ系のブログでも比較的多く実装されていて、需要も高まっているので、ウェブクリエイターの方々はマスターしておくべき技術の1つだと言えます。 さて。今日は、単に［Infinite Scroll］の実装方法を紹介するだけでなく、弊社オンズが実際に行った極限カスタマイズの方法も伝授します。 以下より本編をどうぞ。 基本の導入方法 ［Inf
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()」。 一つのfunctionの中で複数実行させることも可能だったりするのですが、 アニメーション実行後、実行したアニメーション処理が完了した時点で別の処理を実行させたい、 という場合がたまにあったりするのですが、その記述方法をつい忘れてしまうことがあるので、 ここにメモ書きがてら紹介してみます。 jQueryでアニメーション処理完了後に別の処理を実行 $(function(){ $(セレクタ).stop().animate({アニメーション処理},1000,function(){ ～ここに処理を記載～ }); }); 例えば、画像にマウスオーバーした際に、 画像をアニメーション拡大させ、 拡大処理完了後に影を付ける（CSS3で）場合は。 $(function(){ $('img').hover(function(){ $(thi
ページに目次があると内容がある程度わかって分かりやすいこともあります。WordPressとかだと、目次を付加するには、Table of Contents Plusとかが定番です。 先日、そういった目次機能を自由度も高く設定できる「TOC」というjQueryプラグインを使ってみたところ、自前で実装するのに結構使い勝手が良さそうだったので紹介です。 TOCとは TOC（jQuery Table of Contents Plugin）は、WEBページ上に目次を自動生成するjQueryプラグインです。 ちなみに、サンプルとして、このページの左側でも利用しています。（※モバイルでは非表示になっています） このTOCプラグインの特徴は以下です。 カスタマイズの自由度が高い 目次をクリックするとスムーズにスクロール移動する 現在見ているセクションをハイライト表示 スクリプトが軽量 スムーズなスクロール
Get affordable and hassle-freeWordPress 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’mgoing to writeit all down here so I can referenceit until I memorizeit.Note that the compiled example doesn’t include the automatic closure around everything you get in
当ブログではヘッダーバーを固定しており、左上のロゴをクリックするとトップページに戻るようにしています。レスポンシブデザインによるスマートフォン対応を行いました。PCブラウザでのデザインが、そのままスマホでのデザインに反映されるようになったことで、スマホにおいては状況により、このロゴは「戻る」ボタンとしてクリックされるようになるんじゃないかと思い、記事のページが表示された時のみ、前のページに戻るような機能を実装することにしました。特にindexの2ページ目以降から記事ページに飛んだ時とかに威力を発揮するのではと思っています。
Flexible drawer menu using jQuery, iScroll andCSS. 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
Press the icon in thetop right corner of this page to runsimple-sidebar. A jQuery plugin that allows tocreate a side nav as in modern mobile apps.Itaims tosimplicity so that everybody can useit no matter if expert programmers or not. For an evensimpler and stable version of this plugin check thesimpler-sidebar fork. Download Run one of these commands in your bash according to your needs.
TOC is a jQuery plugin that will automatically generate a table of contents for your page. You can see an example ofit 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 SourceUsage $('#toc').
jQuery.Kerning.js A kerning plugin specific withJapanese webfont Get Source Demoうつくし明朝 - plain ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。うつくし明朝 - kerned ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 M+ 2m Regular - plain ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 M+ 2m Regular - kerned ポラーノの広場 あのイーハトーヴォのすき
Replicating and improving the lightbox module seen on Medium with fluidtransitions Introduction Opening images seamlessly in a lightbox on your page without interruption. This demo was inspired by how Medium handlesembedded images. Made by Terry. This project was originally initiated as a personal challenge to replicate Medium’s lightbox module, butit soon developed into a full-fledged jQuery p
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,
スマホ用のページでフリック対応のインターフェースを実装したくて、でも一からつくるのめんどくさくてライブラリを探す。 いろんな人が公開しててざくざくでてくるも、フリック対象をfloatでレイアウトしてるものは多いのだけど、 今回はCSS3のBoxレイアウトに使えるやつを探してて、で、これが意外見つからとない。（なんか理由あるんだろうか？） で、たどりついたのがこれ。 「jQuery Touchwipe」 http://www.netcu.de/jquery-touchwipe-iphone-ipad-library フリックに反応するエフェクトではなくてフリックイベント自体の検出を実装するライブラリ。 というとなんか物足りなそうだけど、これがなかなか勝手がよかった。 なにせ使い方がシンプル。 $("#imagegallery").touchwipe({ wipeLeft: function(
こんにちは、最近あだ名が増えるばかりのおじいちゃんと申します。 今回はブラウザ対応で便利な「modernizr.js」を紹介します。 modernizr.jsとは modernizr.jsはJavaScriptのライブラリです。 閲覧者のブラウザがどのような機能をサポートしているかをチェックして、HTMLタグにサポート状況を判別できるクラスを付与し、その結果を記録したmodernizrグローバルオブジェクトを生成してくれます。 それらを利用して、ブラウザごとの処理を記載することが可能となります。ということで、さっそく使ってみましょう。 ダウンロード 下記よりダウンロードが可能です。 Modernizr http://modernizr.com/ modernizr.jsをダウンロードしようとするとチェックボックスが並んでいるページが表示されます。これらの項目はmodernizr.jsを使用
HTML5でもXHTMLのどちらでもvalidなHTMLで、a要素にclassを加えるだけでリンクを別窓で開いたり、モーダルウインドウを表示したり、通知パネルを表示したり、ページ内アンカーへアニメーションでスクロールさせたり、ページの印刷ボタンとして機能したりなど、a要素にさまざまな機能を加えるjQueryのプラグインを紹介します。 デモページ デモでは、a要素をトリガーとするさまざまな機能がclassで設定できます。対応している機能は以下のようにたくさんあります。 リンクを別窓（タブ）で開く リンクを開く前に確認ダイアログを表示 iframeを使ったダイアログを表示 Ajaxを使ったダイアログを表示 モーダルウインドウを表示 フレーム内にリンクを表示 通知パネルを表示 印刷を表示 ページ内アンカーへアニメーションでスクロール スクロールのスピード設定 スクロールの位置設定 ※それぞれ細か
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
