スワイプでBefore/Afterを表現するスライダー「Beer Slider」
WEB上では限定的な使い方にはなってしまいますが、フィルターのON/OFF・背景のモノクロとカラー、化粧の有り無しなど、全く同じもので異なる状況を比べるというときに便利なのが、今回紹介するスワイプでBefore/Afterを表現するスライダー「Beer Slider」です。 上記のように左右で写真が表示されて、スワイプまたはスライドで写真の表示領域を切り替えることが可能です。 詳しくは以下 ソースは比較的シンプルで、普段からWEB制作をしたことがある方であれば、問題なく実装できるレベルだと思います。実際のデモやコードのサンプルは「Beer Slider Responsive & Accessible Before-After Slider – Demo – PEPSized」からご覧いただけます。 ソース自体は「GitHub – pehaa/beerslider: A vanilla JS
これを使うとスクロールに連動したアニメーションが簡単に！わずか2KBの超軽量JavaScriptライブラリ -Sal.js
スクロールに連動して、ページ上の要素をアニメーションで表示するライブラリはいくつかあります。その中でもかなりの超軽量で、他スクリプトへの依存が一切ないスクロールアニメーションのライブラリを紹介します。 しかも実装は超簡単。手間がかかりそうと思っていた人は、ぜひお試しを。 Sal.js Sal.js -GitHub Sal.jsの特徴 Sal.jsのデモ Sal.jsの使い方 Sal.jsの特徴 vanilla JavaScript vanilla JavaScriptで書かれており、他のスクリプトへの依存はありません。 超軽量 2.26KBの超軽量スクリプト。 パフォーマンス パフォーマンスにフォーカスして設計。 実装が簡単 外部ファイルを加えて、HTMLにdata属性を加えるだけの簡単実装。 ライセンス MITライセンスで、個人でも商用でも利用できます。 Sal.jsのデモ デモでは、S
[JS]レスポンシブ対応のカラーピッカーを簡単に実装できる超軽量のスクリプト -Pickr
Webページやアプリに外部スクリプトと数行のコードだけで、使いやすいカラーピッカーを簡単に実装できる超軽量のスクリプトを紹介します。 レスポンシブに完全対応しており、デスクトップのマウス操作でもスマホのタッチ操作にも対応しています。 他のスクリプトやスタイルシートに依存はなく、React、Vue、Angular、jQueryなどと一緒に利用することもできます。また、Bootstrap、MaterializeなどのCSSフレームワークへの互換性もあり、幅広く利用できます。 カラーピッカーの使い方は、簡単 HEX, RGBa, CMYK, HSLa, HSVaをサポート jQueryなどの他スクリプトへの依存は無し Bootstrap, MaterializeなどのCSSフレームワークへの互換性 複数の色表現 色の比較 不透明度のコントロール タッチデバイスをサポート Nodejsのサポート
![[JS]レスポンシブ対応のカラーピッカーを簡単に実装できる超軽量のスクリプト -Pickr](https://cdn-ak-scissors.b.st-hatena.com/image/square/12b3cee3e07a63a7a087487c66c0ccc4563e8ea0/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018072702.png)
scrollnav.js
A small, dependency free JavaScript plugin for auto generating and tracking single page navigation (aka a Table of Contents) Get started View the demos Features Simple setup Pass your page’s content to scrollnav and it will generate the navigation and track scrolling automatically. Fully customizable All the styling is up to you, make scrollnav look and behave however works best for your project.
Vanila.jsベースのツールチップ＆ポップオーバー実装「Tippy.js」:phpspot開発日誌
Tippy.js - Vanilla JS Tooltip and Popover Library Vanila.jsベースのツールチップ＆ポップオーバー実装「Tippy.js」 ツールチップなら任せろといわんばかりの豊富な機能多数 関連エントリ CSSだけで動く軽量1KBのツールチップ実装「Microtip」
Anime.js | JavaScript Animation Engine
All-in-one animation engine. A fast and versatile JavaScript library to animate the web.
スクロールのイベントをIntersectionObserverで快適に実装する最新の軽量JavaScriptライブラリ -Scrollama
Intersection Observerを利用したWebページが増えてきました。 IntersectionObserversは、ターゲット要素がブラウザのビューポートと呼ばれるページの表示領域と重なる（または交差する「Intersection」）量を計算するもので、主要なブラウザに実装されています。 どんなことができるかというと、コンテンツのスクロールに応じてサイドバーをぴたっと配置したり、ヘルプや広告を表示したり、まだ表示されていないコンテンツや画像を先読みさせたりできます。これらを実装するには面倒なJavaScriptが必要でしたが、今では非常に簡単に実装できます。 IntersectionObserverを使用して、スクロールに応じたさまざまなイベントを実装する最新の軽量JavaScriptライブラリを紹介します。 Scrollama -GitHub Intersection Ob
スクロールでどんどん要素にアニメーションを加える「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」
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
ここまでやるか。SQLiteをJavaScriptに変換·SQL.js MOONGIFT
SQL.jsはSQLiteをEmscriptenを使ってJavaScript化したソフトウェアです。 SQL.jsはWebブラウザ上で使えるデータベースです。Emscriptenを使ってSQLiteをJavaScriptに変換した面白いソフトウェアです。 デモです。テキストエリアに書かれたSQLを実行できます。 実行した結果です。最終的な結果だけが出力されています。SELECTの結果はJSONデータとして取得されています。 もちろん普通にSQLが使えます。 日本語は出力時は化けてしまいましたがデータ上は問題ないと思われます。 SQL.jsはSQLiteがそのままJavaScriptになってしまったようなソフトウェアです。慣れた使い勝手でSQLを実行したり、データを取得できてしまうのは面白そうです。なお現状Google ChromeやFirefoxにしか最適化されていません。 SQL.jsは
HTML5ゲームに使えるローディング表示機能付きプレロード用JSライブラリ「PxLoader」:phpspot開発日誌
PxLoader | A Simple JavasScript Preloader#sample1 HTML5ゲームに使えるローディング表示機能付きプレロード用JSライブラリ「PxLoader」 時代はHTML5ですよ奥さん、と電車の中でも聞くようになった今日この頃ですが、HTML5ゲーム等で画像を大量に使う場合でもプレロードして読込状態等も取得できる機能を提供してくれるのがこのライブラリです。 画像に加えてサウンドの読込にも対応しています。 ローディング状態を表示するデモがサイト上で見れます メニュー、ゲーム、トータルといった感じで分割も出来ます。読込に時間がかかってもこういう進捗があれば落ち着きますね ブラウザが対応していないっていうのもあってPCだとまだまだFlashですが、スマホで使っちゃえるかもしれませんね 関連エントリ HTML5のcanvasを使ったアニメーションするタグクラ
KUTE.js Core Engine Examples | Javascript Animation Engine
KUTE.js core engine can animate by itself a great deal of CSS properties as well as scroll. You can do it all with native Javascript without libraries like jQuery, but before we head over to the more advanced examples, let's have a quick look at these two basic examples here. Note: the examples are posted on codepen. Basic Native Javascript Example When developing with native Javascript, a very ba
現場で使えるアニメーション系JSライブラリまとめ(2018年版) – TweenMax, CreateJS, WebAnimation, Velocityなど - ICS MEDIA
現場で使えるアニメーション系JSライブラリまとめ GSAP, CreateJS, WebAnimation, Velocityなど ウェブサイトのインタラクションやUIの振る舞いなど、HTMLでモーションを実装する機会は多々あります。HTML要素の簡易的なアニメーションであればCSS Transitionを使ったことのある方も多いでしょう。しかし、WebGLやCanvas、SVGなどJavaScriptが実装の中心となる制作作業では、CSS Transitionでは対応しきれず、アニメーションライブラリ（トゥイーンライブラリとも言います）が必要となる場面があります。 JavaScriptのアニメーションライブラリは多種多様なので、どのライブラリを採用するのか悩みどころ。本記事ではHTMLのJavaScriptライブラリについて、使い勝手や書式を紹介します。 今回紹介するメジャーなJSライブ
オシャレなtoastが簡単に実装出来るjsプラグイン「iziToast」
iziToastのインストールはこちらの公式ページからダウンロードする方法の他、パッケージマネージャーを使っての導入にも対応しています。 # npm npm install izitoast --save # bower bower install izitoast <!-- ブラウザ上でライブラリの読み込み --> <link rel="stylesheet" href="/izitoast/dist/css/iziToast.min.css"> <script src="/izitoast/dist/js/iziToast.min.js></script> iziToastの基本的な使い方は、プロパティの ' title ' に toastのタイトル ' message ' に表示させたい本文を割り当てて使います。 ( デフォルトでは5秒で自動的にtoastが非表示にされます * 設
Responsive Nav — Responsive Navigation Plugin
Responsive navigation plugin without library dependencies and with fast touch screen support. Try it out by resizing this window. Download Features Responsive Nav is a tiny JavaScript plugin which weighs only ~1KB minified and Gzip’ed, and helps you to create a toggled navigation for small screens. It uses touch events and CSS3 transitions for the best possible performance. It also contains a “cle
レスポンシブルなオーディオプレイヤーが実装できる「AudioPlayer.js」 - Noise of Web Programming
レスポンシブWebデザインに対応したオーディオプレイヤーを実装できるライブラリをご紹介。 AudioPlayer.js この手のライブラリは既にいくつかあるが、シンプルデザインがかっこよいのとわずか4KBという軽さながら、レスポンシブルな点が秀逸。 100%の幅だとこのサイズ。 画面幅を狭めていくとこのようにプレイヤーも小さくなっていく。 これはスマホでも使えそう。オーディオプレイヤーを使ったサービスを作ろうと考えていたので、このライブラリを検討してみよう。
人気上昇中のJavaScriptライブラリを調べてみた【2016年版】
新しいWeb開発フレームワークも登場！ 2015年中に人気が急上昇してきており、「2016年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表する。 ← 前回 連載 INDEX 2016年が始まり、心機一転で「今年こそはWeb開発を頑張ろう」と思っている人も少なくないだろう。そんな方々に向けて本稿では、2015年中に人気が急上昇してきており、「2016年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表する（※昨年の2015年版はこちら）。 なお、本稿のランキング決定では、検索キーワードの流行を調査可能な「Googleトレンド」（「すべての国」「過去 12 か月間」「コンピュータ、電化製品」「ウェブ検索」という条件で絞り込み）を使って、ライブラリの人気をジャンルごとに比較した（※ライブラリ名が一般的な英単語の場合、Web検索時に、
HTML + CSS + JavaScript で簡単に導入できるdatetimepicker の比較｜TechRacho by BPS株式会社
2014.10.15 HTML + CSS + JavaScript で簡単に導入できるdatetimepicker の比較 最近MBA 買ったんですけど、ずっとドザーだったので全然慣れないshibuso です。トラックパッド使うと指が痛くなって泣ける…。 さて、今回は無料で公開されているdatetimepicker についてまとめたいと思います。datetimepicker と聞いてピンと来ない人は、フォームをクリックするとカレンダーが表示されて、そこで日時を選ぶ機能と思ってもらえば大体合ってます。少し前までプルダウンで年月日を選ぶのが普通だったのに、色々と便利になってきています。 とはいえdatetimepicker はまだあまり選択肢が無いように感じます。私の検索の仕方が悪いのかもしれませんが、日付のみを選択できるdatepicker の方が多いかと。そんな中、今回はdatetime
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
複数選択、検索が可能なselectボックス実装「multi.js」:phpspot開発日誌
Swiper - Most Modern Mobile Touch Slider
