一休.comホテルページのスマホ版からjQuery依存を取り除くためにやったこと - 一休.com Developers Blog
一休.comでWebフロントエンドを開発している宇都宮です。 先日、一休.comホテルページのスマホ版から、jQueryを取り除きました。jQueryを取り除いた経緯、やったこと、結果について書きます。 ちなみに、ホテルページには以下のURLでアクセスできます（スマホで開くか、PCの場合はUAをスマホに偽装する必要があります） https://www.ikyu.com/sd/00001290/ なぜjQueryを取り除いたのか？ どうやったのか 何をやったのか jQuery.ajax() => fetch に置き換え fetchのpolyfillを採用した理由 DOM操作を標準APIに置き換え 要素の取得 show/hide addClass/removeClass html/text アニメーション $.ready() イベントフィルタリング jQueryの使用を防ぐ目印 jQuery削
Redirecting…
Redirecting… Click here if you are not redirected.
How To (Safely) Use A jQuery Plugin With Vue.js
It's not a great idea to use jQuery and Vue.js in the same UI. Don't do it if you can avoid it. But you're probably reading this not because you want to use jQuery and Vue together, but because you have to. Perhaps a client is insisting on using a particular jQuery plugin that you won't have time to rewrite for Vue. If you're careful about how you do it, you can use jQuery and Vue together safely.
Replacing jQuery With Vue.js: No Build Step Necessary — Smashing Magazine
Did you know that you can incorporate Vue into your project the same way that you would incorporate jQuery — with no build step necessary? Let’s cover some common use cases in jQuery and how we can switch them over to Vue, and why we’d even want to do so. In this article Sarah Drasner shows you that Vue is also a pretty nice abstraction for small sites that don’t need a lot of overhead. Due to Vue
Cropper
As of v4.0.0, the core code of Cropper is replaced with Cropper.js. I recommend you to use the jquery-cropper instead of Cropper. ×
jQuery Bar Rating - Minimal, light-weight jQuery ratings
Get the plugin from GitHub or install with Bower or NPM: bower install jquery-bar-rating npm install jquery-bar-rating Create a select field: <select id="example"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> If you would like to use one of the provided themes include the theme in the head
paroller.js
paroller.js paroller.js is a lightweight jQuery plugin that enables parallax scrolling effect on selected elements. You can use it on elements with background property or on any other element. While scrolling elements can move: vertical, horizontal. Manipulated through html data-* attributes or jQuery options. Mobile ready. Easy to use. GitHub Download | Previous versions Before closing </body> el
sliphover
SlipHover SlipHover apply direction aware hover animation for the caption of an image. Download download zip from GitHub Quick start include the files <script src="path/to/jquery.min.js"></script> <script src="path/to/jquery.sliphover.min.js"></script> call the the plugin on a container as your wish $("#container").sliphover(); All done! Options you can custom the caption by passing options when c
Gridtab jQuery plugin
Features GridTab is a lightweight jQuery plugin to create grid based responsive tabs. Responsive Lightweight and based on CSS3 flexbox Set Grid for each breakpoint Switch between Grid and Tab layout Next, previous and close controls Scroll to current tab Custom selectors Right-To-Left Support Use Case Girdtab could be a perfect solution for the following UI design pattern. Package Managers # Bower
Tilt.js - Parallax tilt effect for jQuery
The most basic usage: Add <script src="tilt.jquery.js"></script> right before the closing </body> tag Mark your elements with <span data-tilt></span> Creating a parallax effect Add transform-style: preserve-3d to your tilt element. Add a transform: translateZ(20px) to your inner elements that have to pop out. Glare effect: Setting this option will enable a glare effect. You can tweak the glare val
jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
jquery.diamonds.js demo
<link href="diamonds.css" /> <script src="jquery.diamonds.js"></script> <script> $("#flickrItems").diamonds({ size : , gap : , hideIncompleteRow : , // default: false autoRedraw : , // default: true itemSelector : ".item" }); // Check out your browser's console for methods and events that are called. // If autoRedraw is true, try resizing your browser window. </script> Photos from Flickr via. publ
Background Blur - plugin by @msurguy
$tintedHolderEl.backgroundBlur({ imageURL : 'url-of-the-image', blurAmount : 10, imageClass : 'tinted-bg-blur', overlayClass : 'tinted-bg-overlay', duration: 1000, endOpacity : 1 }); .tinted-bg-blur { z-index: -2; opacity: 0; position: absolute; min-height: 100%; height: auto; display: block; top: 0; max-height: none; /* Add this CSS to remove transparent border around the image */ left: -10%; wid
KUTE.js | JavaScript Animation Engine
The magic behind Spicr, the result of hard work, the bridge between old and new, the dream and inspiration. Forward Looking The modern JavaScript powering the core functionality, the modular architecture, the solid and complete components are all geared towards the future of web development. Knowing the Past While KUTE.js was re-developed to support mainly modern browsers, it also leaves the door
Simple AJAX using HTML attributes
intercooler.js AJAX With Attributes: There is no need to be complex Announcement: htmx 1.x (intercooler 2.0) is now available at https://htmx.org and is recommended for all new projects. intercooler.js will continue to be supported indefinitely. <!-- This anchor tag posts to '/click' when it is clicked --> <a ic-post-to="/click"> Click Me! </a>
Slick-lightbox by mreq
slick-lightbox A lightbox wrapper for Ken's amazing slick carousel. Credits go to kenwheeler for doing the hard work. Setup Bower bower install -S slick-lightbox Ruby on Rails Use the slick-lightbox-rails gem. Add to Gemfile. gem 'slick-lightbox-rails', '>= 0.0.1' Run bundler. bundle install Usage Make sure you include CSS for both slick and slick-lightbox. Example HTML: <!DOCTYPE html> <html> <he
Web Design, Interface Design, User Experience | Simple Focus
What does FlowType.JS do? Ideally, the most legible typography contains between 45 and 75 characters per line. This is difficult to accomplish for all screen widths with only CSS media-queries. FlowType.JS eases this difficulty by changing the font-size and subsequently the line-height based on a specific element's width. This allows for a perfect character count per line at any screen width. Addi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sparallax
GitHub - humaan/Modaal: An accessible dialog window library for all humans.
vnjs.net