[JS]ページ遷移にフェードやスクロールのアニメーションを加えるスクリプト -Pageswitch
リンクをクリックしてページを遷移する際に、フェードやスクロールのアニメーションを加えるスクリプトを紹介します。 デモページ Pageswitchの実装 実装は簡単です。 HTML 既存のHTMLに、特に手を加える必要はありません。 idに使用している「example」は適当なものに変更できます。 <div id="example"> <a href="//coliss.com/">Example #1</a><br /> <a href="http://www.example.com">Example #2</a><br /> </div> [ad#ad-2] JavaScript PageswitchはjQueryのプラグインのため「jquery.js」と当スクリプトを外部ファイルにし、下記のように各リンクにエフェクトを指定することができます。 $(document).ready(fun
jQueryプラグインのベストトレンド総まとめ2010*ホームページを作る人のネタ帳
もはやこの業界ではかなり浸透しつつあるjQuery。 今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。 ※プラグインつかってないのもあります。 １）3D表示プラグイン サンプルデモ 今年のトレンドと言えば3D。 というわけでこちら。まずはサンプルデモを確認。 触ってわかる通りですが、2枚の画像が3D表示されます。 呼び出す $(function() { $('#mindscape').smart3d(); }); HTML <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS #mindscape { width: 720px; height: 170px;
jQuery Mobileを利用したスマートフォンサイト作成手順 | ユージック
jQuery Mobileを利用したスマートフォンサイト作成手順 2010年11月6日 jQuery Mobileを利用してスマートフォンサイト作成してみたので、手順を覚書として書いておきます。 ちなみにまだ正式版ではなく、アルファ版となります。※2010年11月現在 現在のバージョンなどは下記の本家サイトよりご確認ください。 jQuery Mobile jQuery Mobileを利用したページ作成概要 本家のデモ作成画面を和訳してくれている下記ページがわかりやすいです。 http://dev.screw-axis.com/doc/jquery_mobile/ 読み込みファイル <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://c
WordPressのコメントとトラックバックをjQueryでタブ分けするカスタマイズ法 - かちびと.net
コメント頂いたので、記事にして みます。このブログで実装してい るような、コメントとトラバをタブ で分けるカスタマイズ法。方法は 多数あると思いますので参考 程度にして頂ければと思います。 内容は、コメントとトラバをプラグインを使わずに分ける方法と、それをjQueryを使ってタブ分けする方法です。 コメントとトラバを分ける まず、コメントとトラバを分けます。既にWordPress: コメントとトラックバックを分けるのにプラグインは不要という記事がありますので、コチラもご参照くださいね。この点は全く同じ内容です。 STEP.1 お使いのテーマファイル内にあるcomments.phpのバックアップを取ってからファイル開いて以下のコードを探します。 <?php foreach ($comments as $comment) : ?> このコードがコメントやトラバを表示するコードになります。 ST
[jQuery]イメージマップでTooltip表示するサンプル
「イメージマップのホットスポットにマウスオーバーしたら説明表示出るように出来ない？」って言われて書いたやつ。 非表示にしてるブロック要素を表示してるだけなので、画像とかテキストとか割とフリーダムに出せる。 jQuery1.2.6用。 jQueryのマウスイベントには以下プロパティ提供されていて pageX/Y ： ページの左上を0としたマウスポインタの位置 clientX/Y ： ブラウザのドキュメント表示領域を0としたマウスポインタの位置 特別なことしなくてもイベントが発生した時のマウスポインタの位置を取得することが出来る。 <div id="imgmap"> <img src="tags.png" alt="Tags" width="400" height="151" border="0" usemap="#Map" /> <map name="Map" id="Map"><area
Ajax » jQuery plugin » ツールチップ | PHP & JavaScript Room
PHP、JavaScript、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説［CSS］jquery.cluetip.css ［JS］jquery.js v1.2.6、jquery.dimensions.js、jquery.hoverIntent.js、jquery.cluetip.js 外部ファイルを読み込んだり、いろいろなツールチップが実装できるjQueryプラグイン。 ツールチップのレイアウトや表示位置など、パラメータをいじるだけで簡単に変更できます。 設置イメージ HEAD <!-- JS --> <script src="jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.dimensions
[JS]現在位置のハイライトをアニメーションで移動させるナビゲーション -MagicLine
並列に配置されたナビゲーションの現在位置を明示したハイライトをアニメーションで移動させるスクリプトをCSS-Trickから紹介します。 jQuery MagicLine Navigation デモページ 現在位置を明示するサインは、ライン（キャプチャ：上）と背景（同：下）の2種類が用意されています。 また、背景は各ラベルでカラーが異なります。 ナビゲーションの実装はリスト要素をdiv要素で内包したシンプルなものとなっています。 HTML <textarea name="code" class="html" cols="60" rows="5"> <div class="nav-wrap"> <ul class="group" id="example-one"> <li class="current_page_item"><a href="#">Home</a></li> <li><a hr
jQuery MagicLine Navigation | CSS-Tricks
These “sliding” style navigation bars have been around a while, I just thought I’d take a crack at doing it myself as the opportunity came up recently. Turns out it’s really pretty darn easy. I put two examples together for it. The Idea The idea is to have a highlight of some kind (a background or an underline) follow you around as you mouse over the different links in the navigation. This will ha
45 jQuery Navigation Plugins and Tutorials - noupe
By Paul Andrew As many of us know, the initial 15-20 seconds of a new user's visit to a web site will have a large impact on whether on not they are going to like or dislike the site, prompting them to decide whether they will stay or go. This means it's vital that you follow usability rules with common design practices and layout your site, especially the navigation, in a style that the user can
[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 | コリス
以前、紹介した「Page Scroller」のバージョンアップ版「Page Scroller ver.3」の紹介です。 追記： 2013年10月26日 ver.3.0.9をリリース jQueryの旧版によるXSSに対応しました。 2011年5月4日 デモおよびダウンロードファイルをjQuery1.6に変更しました。 2011年1月31日 ver.3.0.8をリリース 機能を追加しました。 2010年11月19日 ver.3.0.7をリリース ライセンスを変更しました。 2010年11月17日 デモおよびダウンロードファイルをjQuery1.4.4に変更しました。 2010年9月19日 デモおよびダウンロードファイルをjQuery1.4.2に変更しました。 2009年7月6日 対応ブラウザ（IE8, Fx2.5, Chrome2）を更新しました。 2009年2月23日 ver.3.0.6をリ
![[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
Dynamic Drive DHTML scripts- jQuery Scroll to Top Control
Note: April 7th, 09'. Adds ability to scroll to an absolute position (from top of page) or specific element on the page instead. Also fixes scroll animation not working in Opera. Description: If your pages are long winded, it's a good idea to provide viewers with an easy way to quickly/ automatically scroll back to the top of the page. That's where this script comes in. It displays a stationary co
机の上に写真を無造作に並べたような写真ギャラりー実装デモ:phpspot開発日誌
Interactive Photo Desk with jQuery and CSS3 | Codrops 机の上に写真を無造作に並べたような写真ギャラりー実装デモ。 jQueryとCSS3を使って次のようなドラッグ＆ドロップも可能なギャラリーを作ることが出来ます。 ソースのダウンロードも可能なので参考にしてみましょう。 Flashを使わずともこうしたことが出来るのはよいサンプルかもしれません。 ちょっと変わったギャラリーを実装したい際の参考にしましょう。 関連エントリ jQueryを使ったFlashばりにクールなギャラリー「GalleryView」 高いカスタマイズ性を持つ画像ギャラリー実装用jQueryプラグイン「AD Gallery」 JavaScript製の画像スライダー・ギャラリーいろいろ
jQueryを使ったストレッチする背景画像 – creamu
背景に大きくビジュアルを使いたい。 そんなときに参考になるのが、『Image Now』。jQueryを使った、背景画像がストレッチするサイトです。 jquery.backstretch.jsが使われていて、width:1024pxの画像が、ブラウザサイズに合わせて伸縮しますね。Flashサイトでなくてもこれができるのはいい感じ。 画像がランダムに切り替わるんですが、それはfunctionでJavaScriptが書かれています。 デザインも設計もクールなサイトなので、一度見てみてください。 Image Now LADの新作のレザーバッグを購入。前のが破れてしまって新しいのがほしかったので、ちょうどいいのが見つかっていい感じ。ふとボッテガ ヴェネタのも気になって見に行ったんだけど、結構するしまだいいかな、と見送りました。でもデザインも質もものすごくいいですね。 あとFenderロゴ入りの帽子も
かっこいいイメージスライダー集 – creamu
クールなスライドショーを実装したい。 そんなときにおすすめなのが、『BEST jQuery Plugins For Image Galleries And Sliders』。かっこいいイメージスライダー集です。 いい感じのものが揃っていますね。 jQuery Content Gallery Plugin サムネイルが自動でスクロールするタイプ CU3ER Image Slider これはすごい！Flashのイメージスライダーです。ソースがダウンロードできて、商用無料 Sliding Image Gallery 奥行きのあるスライダー jQuery Morphing Gallery モーフィング効果が面白いスライダー Creating an Image Slider マウスオーバーすると、すっと画像が切り替わるスライダー スライダーを探している方は、一度見てみてください。 BEST jQue
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tiny Circleslider: A lightweight cross browser circular carousel.
Lettering.js - A jQuery plugin for radical web typography.
steamdev.com
びわ湖温泉 紅葉
http://miracle-ysdesign.com/blog/javascript/409.html
[JS]テーブルのデータをアニメーションでソートするスクリプト -Animated table sort