ふわふわの泡の背景を作成できるJS「bubbly-bg.js」
ページのbackgroundにふわふわと泡が漂うような表現ができる「bubbly-bg.js」を紹介します。 公式デモサイト 使用してみたところ、仕様は以下のようです。 ・背景は固定。スクロールのある縦長のページでも、100vw、100vhでfixed。 ・スマートフォン端末でも動作。（とりあえず手元のiPhoneXとiPadで動作確認しました。） ・泡の個数、色、向き、速さ、大きさ、ぼかし具合、アルファ値、背景グラデーションなど細かなカスタマイズが可能 ・背景のグラデーションは0%と100%の2色のみ設定可能。 ・PCでwindow幅を狭めたり伸ばしたりするとちょっと変になる瞬間あり 背景色のあたりはJSの中身を見ると最悪編集できそうな感じはあります。 閲覧の際も、重くなる感覚は無いので、優秀なJSではないでしょうか。
Webアプリ等に手軽にキーバインドを実装できるスクリプト・「whenipress」
whenipressは開発したWebアプリ等に手軽にキーバインドを実装できるスクリプトです。 ※上記サンプルはiframeなので中をクリックしてから動作テストしてください 軽量で非依存、シンプルなコードでキーバインドを実装する事が出来ます。 <script src="https://cdn.jsdelivr.net/npm/whenipress@1.7.2/dist/whenipress.js"></script> <script> whenipress("a", "b", "c").then((e) => alert("aとbとcが同時に押されました！")); </script>基本的にはスクリプトを読み込んでキーに対する動作を記述すればOKです。 詳しい使い方はドキュメントをご参照ください。ライセンスはMITです。 whenipress
Animate.cssを使用してスクロールに応じてコンテンツにアニメーションエフェクトを追加できる軽量スクリプト・「Josh.js」 - かちびと.net
Josh.jsはAnimate.cssを使用してスクロールに応じてコンテンツにアニメーションエフェクトを追加できる軽量スクリプトです 他のJSライブラリを必要としない非依存型で、アニメーションにはAnimate.cssを使用するため2kbと非常に軽量です 使い方も簡単です <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css" /> <script src="https://cdn.jsdelivr.net/npm/joshjs@1.0.0/dist/josh.min.js"></script> Animate.cssとJosh.jsを読み込みます const josh = new Josh({ initClass: "foo", anima
ScrollReveal.jsを使ってスクロールしたらふわっと表示される動きを作ってみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
JavaScript library to animate elements as they scroll into view. スクロールして表示される要素をアニメーション化するJavaScriptライブラリ 要素が画面に表示されたら、指定したアニメーションを実行してくれる優れものです。 「ふわっと表示」「下から表示」「遅れて表示」など簡単に実装することができます。 公式サイト：https://scrollrevealjs.org/ ScrollRevealの使い方 ライブラリ読み込み 使い方は簡単。ライブラリをscriptタグで読み込み、対象の要素にクラスを与えてJavaScriptからアニメーションを指定するだけです。 CDNは公式サイトのインストールから読み込みます。 // 最新バージョンの場合 <script src="https://unpkg.com/scrollreveal
オーディオファイルの扱いが簡単に！JavaScriptライブラリ「Howler.js」 | DevelopersIO
オーディオファイルの取り扱いを簡単にしてくれるJavaScriptライブラリ「Howler.js」を紹介します。 ウェブでオーディオファイルを扱うのは「正気の沙汰ではない（要出典）」と言われており、Web Audio APIやHTML5 Audio（HTMLMediaElement）を見ると、確かにそっ閉じしたくなる感じです。 そんなオーディオファイルの読み込みからブラウザごとの再生できるファイルの判定など、面倒な処理を任せてしまえるオーディオ関連のJavaScriptライブラリHowler.jsを紹介します。 公式サイト（サンプルあり）：howler.js - JavaScript audio library for the modern web リポジトリ：howler.js - GitHub 使い方 npmなら npm i howler -D CDNから読み込むなら <script
lory
Touch enabled minimalistic slider written in vanilla JavaScript Hardware accelerated transitions Usable as a jQuery plugin Options for custom easing effects infinite looping ~ carousel No compromises for fallbacks Written in ecmascript 6 Using webpack, babel & eslint for development Download Here or via cdn from cdnjs Prerequisited Html structure Class names can be changed through options <div cla
Minigrid
Minimal 2kb zero dependency cascading grid layout without pain. Star DemoThere's a simple example on jsbin. UsageIt works on a grid container with a group of grid items. <div class="cards"> <div class="card"></div> <div class="card"></div> <div class="card"></div> </div> Then: var grid = new Minigrid({ container: '.cards', item: '.card', gutter: 6 }); grid.mount(); InstallationGet it from npm. npm
Waypoints
Waypoints is the easiest way to trigger a function when you scroll to an element. var waypoint = new Waypoint({ element: document.getElementById('waypoint'), handler: function(direction) { console.log('Scrolled to waypoint!') } }) Builds are available for multiple DOM libraries. jQuery 1.8+ Zepto 1.1+ No Framework IE 9+ npm install waypoints or bower install waypoints or GitHub Download Get Help
手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー
手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー人間の目は動きを感知すると反射的に目が動き、意識をそちらに向けるそうです。そのため、アニメーションは要素をほんの少し動かすだけで注目を集められるという強い力を持っています。今回はそんなアニメーションを手軽に実装できるCSSやJavaScriptのライブラリーをいくつか紹介します。 アニメーションを使う時に気をつけたい事アニメーションを使えば、前後の画面に繋がりを持たせたり、ユーザーに次の動きを予測させ、安心感を与えることができます。よく使われるものが、ふんわりと画面や要素を移り変えるフェードという効果です。目の前の物が一瞬で消え、パッと新しい物が現れる…なんて、現実世界ではありえませんよね。もちろん、単純に見ていて楽しい、かっこいい、なんていう刺激を与えられます。 しかし、ユーザーの注意をひこうとす
Our Justified Layout Goes Open Source | code.flickr.com
We introduced the justified layout on Flickr.com late in 2011. Our community of photographers loved it for its ability to efficiently display many photos at their native aspect ratio with visually pleasing, consistent whitespace, so we quickly added it to the rest of the website. It’s been through many iterations and optimizations. From back when we were primarily on the PHP stack to our lovely ne
Web上に表示された画像をそのまま編集できるJSライブラリ「DarkroomJS」を使ってみた！ : うえぶはっく
画像編集系のJavaScriptライブラリはいくつか存在しますが、その中でも非常にシンプルで扱いやすく、直感的な操作が人気の「DarkroomJS」をご紹介しようと思います！ 任意の「imgタグ」を指定することで、専用の「画像編集ツールバー」が表示されるので、そのままWeb上で加工をすることが出来るようになります。 必要なファイルを揃えよう！ 「DarkroomJS」は、Canvas APIを効率よく扱える「fabric.js」をベースに開発されていることを踏まえて、事前に必要なファイルは以下の3つになります。 darkroom.css darkroom.js fabric.js これらのファイルは、GitHubからダウンロードして使うか、公式サイトのリンクを利用すると簡単です。 【darkroom.css】 http://mattketmo.github.io/darkroomjs/bu
UIセンスが壊滅的なエンジニアがそれっぽいwebアプリを作るために使った無料UIライブラリをまとめておく - Qiita
仕事の傍ら、暇つぶしとかでwebアプリを構築したりするわけですが、どうにもUIセンスがなさすぎて、カッコイイサイトとかを参考に真似したりしても、なぜか自分でアレンジするととてつもなくダサくなる、ということを繰り返してきました。 で、もうこうなったら自分で考えずに、すべてライブラリに頼ろう！と思ってwebサイトを構築した時に使ったcssやjsのフレームワーク、ライブラリなんかを、簡単なコメント添えてまとめておこうと思います。 css自分で一切書かなくても、このぐらいのUIまではいけそうです。 フレームワーク Bootstrap ベースはtwitter bootstrapの恩恵に授かります。 GoogleMaterialDesignLiteも見た目はかっこいいんですが、色々コンポーネントがたりなかったりして、結局いくらか自分でデザインしないとどうにもならなくなる印象です。 jQuery 今更書
jQueryから離れるためのJavaScript代替ライブラリまとめ
jQueryは便利すぎて、ついつい他のフレームワークを使いながらも一緒に組み合わせて使ってしまったりします。その結果として読み込むサイズが肥大化したり、動作が重たくなったりします。特にスマートフォンのようにリソースがデスクトップほど潤沢でない場合は顕著です。 そこでjQueryから離れて代替ライブラリを使ってみましょう。多くのライブラリはjQueryを踏襲して似たような使い方ができるようになっています。 Minified.js jQueryのようにDOM操作、アニメーション、イベント、HTTPリクエストをサポートしています。また、コレクション、日付や数字のフォーマット、テンプレートといった便利ユーティリティも備えています。 サイズは4KB（ミニファイ&Gzip）で、jQuery 2.1.4の29KBに比べて大幅に軽量です。 Minified.js - A Truly Lightweight
MessageViewJS - Talking Scene JavaScript Library
<!doctype html> <head> <script src="/js/message_view.js" type="text/javascript"></script> <script> document.addEventListener("DOMContentLoaded", function() { var message = new MessageViewer({ "data": [{ "name": "生方 すみれ", "message": "はじめまして！", "img_url": "/img/character_0001.png" }] }); }, false); </script> </head> <div class="messageView" id="default"> <div class="mv-contents"> <p class="mv-name">
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Josh.js - A JavaScript library to animate content on page scroll.
Granim.js
Search javascript libraries
GitHub - uupaa/PageVisibilityEvent.js: PageVisibility event dispatcher
JavaScript製FlashPlayer「swf2js」swfをそのままHTML5に変換。 - Qiita
GitHub - williamngan/roll: roll and scroll tracking -- a tiny javascript library
