Fran Verona
In 2012, I built my own software for creating and displaying augmented reality content within the browser. Unfortunately, after 2 years it didn’t work out. Then I was freelancing for almost 8 years 👨💻, helping startups building their products in UK, USA, Netherlands and Spain. From webpages connected to third-party services, to digital products used daily by hundreds of users which invoice more
jQRangeSlider: jQuery plugin for range sliders
A powerful slider for selecting value ranges, supporting dates and more. Select dates jQRangeSlider supports both numerical values and date and time. Selecting a time frame has never been so easy. Learn how Touch devices jQRangeSlider supports touch devices: tested with iOS and Android. User can select a range simply by touching and swiping on his tablet or phone. Try demo Steps jQRangeSlider supp
onScreen - 使い道が多そう。表示されたら発動するイベント処理 MOONGIFT
スクロールを使った面白い処理です。 Webサイトにおいてある部分までスクロールしたら処理を実行したいといったニーズは良くあると思います。例えばMOONGIFTの場合はソーシャルボタンを表示するのはその部分までスクロールしてからにしています（描画が遅いので）。 他にも対象の画像を表示されたタイミングで読み込みたいといった場合もあるでしょう。そこで使ってみたいのがonScreenです。 デモを表示しました。このタイミングではイベントは発動していません。 Demosを表示。この時点でイベントが発動します。 使い方はjQueryプラグインなのでシンプルです。 $('elements').onScreen({ container: window, direction: 'vertical', doIn: function() { // 表示されたタイミングの処理 }, doOut: function
Amebaっピグっぽい物が作れるjQueryプラグイン「pp3Diso」:phpspot開発日誌
Plugin pp3Diso : moteur de jeu web pour l'affichage et la gestion d'une map 3D isomtrique Amebaっピグっぽい物が作れるjQueryプラグイン「pp3Diso」。 マップ上を人が移動するような感じのゲーム風インタフェースが作れるライブラリっぽいです。 フランス語っぽいので翻訳したりコードを読んだりして使う必要がありますが、なかなかおもしろいのでご紹介。 JavaScriptベースということで、スマホで動くAmebaピグを作ってやろう、という方は参考にできるかも。 関連エントリ ２Dゲームが作れそうなアニメーションjQueryプラグイン「Motio」 カスタマイズ可能で動きがよいalertダイアログ実装jQueryプラグイン「alertifyjs」 Instagramの写真をサイトに簡単掲載できるjQ
Unheap - A tidy Repository of jQuery Plugins & JavaScripts
Another great gem from Zurb. What if you wanted to make a user aware of a piece of content long before their mouse directly hovers over its element? Perhaps it was a piece of content that a user would have never otherwise hovered over (thus rendering all that CSS you styled on the :hover of your class forever invisible to your user). What is a designer/developer to do? Reactive Listener allows us
Design Articles, Inspiration & Resources
Inspiration / 16 Oct 2023 20+ Best Envelope Templates for InDesign, Word + More When it comes to designing stationery for a brand identity, the envelope design takes an important role. Even today, most businesses conduct business communications via traditional mail and having a branded envelope design is key to completing a brand identity. In this collection, we showcase some of the best envelope
【jQuery】jQueryでパラパラアニメを実現するプラグイン | バシャログ。
ノストラダムスのことも思い出してあげてください。minamiです。 jQueryを使ってちょっとしたアニメーションを作ることも多いかと思いますが、jQuery.animateのようにCSSのプロパティをいじってアニメーションするのに加えてちょっとだけgifアニメのようなことができたらな～ということでjQueryのプラグインを作ってみました。 まずはサンプルをごらんください。 サンプル アニメーションの出来はともかくとして、動いています。STOPボタンを押すと途中で止めることもできます。 しくみ 用意するもの アニメーション用png（スプライト） jQuery※サンプルではv1.8.2 jquery.backgroundpos.min.js jquery.limitAnime.js まずアニメーション用の画像ですが、下記のようにコマを均等な幅で作った一枚の画像を用意します。これを要素の背景画
jQuery 1.9 日本語リファレンス | js STUDIO
このサイトについて jQueryの日本語リファレンスです。 jQueryの本家サイト(英文) の内容を翻訳して作成していますが、誤訳や誤記があると思いますのでその点についてはご了承ください。 もし、誤訳などの間違いを見つけましたら、 @tomof まで教えていただければ幸いです。 News 2013.03.13 ver1.9の内容に更新しました。 2012.12.02 jQueryの似ているAPIまとめ 2012.10.13 サイトをオープンしました。 API APIのカテゴリー分けについては、本家サイトでは1つのAPIが複数のカテゴリーに所属していますが、 このリファレンスでは分かりやすさを重視して1つのカテゴリーに絞っています。 また、一部本家サイトのカテゴリーを削り、別のカテゴリーに所属させているAPIがありますので、 予めご了承ください。 Ajax Ajaxに関する処理 Attri
[JS]ちょっとかっこいい円グラフをウェブページに簡単に設置できるスクリプト -EASY PIE CHART
シンプルなHTMLで、さまざまなデザインの円グラフが簡単に作成できるjQueryのプラグインを紹介します。 EASY PIE CHART [ad#ad-2] EASY PIE CHARTの使い方 実装は、3ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 外部ファイルはhead内に記述してください。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="/path/to/jquery.easy-pie-chart.js"></script> <link rel="styl
jQueryで画像をドラッグ＆ドロップするUIを実装する実験｜BLACKFLAG
以前にもjQueryを使ってドラッグでコンテンツ要素をスクロールさせるUIを紹介しましたが、ストレージサービスなどでたまに見かける、画像を特定のエリアにドラッグ＆ドロップさせるUIの実験的サンプルを作ってみたのでここでも紹介してみます。 まずは動作のサンプルから。 下のサンプル画面上の画像はエリア下にある灰色のエリアにドロップすることができます。 ドラッグした画像は元のリストエリアにドラッグし直すことで元の位置に戻ります。 ドラッグエリア下にある「すべて選択」をクリックするとすべてドロップされた状態になり、「選択クリア」をクリックするとドラッグされた画像はすべてもとの位置に戻ります。 この動作の全体構成について、まずはHTMLから。 ◆HTML <div id="dragitemlist"> <ul class="draglist"> <li><span class="dragparts"
レスポンシブなカルーセル実装jQueryプラグイン「Slastislide」:phpspot開発日誌
Elastislide - A Responsive jQuery Carousel Plugin | Codrops レスポンシブでカッコいいカルーセル実装jQueryプラグイン「Slastislide」 動きがいい感じな上に、ブラウザを縮小すると全体的に縮小されて使いやすそうです jQueryプラグインの形なので使うのも簡単です 通常モード スマホ等モード。ちょっとちっちゃいかも（＾＾；） 関連エントリ 高機能なカルーセルを実装するjQueryプラグイン５０まとめ ホイールも効いて超いい感じのカルーセル実装jQueryチュートリアル スマフォでも使える３Dカルーセル実装jQueryプラグイン「Cloud Carousel Touch」
Basics of using the tooltip
Tooltips demo 1 / 7 : Basics of using the tooltip Here we have four IMG tags and their title attribute work as the tooltip. This kind of simple syntax will also show browser's standard tooltips even thought JavaScript is not enabled. This whole setup can be enabled with one JavaScript one-liner. HTML coding You need two things: the elements that show the tooltips when the cursor is placed on top o
ページの右上等に分かりやすく通知を表示できたりする「jsMessage」:phpspot開発日誌
Message library ページの右上等に分かりやすく通知を表示できたりする「jsMessage」 ページの右上にアニメーションしながら流れるように通知を流すようなことが出来ます。 通知だけではなくてダイアログのような物を実装することも出来ます。 スキンにも対応しておりルックアンドフィールを変えることも容易 関連エントリ Twitter風にエラーや通知をページ上部に表示させるjQueryプラグイン 通知件数表示付きのメニュー実装jQueryプラグイン「Notification Menu」 HTML5のデスクトップ通知を簡単に扱えるjqueryプラグイン「desktopify」。 Android風の簡単な通知を実現する「jQueryToast」
CSSは分かるけどjQueryは苦手……という人が .attr()と .prop()に親しんでくれるといいなーと思って書きました。 | Ginpen.com
もちろん、そうでない方にも親しんで頂きたいと思います。 最近この記事が話題のようです。 CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました この記事中にjQuery 1.6/1.6.1での .attr()仕様変更がらみの話で、うちの「jQuery1.6のattr()で困ったら、1.6.1にすればいいみたい。」の記事へリンクされていました。 ただこの記事はちょっと中身が細かくて、ぱぱっと理解するのは難しいんじゃないかなあと思って、この記事を書いています。どこまでご理解頂けるかはわかりませんが、あっちの記事よりは読みやすいはず。 今さら感もないではないですが……。(´ω｀) jQuery 1.6/1.6.1で何があったの？ .attr()にまとめていた処理を .attr()と .prop()に分割した そしたら今まで動いていたも
横に飛び出すメガメニューを実装するjQueryプラグイン・JQUERY VERTICAL MEGA MENU - かちびと.net
最近かなり見かけるようになった印象の、 大量のコンテンツを格納するメガメニュー の横に飛び出すタイプ。jQueryで実装して います。メガメニューはECサイトやポータル サイトなどなど、階層の深いWebサイトにて ユーザビリティ向上に貢献してくれます。 何度もクリックしないと目的の場所に到達できない、という設計はユーザーに取って不便ですし、離脱率も上げてしまいがちですので、大量のコンテンツを保有するWebサイトではこういったメガメニューの導入を検討するのも良いかも知れません。 メガメニューはドロップダウン形式が多いのですが、今日ご紹介するスクリプトはサイドメニュータイプです。 見た目はよくあるサイドナビゲーションメニューですが、マウスを乗せると横に関連ページなどが整理された状態で飛び出しますので視覚的にもコンテンツを探しやすそうです。 画像を含めてあげるのもなかなか効果高そうですな。 コー
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」:phpspot開発日誌
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 2011年07月19日- jQuery EasyUI - help you build your web page easily これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 Ext.jsばりに美しくてリッチなUIをjQueryでも実現できちゃいます。さらに、使い勝手がjQueryなので誰でも簡単に実装できちゃいます。Extはなんとなく取っ付きにくいと感じたかたも簡単に使えそう。 サイト上のチュートリアルやドキュメントも充実していて分かりやすいです。 リッチなものが作れるのはいいけど使い方が難しかったりメンテナンス大変だと、使う気が少し失せてしまいそうですがこれなら大丈夫かもしれません。 テーマやマルチリンガルにも対応しているらし
「ノンプログラマーのためのjQuery入門」のスライドが凄く分かりやすいですね - かちびと.net
Twitterに流れてきたスライドがとっても 分かりやすかったのでブログでより多く の方に拡散。ノンプログラマー向けの jQueryの基本講座。これからjQuery を使おう、という方は読んでおくと良さ そうですね。 ノンプログラマー向けにjQueryの基礎をスライド化してくれています。 @pocotan001さん作のスライドです。 このスライドを見ながらコーディングする、というより、基礎知識を頭に入れるのに適したスライドだと思いますので気軽にご覧になってみて下さい。ハードルがかなり下がると思います。 また、当ブログでもjQueryプラグイン等の情報を取りあえげていますので合わせてどうぞ。 jQueryのリファレンスサイトと入門書籍 [2011.09.21アップデート] よくアクセスいただくのでハブ的な役割くらいは果たそうと思います。 jquery / jQueryの本家です。 jQuer
jRumble | A jQuery Plugin That Rumbles Elements
Latest Version: 1.3 Latest Release Date: December 3, 2011 Original Release Date: March 30, 2011 Compressed: 1.47kb Uncompressed: 4.84kb View GitHub Repository About The Plugin jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It's great to use as a hover effect or a way to direct attention to an element. 2016-11-04 Update This project is no longer being
kinopyo blog - Learning through Writing
I was watching The Last Dance, Michael Jordan’s Netflix documentary, last year when I returned to work from four-month-long paternity leave. It was a great show and brought back all of the joys I had when watching Chicago Bulls in the 90s. And it still got me to think till today, what if my engineering team were a sports team. Give this idea a shot. For an engineer in an IT company, you don’t play
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA