fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えるスクリプト。
[JS]最近のウェブサイトで見かける面白い仕掛けを実装するスクリプトのまとめ
fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えるスクリプト。
Scott Robbin
Product designer, software engineer, generalist.Hi, I’m Scott Robbin, a full-stack developer who works with start-ups to build and ship products. I’m also a musican, open government advocate, and traveler. I’ve been working on the web for over 20 years, contributing to open source projects and my own. Feel free to click around and get to know me. SweepAround.UsAn alert system for Chicago street sw
jQuery用の便利なテンプレートエンジンjTemplates | サイブリッジラボブログ
MTSです。 jQueryを使ってWebページの一部を動的に書き換える場合ってありますよね。 こんな感じで。 <script type="text/javascript"> $.ajax({ ～ 中略 ～ success: function(data, status, xhr) { $("#test").append("<div id='hoge'>" + data.num + "</div>"); }; }); </script> 一部分であればこれで十分ですが、書き換える規模が大きくなった場合、JavaScript内でハードコーディングするのは避けたいですよね。 そういう場合、今回紹介するjQuery用のプラグインjTemplatesが便利です。 公式サイト：http://jtemplates.tpython.com/ jsファイル読み込み scriptタグでsrc設定するだけです。
Overlay Effect Menu with jQuery | Codrops
In this tutorial we are going to create a simple menu that will stand out once we hover over it by covering everything except the menu with a dark overlay. The menu will stay white and a submenu area will expand. We will create this effect using jQuery. So, let’s start! Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice
jScrollPane - cross browser styleable scrollbars with jQuery and CSS
jScrollPane - cross browser styleable scrollbars with jQuery and CSS jScrollPane is a cross-browser jQuery plugin by Kelvin Luck which converts a browser's default scrollbars (on elements with a relevant overflow property) into an HTML structure which can be easily skinned with CSS. jScrollPane is designed to be flexible but very easy to use. After you have downloaded and included the relevant fil
jQuery Spotlight
Demo 1 - Positioning This demo shows how elements with different position attributes can still have a spotlight. Code This javascript code for this page is: $(document).ready(function(){ $('a#spotlight1-noanim').click(function(){ $('#box1').spotlight({animate:false}); }); $('a#spotlight1').click(function(){ $('#box1').spotlight(); }); $('a#spotlight2').click(function(){ $('#box2').spotlight(); });
IxEdit
IxEdit - The First On-the-Fly Interaction Design Tool for the Web. IxEdit (Public Beta) フリーダウンロード IxEdit は JavaScript ベースのウェブ用インタラクションデザインツールです。IxEdit を使えば、デザイナーはコーディング無しで DOM スクリプティングを実践し、ウェブページ上の要素をダイナミックに変更したり、追加したり、動かしたり、変形させたりすることができます。特に、IxEdit はウェブアプリケーションのプロトタイピング段階において様々なインタラクションを即座に作って試してみるのに役立つでしょう。 インタラクションとは？ インタラクションとは、ユーザーのアクションに応じてスクリーンの状態が変化することです。つまり、ユーザーインターフェースの振る舞いと言ってもよいでしょう。
jQuery | Scrolling Sidebar from CSS-Tricks
Scroll down and watch the sidebar on the right follow. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum er
JQueryで外部へのリンクにtarget=_blankを指定
検索エンジン大手のY社には、Yahooカテゴリ登録というサービスがあります。より多くのお客様に、キバンインターナショナルを知ってもらうために、カテゴリ登録申請を出していたのですが、「外部サイトへのリンクにtarget=_blankが指定されていない。」という理由で申請が保留されてしまいました。既に1000ページ近いコンテンツがあることを考えると、1つ1つのリンクを手で修正するのは困難です。そこで、JQueryを使って、外部サイトへのリンクにtarget=_blankを指定するプログラムを作成してみました。 <script src=”http://www.google.com/jsapi”></script> <script> if(typeof jQuery === “undefined”)google.load(“jquery”, “1.3.2”); </script> <script>
テーブルのユーザビリティを飛躍的に向上させる「Chromatable」:phpspot開発日誌
テーブルのユーザビリティを飛躍的に向上させる「Chromatable」。 Chromatableはテーブルのヘッダーを固定させ、テーブルの要素にスクロールバーを付けることができるjQueryプラグインです。 普通のテーブル Chromatableで初期化 次のようにスクロールしてもヘッダー位置はそのままで非常に分かりやすい。 実装方法 実装方法も超簡単で、JSコード自体はたったの１行で実装可能。 <!-- ライブラリ読込み --> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery.chromatable.js"></script> <!-- 初期化方法１ --> <script> $(document).ready(functio
Pretty checkboxes with jQuery | Aaron Weyenberg
I'm Aaron and I make stuff that goes on the internets. We can be Twitter buds, and my feed is here. Stuff I've posted about lately Twitter film branding Facebook IE beer summit visualization cinematography Popular Tags IE howto jQuery Facebook cinematography beer summit visualization Helvetica marketing freebie Tropicana Wordpress packaging design branding film Twitter Learn how you can send me to
Supersized – Full Screen Background/Slideshow jQuery Plugin « Build Internet
This is an outdated version! Supersized has been moved and updated to a more permanent home at the official Supersized project page. Check there for the latest release notes and features! If you are interested in this specific legacy version, you can download it here for now. Features Resizes images to fill browser while maintaining image dimension ratio No extra whitespace, no scrollbars – the en
これはカッコいい、テレビのノイズ画面風背景のLightBox作成:phpspot開発日誌
Lights Out ? Dimming/Covering Background Content with jQuery | Build Internet! これはカッコいい、テレビのノイズ画面風背景のLightBox作成。 次のように、テレビのノイズ画面のような背景がアニメーションするカッコいいLightBoxの作成チュートリアル。 デモページ 単純に背景をGIFアニメーションにしているだけっぽいけど、なんかオシャレです。 1ネタとして覚えておいて損はなさそう。サンプルもダウンロード可能です。 関連エントリ ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集 無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル jQueryやPHPを使った便利な仕組みのチュートリアル集
Anything Zoomer | Image
AnythingZoomer2 Download Image Demo A small area overlay is applied when hovered (makes it darker). It is activated by setting the "overlay" option to true (new in v2.0). The numbers in the upper right corner of the zoom window display the center of the zoom window. It is activated when the "edit" option is true; this makes it easier for you to get the coordinates you need for the target links lik
jQuery UI Tabs with Next/Previous
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Donec ultricies senectus tristique egestas vitae, et ac morbi habitant quam sit mi quam, malesuada leo. Vestibulum tempor
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SAGA HOME
eyegix
jQuery Masonry › Primer
http://www.aaronvanderzwan.com/maximage/
Sliding Boxes and Captions with JQuery