GitHub - usablica/intro.js: Lightweight, user-friendly onboarding tour libraryYou signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
フローティング・ウィンドウ ライブラリ JSFrame.js の紹介 - Qiita
はじめに フローティングウィンドウを作成・表示するためのjavascriptライブラリ JSFrame.js の紹介です。 過去に自Webサービス用につくったライブラリですが、さいきんいくらか需要があったので紹介します ソースはこちらにてMITで公開してます。 https://github.com/riversun/JSFrame.js JSFrame.jsの特徴 他ライブラリに依存していない独立ライブラリ。jQuery等は不要 複数のウィンドウ表示（マルチウィンドウ）、モーダルウィンドウ、トーストの表示に対応 ポップアップウィンドウ、フローティングウィンドウに期待されること（移動、リサイズ、見た目の変更、アニメーション等）はだいたい対応 こんなことができます こういったフローティングウィンドウをブラウザ上で実現するためのライブラリです https://riversun.github.io
intro.js で手軽にチュートリアル機能を作成する - Qiita
最近、チュートリアル機能が表示されるアプリケーションを見かける頻度が増えてきました。 そこで intro.js でチュートリアル機能を作ってみることにしました。 サンプル <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Intro.js Demo</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.1.0/intro.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.1.0/introjs.min.css" rel="stylesheet" type="text/css"> </head> <body
かっこいいネットワーク図？を描くためのvis.js - かずきのBlog@hatena
グラフとかっていうんですかね？ vis.jsというライブラリを使うと簡単に描けるっぽいです。 vis.js - A dynamic, browser based visualization library. 使い方 ASP.NETアプリケーションにサイトからDL出来るvis.min.jsとvis.min.cssを追加します。 <link href="~/Content/vis.min.css" rel="stylesheet" /> <script src="~/Scripts/vis.min.js"></script> こんな感じで_Layout.cshtmlのheadの中に追加しておきます。 あとは、vis.DataSetというのでデータとデータの関連を用意して、vis.Networkを作るだけです。 @{ ViewBag.Title = "Index"; } <h2>Index</h
Vorlon.jsとは？ ブラウザーでWebデバッグできるお手軽な開発者ツール
Vorlon.jsという開発者ツールを知っているだろうか？ このオープンソースツールを使えば、PCブラウザーで各種Webデバッグが行える。その機能概要と基本的な使い方を解説。 Vorlon.jsとは Vorlon.js（読み方： ヴォーロン・ジェーエス）とは、ChromeのDevToolsやIE／EdgeのF12開発者ツールと同じく、Webブラウザーの表示内容やネットワーク状態をデバッグするためのツールである。 最も特徴的なのが、ブラウザー上で動作することだ。PCブラウザーのデバッグはもちろん、スマホなどのモバイルデバイスのデバッグを、ケーブルをつなげることなく、Macを準備することなく、実現できるのが大きなメリットだろう。 マイクロソフトが開発したオープンソースプロジェクトであり、Node.jsとSocket.IOといったオープンな標準のみを使って開発されていて、プラグインの追加が容易で
Animate.cssとwow.jsを使ってサイトにアニメーションをつける - Qiita
初めに Animate.cssとwow.jsを使って自身のサイト(tiwuofficial.github.io)にアニメーションをつけてみたので、使い方を簡単に書いていきたいと思います。 tiwuofficial.github.io 次回記事 Font-Awesomeを使ってサイトにアイコンを表示させる + Animate.css + wow.js 1.準備 Animate.cssは要素のclassにアニメーションを指定するだけで、簡単にアニメーションを実装することができるスタイルシートです。 公式サイト GitHub 公式サイトではアニメーションの動きの確認ができます。 公式サイトからanimate.cssファイルをダウンロードしてください。 (animate.min.cssでも可)
clipboard.js
Why Copying text to the clipboard shouldn't be hard. It shouldn't require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn't depend on Flash or any bloated framework. That's why clipboard.js exists. Install You can get it on npm. npm install clipboard --save Or if you're not into package management, just download a ZIP file. Setup First, include the script locat
Jets.js
How does it work? The main idea is not to affect attributes of each tag in the list while filtering. Instead apply dynamic CSS rule in only one <style> tag and browser will decide which item of list to show or hide. Since it's just CSS - Jets.js may be applied to any tag, whether it's a table or UL, OL, DIV… Search term may be set using text field, select or even programmatically. In fact, plugin
アニメーションするモダンなモーダルダイアログを汎用的につくれる「cta.js」:phpspot開発日誌
cta.js - Animate your 'action-to-effect' paths! アニメーションするモダンなモーダルダイアログを汎用的につくれる「cta.js」 既存のエレメントを特定のサイズに変形し、ダイアログなり、サイドバーなりに変形させてUIをつくれる面白いライブラリのご紹介です 活用すればモダンで美しいUIをWEB上で表現できそうです タイルをクリックすると全画面に広がるサンプル (2) ボタンを押すとlightbox風ダイアログに変形するサンプル (3) ボタンを押すとサイドバーがアニメーション付きで生成されるサンプル 関連エントリ 数値のみ入力させたい場合のUIを実現できる「numble」 アニメーション切り替えがカッコイイタブUI実装jQueryプラグイン「tabtab.js」 WEB、アプリにフリーで使えるクールなUIキット「EVENTRAY UI KIT」
Riot.js 2.0 を触ってみた — まだReactで消耗しているの? - Qiita
楽すぎてどうしよう。が最初の感触。まだ3時間しか触ってないけど、もうこれでいいや感が半端ない、深夜2時です。 Angularなのか、Reactなのか、2015年が明けても毎週のように新しいJSフレームワークが出る中で、もう正直どうでもよくなってませんか? でも、これは触って楽しいはず。 Riotって何? Riotは、公式ページに A REACT- LIKE, 2.5KB USER INTERFACE LIBRARY とあるように、Reactを意識して作られた超軽量のUIライブラリで、ビュー部分(コンポーネント)に特化しているのが特長です。Vue.jsとかとも同類です。Riot 1.0も「超軽量」という点で、一時注目を集めました。 そのRiotが、2.0で趣向を変えてJSX的なプリコンパイルの仕組みを取り入れて、ReactとPolymerのいいとこ取りのような感じになっています。ただし、次の
小さいライブラリを採用する - mizchi's blog
僕がJavaScriptでライブラリを選定する際、迷ったら小さいものを使う。その理由について。 前提 前提として、枯れた環境で大きいフレームワークができるのは理解できるし、メリットも大きい。あるいは言語それ自身と区別できないぐらいに発達したフレームワークに依存するのも理解できる。RubyにとってのRailsとか、ErlangのOTPとか(いや、これは詳しくないけどそうなんだろうなっていう予想なんだけど)。 危険信号 今のJS界隈は動きが早すぎて、何に依存するのも危ない。とくにフレームワークと銘打たれたものは、でかすぎてどれも危険信号を放っている。 数年後、廃れてしまったフレームワークで開発し続けるのは、僕個人としてもあまり関わりたくないし、現場の離職リスクとして数字に出るだろうし、採用後の教育コストの問題になる。だいたいそういうものは元の設計者もいなくなるものだ。プロダクトの死を意味する。
コナミコマンドをウェブサイトに実装できる「cheet.js」
欧米ではプレイステーション4とXbox Oneが発売され家庭用ゲーム機が世代交代を迎えていますが、家庭用ゲーム機の元祖ともいうべきファミリーコンピューター(ファミコン)で、一世を風靡した隠しコマンド「コナミコマンド」を、ウェブサイトに実装することができるのが「cheet.js」です。 cheet.js - easy easter eggs (konami code, etc) for your site http://namuol.github.io/cheet.js/ コナミコマンドは、コナミのゲームで多く使われた隠しコマンドの一種。コントローラーで「上上下下左右左右BA」とボタン入力するのが基本形ですが、この他にもいろいろな派生コマンドがあり、また、コナミ以外のゲームでも取り入れられるほどに有名な隠しコマンドだったので、とりあえずゲームプレイ時にはコナミコマンドを試してみた人もいるはず
米バークレー大学生チーム、JavascriptベースのEPUB 3ビューワ「epub.js」をGitHub公開
米カリフォルニア大学バークレー校の学生チームが、次世代のアノテーション型電子書籍の研究プロジェクト「FutureBook」を立ち上げ、JavascriptベースのEPUB 3ビューワ「epub.js」をGitHubで公開した。 同チームは、W3CやAmazon、Barnes & Nobleなどが規格化を進めているオープン・アノテーション標準規格「Open Annotation Collaboration（OAC）」の実証実験のため、epub.jsの開発に着手したとのこと。開発は今夏かけてずっと続けられる予定で、うまくいけばOACが目指している電子教科書・電子論文間の注釈データ同士のリンクが体験できる予定。 なお、肝心のepub.jsビューワは下記プロジェクトサイトでデモが体験できる。GitHub上ではまだ旧名称の「fpjs」のままだが、近日中に「epubjs」へと変更される予定。
Polymer library - Polymer Project
The Polymer library is in maintenance mode. For new development, we recommend Lit. The Polymer library provides a set of features for creating custom elements. These features are designed to make it easier and faster to make custom elements that work like standard DOM elements. Similar to standard DOM elements, Polymer elements can be: Instantiated using a constructor or document.createElement. Co
Junior - A front-end framework for building HTML5 mobile apps with a native look and feel.
A front-end framework for building HTML5 mobile apps with a native look and feel. CSS3 Transitions optimized for mobile performance. Swipable carousels using flickable.js. Integration with backbone.js views and routers. Ratchet CSS UI components. Try loading this page on a mobile phone or try our "simulator" to the right. Download Installation Javascript Dependencies modernizr zepto zepto flicka
reveal.js - The HTML Presentation Framework
Hello Therereveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. Vertical SlidesSlides can be nested inside of each other. Use the Space key to navigate through all slides. Basement Level 1Nested slides are useful for adding additional detail underneath a high level horizontal slide. Basement Level 2That's it, time
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JS＆CSS3でWindowsMetroのタイルUIを実装する「TileJS」:phpspot開発日誌
Canvasをめちゃくちゃ使いやすくするライブラリ「UnitaryJS」作った - Qiita
GitHub - semu/timesheet.js: JavaScript library for HTML5 & CSS3 time sheets
Drawingboard.js: a simple canvas based drawing app that you can integrate easily on your website.