jQueryを使わずにスライドメニューを実装しよう
jQueryを使わずにスライドメニューを実装しようスマートフォンのアプリやモバイルサイズのWebサイトでよく見かけるスライドメニュー。どうも「jQueryがないと実装できない」と思っている人がちょこちょこいるようなので、簡単なJavaScriptで実装できるんだよーというのを記事にしてみます。 このようにボタンをクリックすると横からひゅるっと出てくるメニューを作っていきます。 1. メニューを開いた状態を作成まずは HTML と CSS で「Menu」ボタンをクリックしてメニューが開いている状態を作成します。メニュー部分は position: absolute; で位置を指定しています。また、メニュー項目に white-space: nowrap; を加えることで、スライドさせた時に日本語が変に改行されるのを防ぎます。それ以外は色や線、余白の指定などで、特に変わったことはしていません。 H
femtoJS - Really small JavaScript (ES6) library for DOM manipulation.
// Hi! // // ... } }, after: { argOrder: ['content'], argTypes: { content: 'string | HTMLElement | femtoJS' }, desc: 'If content is a' + ' string, append that HTML' + ' after the end of the elements. If' + ' it\'s a HTMLElement,' + ' append that element after the end of' + ' the elements. If it\'s a' + ' femtoJS object, append' + ' everything in its selection after the' + ' end of the elements.' +
jQueryライクな構文でDOM操作を行うために開発された超軽量ライブラリ・「femtoJS」 - かちびと.net
femtoJSはjQueryライクな構文でDOM操作を行うために開発された超軽量JavaScript(ES6)ライブラリです。たった20行、圧縮すると0.4kb程度のライブラリで、以下のように概ねjQueryと同じ書き方で使う事が出来ます。 $("div").css("background-color:green;").html("Hello World").addClass("new"); 同じく$を使うのでjQueryと併用するとコンフリクトを起こす事になります。DOM操作だけでjQueryを使っている場合はこのような代替ライブラリが軽くてパフォーマンスも向上しそうですね。使えるメソッドは16種ほどしかありませんが十分需要はありそうです。ライセンスはMIT。 femtoJS
Webシステムの印刷が容易、多機能になるライブラリまとめ
Webに限りませんが、業務システムで常に問題になるのが印刷です。多くの場合、PDFを生成して印刷しますが、それもコードが難解で分かりづらくなってしまいます。 今回はWebシステムにおいて使える印刷ライブラリを紹介します。印刷機能をより便利に、使いやすいものにしてくれることでしょう。 Print.js 表示されているHTMLではなく、全く異なるコンテンツを印刷できます。PDFを印刷したり、画像一つだけを印刷すると言ったこともできます。テキストを追加することも可能です。 Print.js – Javascript library for HTML elements, PDF and image files printing. Gutenberg 印刷をより細かく制御するためのCSSを提供しています。クラスを使って指定することで、文字の大きさや改ページなどを決まった場所で行えるようになります。よ
[JS]0.6kBの超軽量！基本的なDOM操作を実行するためだけに開発されたシンプルなライブラリ -nanoJS
要素にclassを加えたり、変更したり、要素を削除したり、::beforeや::afterを加えたり、要素の表示位置を取得したり、変更したり、クリックやホバーのイベントを設定したり、基本的なDOM操作を実行するためだけに開発された超軽量ライブラリを紹介します。 jQueryは使うけど、$関数や上記の挙動しか利用しないという人には、特にぴったりなスクリプトです。 nanoJS nanoJS -GitHub nanoJSの特徴 nanoJSのデモ nanoJSの使い方 nanoJSの特徴 トータル100行、0.6kBの超軽量スクリプト。 jQueryに似た構文が利用でき、オブジェクトの連鎖的もサポート。 それぞれのメソッドは単独で機能するため、削除・追加することも可能。 IE9対応（addClass, removeClass, toggleClassのみ非対応）。 nanoJSのデモ ドキュメ
![[JS]0.6kBの超軽量！基本的なDOM操作を実行するためだけに開発されたシンプルなライブラリ -nanoJS](https://cdn-ak-scissors.b.st-hatena.com/image/square/40cbc63a058df9588ea63a08df7cc3661edb7792/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201802%2F2018053005.png)
nanoJS - Minimal standalone JS library for DOM manipulation
nanoJS is around 100 lines of code (0.6 Kb compressed) JavaScript library for basic DOM manipulation. It has jQuery like syntax and supports chaining. Because is so small and simple you can add or remove methods directly in the library, meaning is very customizable. All methods are unrelated so removing one will not affect the library in any way (except each method). Use this library as starting p
Exif.js Exif に設定されている回転情報に対応したinput要素(画像)のプレビュー | バシャログ。
どうも藤原です。今年のGWは神がかってますね。弊社は5月1日が創立記念日ですので、 4月最終週は (^-^)です。 本日は 画像の Exif 情報を取得する Exif.js をご紹介いたします。 背景 input 要素に画像を添付した時に FileReader を使ってプレビュー表示していたんですが、 スマホで行うと撮影した画像とプレビューしてる画像の回転があってないことありますよね。 原因はExif (wiki)の回転情報です。 PHPで回転を戻して保存したりすることはあったのですが、JSでプレビューしているときも(POST前)正しく表示したいということです。 抜き出すには結構手間な作業必要なのですが、そんな時見つけたのがExif.jsです。 これで簡単に回転を取得できるようになります。 サンプル htmlは以下で、プレビュー自体の実装方法は input の label に対して bac
フォームをより使いやすくするためのJavaScript/CSSツール10選
この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。 10 JavaScript and CSS Tools to Enhance Your Forms フォームは多くのWebサイトにとって欠かせないものです。しかし私たちは、その細部にまでいつも気を配れるわけではありません。 フォームを改善する方法はたくさん存在します。バリデーションの追加や、マスクやその他のビジュアルガイドをインプットしたりすることが挙げられるでしょう。そしてこれは表面的な対処でしかありません。最終目標は、できる限り使いやすく魅力的なフォームにすることです。 この記事では、最適なフォームを作るための10の無料ツールを紹介します。 formbase formbaseは、CSS/SASSを使用してフォーム要素に改善されたデフォルト要素をもたらすパッケージ
背景画像を画面いっぱいにしてスライドショー化する - かちびと.net
Result jQuery (function($) { $.fn.fullClip = function(options) { //デフォルト設定 var settings = $.extend({ current: 0, images: [], transitionTime: 1000, wait: 3000, static: false }, options); // 画像プリロード var i, end; for (i = 0, end = settings.images.length; i < end; ++i) { new Image().src = settings.images[i]; } // 背景指定するCSS $('.fullBackground') .css('background-image', 'url(' + settings.images[settings.
high-performance-sticky-sidebar.html
サイドバーをスクロールに合わせて、ぴたっとくっつける快適に動作する超軽量スクリプトを紹介します。 コンテンツが長い・短い場合はもちろん、サイドバーが長くてビューポートをはみ出す場合にも期待通り完璧に対応します。スクリプトは単体で動作し、jQueryのプラグインとして動作させることも可能です。 スクロール時にすべてのサイズを計算するのではなく、必要なサイズだけを再計算。 スクロール時のラグやジャンクを発生せず、リフローを起こさずにスムーズに動作。 サイドバーとコンテナのサイズが変更された時は、それらのサイズを正確に再計算。 特定の状況下でフックするために、イベントトリガーを用意。 コンテナが長くても短くてもサイドバーを扱うことができます。 他のスクリプトへの依存はなく動作。 jQueryやZeptoのプラグインとして利用することも可能。 実装はスーバー簡単！ Sticky Sidebarのデ
【脱jQuery】JavaScriptをネイティブで書くときのあれこれTips | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは、デザイナーの奥田です。 最近では「脱jQuery」や「Vanilla.js」という言葉が流行っていますがjQueryをはじめに覚えた僕としてはなかなかハードルが高いイメージでした。 jQueryを切り捨てるメリットとしては「ファイルサイズ」や「表示速度」があると思います。そこまで大きな差は感じないかもしれませんが少しでもクオリティを上げるためであれば切り替えてみてもいいかもしれません。 今回は脱jQueryする際によく使う書き方をjQueryとNativeを見比べながら解説していきたいと思います。 Table of contents要素の取得イベントの操作クラスの操作属性の操作スタイルの操作ループ処理Vanilla.jsのプラグイン最後に要素の取得IDはDocument内に1つというルールがあるので取得はgetElementByIdで取得するのが手っ取り早いでしょう。 ID//
Velocity.jsを使ったスムースなページ内スクロール | UNORTHODOX WORKBOOK | Blog
アニメーションについて色々と勉強している。jQueryのアニメーションはこま落ちするし、CSSのアニメーションは計量だけど、少し複雑だったり、同時に走らせたりすると、(Macだと特に)カクついてしまうことが多くて困っていた。 Velocity.jsというアニメーションJSライブラリが計量で良いということで、最近結構いじっていて、すごく簡単に導入できるし、色々できそうで光を感じている。 Velocity.js スムーススクロールをVelocity.jsで とりあえず簡単なところからはじめてみた。よくあるページ内リンクの移動時とトップへ戻る際のスクロールをスムースにするやつ。 スムーススクロールをjQueryだけでやったやつ 今まではjQueryだけでやっていた。それが以下。 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/j
2016年総まとめ、JavaScriptのライブラリやjQueryのプラグイン100+α選
毎年恒例のJavaScriptのライブラリやjQueryのプラグインの総まとめを紹介します。 今年リリースされたものから、アップデートされたものまで、これからのWebページやスマホページの制作に役立つJavaScriptを100+αまとめました。 KUTE.js クロスブラウザ対応のさまざまなアニメーション、2Dと3Dの変形、SVGの変形、CSSのプロパティ値の変化、SVGのモーフィング、SVGの描画などネイティブのJavaScriptでアニメーションを実現する軽量スクリプト。 デモページ Choreographer-js 「choreographer」は振り付けという意味、CSSアニメーションのさまざまな動き・振る舞いを簡単に設定できます。 デモページ Barba.js 通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加え
Googleも推奨！アニメーションライブラリTweenMaxの使い方 入門編 — un-Tech
ごきげんよう。フーミンです。 「JavaScriptでアニメーション作るならTweenMaxが最強だよ」と先輩から教わり早2年。いまだ現役最強（僕の中で）JavaScriptアニメーションライブラリTweenMaxの良さを広めるために、入門編・応用編の全2回に分けてご紹介しようと思います。 TweenMaxとは TweenMaxとは、GreenSock社が開発した超高性能アニメーションプラットフォーム「GSAP」のひとつで、DOMアニメーションに特化したJavaScriptライブラリです。 requestAnimationFrameを使用しているため、jQueryのanimateメソッドを使うより、動作が高速かつ安定しています。 同じようなライブラリにmokichiくんが紹介してくれたVelocity.jsというのもあります。 TweenMaxと同様に動作が高速かつ安定しており、jQuer
CSSアニメーションの終了イベントを取得してくれるJavaScript「Detecting CSS Animation and Transition End with JavaScript」｜BLACKFLAG
jQueryなどでアニメーションを実装した際には アニメーション終了時に処理を実行させるのは比較的簡単なのですが CSSアニメーション制御の場合は少々面倒だったりします。 そんなCSSアニメーションの終了イベントを取得してくれるJavaScript 「Detecting CSS Animation and Transition End with JavaScript」が とても便利そうだったのでご紹介。 Detecting CSS Animation and Transition End with JavaScript – Osvaldas Valutis Detecting CSS Animation and Transition End with JavaScript – Osvaldas Valutis デモページはこちら スクリプトはjQueryで使用するパターンと jQueryに
[JS]ユーザーが快適に操作できることにこだわった、タッチデバイスにも対応のスライダーを実装するスクリプト -Flickity
デモページ: ナビゲーション Flickityの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 ※jQueryのプラグインとして利用する時は、jquery.jsを加えます。 <head> ... <link rel="stylesheet" href="/path/to/flickity.css" media="screen"> <script src="/path/to/flickity.pkgd.min.js"></script> </head> Step 2: HTML 各スライドをdiv要素などで実装し、ラッパーで内包します。 <div id="main-gallery"> <div class="gallery-cell">...</div> <div class="gallery-cell">...</div> <div cl
![[JS]ユーザーが快適に操作できることにこだわった、タッチデバイスにも対応のスライダーを実装するスクリプト -Flickity](https://cdn-ak-scissors.b.st-hatena.com/image/square/bf5475b2160c621bb7e866a6e614ec3326ad2769/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015012901.png)
laroux.js - Demos
This project is a jQuery substitute for modern browsers and mobile devices. But instead of offering some wrappers and own dynamics, it simply provides helper functions to achieve the same objectives as jQuery or Zepto. laroux.js is right for you if you: Complain about people who do not know the difference between jQuery and Javascript. Love working with more compact, organized libraries in smalle
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://raphamorim.com/waterfall.js/
GitHub - allmarkedup/purl: [NO LONGER MAINTAINED] A JS utility for for parsing URLs and extracting information out of them.![GitHub - allmarkedup/purl: [NO LONGER MAINTAINED] A JS utility for for parsing URLs and extracting information out of them.](https://cdn-ak-scissors.b.st-hatena.com/image/square/18ac13cdf02166587fbce6cb8a9270afd2b6f945/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2F0585171d268549b73fecf0147b7b814b6b3c3d4d178b000afcd1980b7feb2491%2Fallmarkedup%2Fpurl)
Hammer.JS - Hammer.js