flyLabel.js has movedflyLabel.js has moved You can find it at it's new home or on GitHub.
shine.js
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
parallax.js
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:
LightBoxはここまで進化したよ「VisualLightBox」:phpspot開発日誌
jQuery Image Lightbox: Prime Time DEMO LightBoxはここまで進化したよ「VisualLightBox」 CSS3等を使ってかなりオシャレに進化したLightBoxが実装できます。LightBoxはもう８年ぐらいまえに登場して、今オリジナルをみるとなんか古い感じがするということで時の流れを感じます クリックするとオシャレに拡大。 テーマが大量にあって好みのデザインを選びたい放題 Windowsっぽいスキン。LightBoxが出たのってポップアップを禁止するツールが多く出てきたことが背景にありますが、ページ内ポップアップされていて面白い。 関連エントリ スワイプできるLightBox実装jQueryプラグイン「Swipebox」 今こそ知っておくLightbox風プラグイン20+
HTML5やCSS3を使った次世代表現を学ぶのに役立つコードサンプル
わずか280行程度のJavaScriptで作られ... / JavaScriptで作るいろいろな物理シミュレ... / JavaScriptによる波の物理シミュレーショ...他...全14件
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
[JS]lightboxの進化形、レスポンシブ対応で画像を拡大表示するスクリプト -SuperBox
lightboxよりJavaScriptと画像ロードの依存を少なくした、レスポンシブ対応で画像を拡大表示するjQueryのプラグインを紹介します。 デモページ：幅780pxで表示 SuperBoxの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="css/style.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/superbox.js"></script> Step 2: HTML まずは、基本構造です。 HTML5のdata属性で拡大する画像を指定し、classに「superbox-im
文字数、段落数、単語数を簡単に数えられるJSライブラリ「Countable.js」:phpspot開発日誌
Countable.js?live word-counting in JavaScript 文字数、段落数、単語数を簡単に数えられるJSライブラリ「Countable.js」 文字数を数えるライブラリは沢山ありますが、段落や単語数までカウントしてくれるライブラリははじめてかも。 文字数、段落のカウントは日本語にも対応しています（単語数は非対応） 文書を書いてもらって送ってもらうような場合の入力補助ライブラリとして使えそうです 関連エントリ 美しくアニメーションさせられる線・棒グラフ描画JSライブラリ「xCharts」 jQuery風に簡単にCanvasを扱えるラッパーライブラリ「Canvas Query」 Bootstrapに追加で使えるjQueryベースのUIライブラリ「w2ui」 JavaScriptオフ、CSSをのみで動くツールチップライブラリ「hint.css」 シンプル多機能なW
Intro.js - Step-by-step guide and feature introduction for your website
No dependencies, fast and small 10KB JavaScript and 2.5KB CSS, that's all (minified, gzipped). User-friendly Navigate using keyboard or mouse. Easily change the themes for your website. Browser compatibility Works on Google Chrome, Mozilla Firefox, Opera, Safari and even Internet Explorer. Why using Intro.js? When new users visit your website or product you should demonstrate your product features
Textillate.js
About Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text. Usage Simply include textillate.js and it's dependencies in your project to start creating unqiue effects. Credits Textillate.js is built on top of the simple, yet amazingly powerful animate.css and lettering.js libraries.
クールなalertダイアログを実現できる「Apprise v2」:phpspot開発日誌
Apprise v2. The, new and improved, attractive alert alternative for jQuery ThrivingKings | web development, code snippets, and general nonsense クールなalertダイアログを実現できる「Apprise v2」。 alertダイアログの代替は数あれど、デザインが洗練されているものは数少ないですね。 そんなデザインの洗練された数少ないalertダイアログ実装jQueryプラグインです。 alert以外にも、prompt 等にも対応。 アニメーションや微妙なグラデーションが、なかなかセンスがいいです。 デモのアニメーション速度が若干遅く感じたものの、カスタマイズは可能。 関連エントリ カスタマイズ可能で動きがよいalertダイアログ実装jQueryプラグ
ページ内の要素に重力を与えて落下させられるjQueryプラグイン「jGravity」:phpspot開発日誌
jGravity Demo ページ内の要素に重力を与えて落下させられるjQueryプラグイン「jGravity」。 一見なんの変哲もないページだったとしてもボタンを押すと全ての要素に重力を与えてブラウザの下の方に落下させるというエフェクトがかけられます。 「Initiate jGravity」ボタンで重力を与えます。 次のようにアイテムが落下します。 使いドコロは難しいですが、驚きのエフェクトとして覚えておいてもよさそうです 関連エントリ エフェクトが色々選べるイメージスライダー実装jQueryプラグイン「Adaptor」 ターミナルに文字を打ってるアニメーションエフェクトが作れるjQueryプラグイン「Typist」 jQueryでフリップエフェクトを使った良プラグインやサンプル集１０ 画像ホバー時に２０種類以上の多彩なエフェクトがかけられるjQueryプラグイン「Adipoli」
ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」:phpspot開発日誌
gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風
[JS]iOS向けのページ制作に役立つ便利機能がたくさん詰まったスクリプト -iOS.js
iPhone, iPadなどのiOS向けのページを制作するのに役立つCSSやJavaScriptの便利機能をたくさん備えたスクリプトを紹介します。 iOS.js [ad#ad-2] iOS.jsの特徴 iOS.jsのデモ iOS.jsの特徴 iOS.jsではデスクトップのブラウザ向けページとは異なる点を中心に、より簡単に実装できるよう便利な機能がたくさん用意されています。 改善 min-height ページがスクリーンより小さい時は常にアドレスバーが表示されてしまいますが、スクリーン全部を使って表示します。 ※下記にデモがあります。 リンク ページ内の全てのリンクをWebAppで開きます。 100% height 通常「height=100%」はロードした最初の画面の高さを元にしますが、アドレスバーが隠された後のサイズ変更に対応します。 ※下記にデモがあります。 アドレスバー ページがロー
コンテンツをフルスクリーン表示にする際に便利なJSライブラリ「screenfull.js」:phpspot開発日誌
screenfull.js demo コンテンツをフルスクリーン表示にする際に便利なJSライブラリ「screenfull.js」 FullScreen API のクロスブラウザで動作するラッパーライブラリです。 例えば、ページ内に画像や動画があったとしてクリックするとフルスクリーンで楽しめる、的な使い方ができます。 screenfull.request( $('#container')[0] ); のように、screenfull.requrest( element ) でフルスクリーンが開始されます。 フルスクリーン化 フルスクリーンした後のイベントハンドラなんかも設定できるみたい。 関連エントリ フルスクリーン背景がスライドショーになるCSS3サンプル フルスクリーンでぼかしがカッコいいHTML5ギャラリーを作るサンプル １見の価値あり！なフルスクリーンWEBサイトのまとめ
crossSelect jQuery plugin demo
jQuery crossSelect plugin demo Creating more intutitve multiple select form elements Default behaviour - horizontally clipped, vertical scrolling to fit all rows - but with width set artificially narrow at 100px Set to expand horizontally to fit items full width in, and font set to 20px. Note that height shrinks to just 6 rows as fewer than the default 8 are there About the crossSelect plugin This
画像選択時にサムネイルが出て分かりやすい進捗付きjQueryファイルアップローダー「jQuery File Upload Demo」:phpspot開発日誌
画像選択時にサムネイルが出て分かりやすい進捗付きjQueryファイルアップローダー「jQuery File Upload Demo」 2012年03月19日- jQuery File Upload Demo 画像選択時にサムネイルが出て分かりやすい進捗付きjQueryファイルアップローダー「jQuery File Upload Demo」 Twitter Bootstrap を使ったアップロードのデモなんですが、ファイルを選択するとサムネイルが直ぐに出てくれてます。（複数選択が可能） そして、選択後、すぐアップロードは開始されず、Startボタンを押すと開始されます。 なんか選択したらすぐアップされたなんていうケースがありますのでこれは安心です。 更に、個別にキャンセルが可能なので、アップしようと思った画像と違う物を間違ってアップする事をサムネイルで未然に防げます。 アップした後も、Del
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://retinajs.com/
Demos of open web technologies | MDN
