コンテンツの邪魔にならず操作も快適な画像拡大、スクロールすると一旦ヘッダが隠れるけど上にスクロールすると出現、サーチアイコンをクリックするとにょい～ん伸びて検索ボックスになるなど、ユーザビリティ・アクセシビリティに配慮され、タッチデバイスやレスポンシブ対応にも一役買う優れもののスクリプトを紹介します。
![[JS]Webサイトの使いやすさ・かっこよさを向上させる、チェックしておきたいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/59d3994c874f27f2dc25c192354e85622e3c3cc2/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015082406.png)
[JS]Webサイトの使いやすさ・かっこよさを向上させる、チェックしておきたいスクリプトのまとめ
コンテンツの邪魔にならず操作も快適な画像拡大、スクロールすると一旦ヘッダが隠れるけど上にスクロールすると出現、サーチアイコンをクリックするとにょい～ん伸びて検索ボックスになるなど、ユーザビリティ・アクセシビリティに配慮され、タッチデバイスやレスポンシブ対応にも一役買う優れもののスクリプトを紹介します。
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
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
Web制作者がチェックしておきたい、気持ちいいインタラクションやUIを実装できるJavaScriptのまとめ
Webサイトやブログに、気持ちいいインタラクションやユーザーインターフェイスを実装できるJavaScriptを紹介します。実用的なものから、あまり見かけない新鮮なものまで、素晴らしいアイデアがいっぱいです！
WebSocket + Node.js + Express — Step by step using Typescript
UpdateCheckout my new Angular WebSocket client article 😙. You could be interested in my article about realtime and schemaless database (Cloud Firestore) and Angular -> Step by step tutorial and “CUD operations, transactions and batch writes deep dive”. This is a quick step by step tutorial about WebSocket, Node/Express and Typescript. The full source code provided in these examples is lovely host
スクロールでどんどん要素にアニメーションを加える「t-scroll」:phpspot開発日誌
GitHub - crazychicken/t-scroll: A modern reveal-on-scroll library with useful options and animations. (Animate Elements On Reveal) スクロールでどんどん要素にアニメーションを加える「t-scroll」 要素が画面内に入った段階で要素をアニメーションする、最近ではよくあるライブラリ。 要素のclassにアニメーションを指定するだけで派手なエフェクトが作れます。 関連エントリ スクロールで上か下かを判断してコールバック「jquery.scrollDetection」 スクロールしても項目が分かりやすいヘッダー固定「jquery.stickyTableHeader」 スムーズなスクロールアニメーション実装に使える「scrollpress」
[JS]要素がビューポートや指定した範囲に表示されたか判定する超軽量スクリプト -Emergence.js
ページをスクロールして、指定した要素がビューポートに表示されたかを判定し、アニメーションなどを適用できる超軽量のスクリプトを紹介します。 ビューポートだけでなく、範囲を指定することもできるので、かなり面白いと思います。 単体で動作し、しかも1KBの超軽量スクリプトです。
![[JS]要素がビューポートや指定した範囲に表示されたか判定する超軽量スクリプト -Emergence.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/3b25e84c6d46911b22341571e98102293e01bedb/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201704%2F2017110801-02.png)
Node.jsのパフォーマンスチューニングのtips - 技術探し
--inspect, --inspect-brk --trace-opt, --trace-deopt --prof --trace-events-enabled --trace-gc node-report Performance Timing API 優しいコードの書き方へ v8::SnapshotCreator さいごに Node9が10/31に出ました🎉🎉🎉 Node v9.0.0 (Current) | Node.js 今回はNode単体の話なので、Express、Nginx等のチューニングに関してはココには書きません。 また、libuv等のコード内部の話もしません。 --inspect, --inspect-brk もともとあった、--debugから移行されました。(v8.0.0 ~) Chromeを使いデバッグ、プロファイリング等を使えるようになります。 ブラウザで使え
Version 5.0.0 of Angular Now Available – Angular Blog
We are pleased to announce version 5.0.0 of Angular, pentagonal-donut. This is a major release containing new features and bugfixes. This release continues our focus on making Angular smaller, faster, and easier to use. Here’s a breakdown of some of the biggest changes in v5. For the full list, please see the changelog. Build OptimizerAs of 5.0.0, production builds created with the CLI will now ap
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
テーブルにフィルタ・並び替え・編集等の機能を加える「jquery-fulltable」:phpspot開発日誌
GitHub - joseluisballesterosdelval/jquery-fulltable: Plugin that enables any table to be filtered, ordered, edited, and more, all in one. テーブルにフィルタ・並び替え・編集等の機能を加える「jquery-fulltable」 プラグインで初期化すると次のようなテーブルに変化します。 関連エントリ テーブルをサクッとレスポンシブ対応にする「resTables」 テーブル行の詳細をクリックで開けるテーブル実装 テーブルをブラウザ上で組み立てられるUI実装「a-table」
hls.js - JavaScript製のHTTP Live Streamingクライアント MOONGIFT
Appleがキーノートなどの配信に使っているのがHTTP Live Streamingと言われるプロトコルです。特別なプロトコルではなく、HTTPを使っているのがメリットですが、サポートしているブラウザがSafariくらいというのが難点です。 そこで使ってみたいのがhls.jsです。JavaScriptで作られたHTTP Live Streamingクライアントです。 hls.jsの使い方 設定も用意されています。エラーが出ても自動で回復してくれます。 Google Chromeでも動きます。10秒前後に動かすといったアクションもJavaScriptからできます。 hls.jsを使えばモダンなブラウザであればHTTP Live Streamingを提供できるようになります。良い動画配信プロトコルが見つかっていなかった方はhls.jsを使ってみてはいかがでしょう。 hls.jsはJavaSc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - fat/zoom.js: Medium's Image Zoom for jQuery
Zircle-ui
Color Thief
DirtyMarkup Formatter - HTML, CSS, & JavaScript Beautifier
Animate Css Jquery
アロー関数式 - JavaScript | MDN
CodePen - Front End Developer Playground & Code Editor in the Browser
Moving Letters
