flyLabel.js has moved You can find it at it's new home or on GitHub.
Mobile webapps made easy. Download Get Started App.js is a lightweight JavaScript UI library for creating mobile webapps that behave like native apps, sacrificing neither performance nor polish.
映画「マトリックス」の非常に有名な上から漢字やらカタカナやら平仮名やらが滝のようにぞろぞろ流れ落ちてくるあの超有名なシーンを1KB以下のコードで完全再現したものが「Matrix Canvas Code」です。 Matrix Canvas Code | CSSDeck http://cssdeck.com/labs/the-matrix 元となっているのはシーンは以下のような感じでマトリックス3部作の最初のイントロで上から滝のように流れ落ちてくるのが印象的なものとなっており、実際には縦書きの裏返った半角カナや注音符号なども出てきます。このような妙な文字が混じっている理由は、「日本のPCでは縦書きでプログラミングしている」と監督が誰かから吹き込まれたため。 Intro Matrix Reloaded - YouTube matrix intro - YouTube [HD] The Matri
var shine = new Shine(document.getElementById('my-shine-object')); window.addEventListener('mousemove', function(event) { shine.light.position.x = event.clientX; shine.light.position.y = event.clientY; shine.draw(); }, false); FeaturesDynamic light positionsCustomizable shadowsNo library dependencies, AMD compatibleUses text or box shadows based on contentWorks in browsers that support textShadow
今日はライトなネタを(*´∇`*) スマートフォンでWebサイトを見た際に、指でスクロールすると、 画面外までびよーんとスクロールできます。iPhoneとか。 でも時には、その動作をして欲しくない事も。指で絵書くサイトとか。 そのびよーん動作を防ぐ方法をブログに残したいと思います。 びよーん動作を防ぐスクリプト ひっぱって戻る動作を防ぐ為に、横スクロールの禁止と縦スクロールの禁止に分けて対応します。 横スクロールを禁止する 横スクロールを禁止する為には、metaタグでviewportの設定を行うとできるようです。 <meta name="viewport" content="width=500px ,initial-scale=0.64 ,user-scalable=no"/> 横幅指定と、初期表示倍率指定と、ユーザーによる倍率変更の禁止です。 縦スクロールを禁止する びよーん動作を防ぐた
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// CountUp.js is a dependency-free, lightweight JavaScript class that can be used to quickly create animations that display numerical data in a more interesting w
I’m currently working on a project for Intel’s HTML5 Hub in which I require some image lazy-loading for an HTML5 showcase piece that’s high in image content. After a quick Google search for an existing lazy-load solution there was yet another mass of outdated scripts or jQuery plugins that were too time consuming to search through or modify for the project - so I ended up writing my own. Echo.js i
WebRTCは、ブラウザや専用アプリ同士でリアルタイムに映像、音声、データを送受信できる画期的な新技術です。SkyWayを使えば、サーバを準備することなく簡単に、WebRTCを使ったアプリが開発できます。
<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
「skrollr」は、パララックス(視差効果)を簡単に実装できるプラグインです。 サンプルの動画を見ていただければわかりますが、非常に多彩なエフェクトが用意されており、基本的なパララックスサイトであれば、サクッと作れます。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、skrollrを配布ページからダウンロードしましょう。skrollrはGitHubで公開されており、ページ右下の「Download ZIP」というボタンからダウンロードします。 jQuery本体と「dist」フォルダに入っている「skrollr.min.js」を、利用するWebページのbodyの閉じタグ直前で読み込みます。 //(中略) <script src="jquery.min.js"></script> <script src="skrollr.min.js"></sc
What is Pace? Include pace.js and a CSS theme of your choice, and you get a beautiful progress indicator for your page load and ajax navigation. No need to hook into any of your code, progress is detected automatically. Download If you’re a developer, download Pace directly here: Pace.js Themes Enter a color:
Why SVG (and Snap)? SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM. Modern features for modern browsers Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking
JavaScript製顔認識ライブラリを紹介します。 試してみたところ想像以上に精度が高かったので驚きました。横顔や傾けた顔の認識は難しようですが、正面の精度がすごい。 auduno/clmtrackr デモは画像の顔認識トラッキング(Tracking in image)ビデオの顔認識トラッキング(Tracking in video)認識顔に別の顔を乗せてマスキング(Face masking)認識した顔のデフォルメ(Face deformation)の4つがあります。 デフォルメとマスキングが特に面白いのでお試しあれ。 ちなみにおっぱいを顔として認識してもらおうとしたら怒られました。
2013年05月08日18:21 JavaScript 実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 さて、先日簡単なチュートリアル作ろうと思ったんですが、どうやるのが良いのかなーと思って悩んでました。キャプチャ取ってそこに説明文を書いて…ってしてもいいんですけど、キャプチャだと一部分なのでサイト上のどの辺なのかわかりにくかったり、サイト側は変更したのにキャプチャが古いままとかになったりしちゃいますよね>< とか思って探してみたらこちらの Intro.js が便利だったので紹介してみます。 さて、この Intro.js を使うとですね、サイト上で動作するチュートリアルを簡単に作れるんですよ。使い方も簡単で、動作させたい要素に対して data-intro (表示する説明文) と data-step (チュートリアルの何番目に表示するか) を指定します。チ
JavaScript MVCフレームワークの1つとして知られる「Ember」が、長く続いたβ版の期間を終えて正式版の「Ember 1.0」として公開されました。 EmberはBackbone.jsやAngularJSなどとともにJavaScript用のMVCフレームワークとして知られています。特徴は、テンプレートエンジンのHandlebarsを利用して、データを変更すると動的にビューの部分、つまりWebページ上の表示が自動的に変更される「UIバインディング」など、機能が豊富な点です。 これにより、データを受け取ってそれに合わせてUI表示を書き換えるといった処理をフレームワークに任せることができ、コーディング量が減り、効率的な開発が行えるようになっています。 現在W3Cで策定中のWeb Componentsに似たコンポーネント機能も備えており、独自タグに対して動作と外見を定義し、Webアプリ
WOW, that's deep man! parallax.js reacts to the orientation of your smart device, offsetting layers depending on their depth within a scene... Oh, you don't have a smart device? No worries, if no gyroscope or motion detection hardware is available, parallax.js uses the position of your cursor instead. Radical. This project is a collaboration between Matthew Wagerfield & Claudio Guglieri.
HTML Include Script Files <script type='text/javascript' src='jquery.popeasy.js'></script> <script type='text/javascript' src='site.js'></script> Place in body <a class="popeasy" href="#">Click Me <div class="overlay"></div> <div class="modal"> <a href="#" class="closeBtn">Close Me</a> <!-- content here --> </div> CSS .overlay{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index:
TIP Prior to v0.7.0-alpha.1 Two.js requires Underscore.js and Backbone.js Events. If you're already loading these files elsewhere then you can build the project yourself and get the file size even smaller. For more information on custom builds check out the source on github. # Overview Overview # Focus on Vector Shapes Two.js is deeply inspired by flat motion graphics (opens new window). As a resu
表示されているページを左右にドラッグ(フリック)して、アニメーションで左右にコンテンツをスライド表示するデスクトップにもスマフォにも対応したスクリプトを紹介します。 jQueryなどの他のライブラリには依存しません。 Snap.js -GitHub Snap.jsの特徴 Snap.jsのデモ Snap.jsの使い方 Snap.jsの特徴 jQueryなどの他のライブラリへの依存は無し CSS3を使った強力なアニメーション スライドは右・左に対応 ドラッグ操作のサポート ドラッグ操作禁止要素も定義可能 スマフォのフリック操作のサポート フックイベントのサポート イベントの有効・無効の設定 カスタマイズが簡単 対応ブラウザ IE10を含む全てのモダンブラウザに対応しています。 IE7/8/9はCSS3での一部の機能が制限されます。 Firefox 10+ Chrome, SafariなどのWe
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く