サイトを一気に冬仕様にする！JavaScriptでサイト全体に雪を降らせる方法 2012 12/9 カテゴリー : デザイン Code . javascript 投稿者 : YANOYOSHIKI コメントを書く ちょっと時期的に遅いエントリーかもしれませんが、サイト全体に雪を降らせる方法をメモ的に共有しておきますね。 多分いろいろ方法があると思うんですが、今回はJavaScriptを使用。 DEMOも公開しておきます！ 1.下記のコードをコピーして任意の名前で外部ファイル作成 /* Snowfall jquery plugin version 1.2, Dec 20 2009 Developed by Jason Brown for any bugs or questions email me at loktar69@hotmail info on the plugin is loca

スライドを単に次々と見せるだけでなく、切り替わる時に3Dのダイナミックでかっこいいエフェクトを与えたスライドショーを実装するチュートリアルを紹介します。 Slideshow with jmpress.js [ad#ad-2] デモ 実装 デモ まずは、そのダイナミックな3Dのアニメーションをご覧ください。 スライドは5枚あり、それぞれアニメーションが異なります。 デモページ：別レイアウト 実装 実装に使用しているスクリプトは先日当サイトで紹介した「jmpress.js」です。 紹介記事はこちら。 広大なカンバスを使って次々にコンテンツをスライドさせるスクリプト -jmpress.js HTML jmpress.jsのイメージは一枚の広大なカンバスにパネルを設置し、それをアニメーションでスライドする感じです。 実装は一枚の広大なカンバスとなるルート（section要素）に、各パネル（div要

Fancy Zoom (jQuery) Zoomy JavaScript based loosely on Fancy Zoom by Cabel Sasser. This works with any html (images, text, headings, flash). The only caveat is it doesn't currently work with AJAX. Whatever you want to zoom to must be html already on the page. Below are several examples. Width and height of zoom box are configurable through optional setting or css. Demos Text Lorem ipsum dolor sit a

prettyPhoto prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It’s a full blown media lightbox. It is very easy to setup, yet very flexible if you want to customize it a bit. Plus the script is compatible in every major browser, even IE6. It also comes with useful APIs so prettyPhoto can be launched from nearly an

デモ：Flip Tabulous.jsの使い方 実装は非常にシンプルで、エフェクトの設定も簡単です。 Step 1: 外部ファイル 当スタイルシート、「jquery.js」と当スクリプトをhead内に記述します。 <link href='tabulous.css' rel='stylesheet' type='text/css'> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="tabulous.js"></script> Step 2: HTML HTMLは非常にシンプルで、タブをリスト要素、コンテンツをdiv要素で実装し、divで内包します。

くるっと反転させるパネルをタブで操作するスクリプトをWeb Developer Plusから紹介します。 <textarea name="code" class="js" cols="60" rows="5"> $('document').ready(function(){ //initialize quickflip $('#flip-container').quickFlip(); $('#flip-navigation li a').each(function(){ $(this).click(function(){ $('#flip-navigation li').each(function(){ $(this).removeClass('selected'); }); $(this).parent().addClass('selected'); //extract index o

スクロールしたときにおすすめ記事を右下からにゅるっと表示させるjQuery「RecommendFooterプラグイン」を公開します。 １．サンプル サンプルを用意しました。 サンプル スクロールして「タイトル4」が表示されると、ページ右下からおすすめ記事のボックスが表示されます。 また、逆スクロールして「タイトル4」が表示されなくなるとボックスが隠れます。 さらに、ボックスが表示されているスクロール位置でリロードを行うとボックスが再表示されます。 ２．プラグインのダウンロード 下記のリンクからプラグインをダウンロードして、ファイル名を「jquery.recommendfooter.js」にリネームしてください。 jquery.recommendfooter_0.0.1.js 以下、設定方法です。 ３．HTML 下からにゅるっと表示させたいHTMLを、body終了タグの前に次のように記述しま

Hover Captions (HCaptions.js) 要素の上にクールに表示できるCaption実装jQueryプラグイン「HCaptions.js」 画像等にカーソルを合わせるとCaptionが出る、というのをカッコよく実現できるプラグインです。 キャプションの上にボタンなんかも表示できて、編集画面等でつかえそうです アニメーションが色々とカスタマイズでえらべるのでサイトの特徴に併せて動きを調整できます 関連エントリ 範囲指定が可能になるUI実装jQueryプラグイン「noUiSlider」 １ページ内で複数ページに分割できるjQueryプラグイン「windows」 エレメントを立体的に回転させられるjQueryプラグイン「Vortex」 レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 リアルなアナログ時

ページに分かりやすく、プロダクトツアーを加えるフレームワークを紹介します。 似たようなスクリプトはたくさんありますが、これはツアー移動のアニメーション、ツアーを戻る、そして複数ページにも対応しています。 1ページ内でのツアーでけではなく、複数ページを横断するツアーも作成できます。 Hopscotch Hopscotch -GitHub Hopscotchの特徴 Hopscotchのデモ Hopscotchの使い方 Hopscotchの特徴 イベントのコールバック ツアー中のさまざまなイベントのコールバックを装備。 マルチページ対応 HTML5のストレージやクッキーを利用して、複数ページにまたがるツアーも可能。 i18n対応 さまざまな言語での実装をサポート。 快適なレスポンス 一つひとつは軽量なインスタンス。 Hopscotchのデモ ページ自体がデモになっています。 中央下の「Tale

ぱっと見、よく見かけるレスポンシブ対応のナビゲーションのようなUIですが、かなりかっこいいエフェクトが仕込まれているデモを紹介します。 スクリプト無し、エフェクトはスタイルシートのみで実装されています。 左上のアイコンをクリック・タップすると、オーバーレイでナビゲーションがダイナミックなアニメーションで表示されます。 ふわっとナビゲーションのアイテムが集まってくるの、かっこいいですね。 解除して散っていくのも！ 実際のデモは、こちらからどうぞ。 Chrome, Safariでご覧ください。 デモページ これをベースにいろいろなアイデアが膨らんできますね。 参考までに、実装もご紹介。 HTML オーバーレイでステイになるのは、チェックボックスを使用しています。 <!-- start header --> <header id="head"> <div class="container"> <

CSS3アニメーションとjQueryを使って、アニメーションの動きが気持ちいい水平型のギャラリー・ポートフォリオを実装するチュートリアルを紹介します。 デモページ：サムネイルのホバー時 サムネイルのホバー時だけでもキャプションの表示だけでなく、画像などのサイズ変更、テキストの表示、各アイテムの可視化、配置変更などもアニメーションで行われています。 実装 実装はポイントをまとめて紹介します、Stepは3つです。 元記事では詳細に書かれているので、参考にしてください。 Step 1: HTML 画像、2つのパラグラフ、タグが一つのセットになっており、それぞれをリスト要素で実装します。 <ul class="portfolio-items"> <li class="item"> <figure> <div class="view"> <img src="images/1.jpg"> </div>

Industrial.js 水量・温度・メーター等、産業用のグラフを描画できるjQueryプラグイン「Industrial.js」 グラフ描画ライブラリは色々ありますが、こういうのは珍しいかもしれません。産業用のWEBシステム以外にもダッシュボード等で色々と使えるかもしれませんね。 どういう仕事がはいってくるかもしれない、というWEB製作者の方は覚えておいてもよいかも 関連エントリ どんなデータもリアルタイムなグラフにできるフレームワーク「FnordMetric」 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 クールでアニメーションするグラフを描画できるHTML5チャートライブラリ「Chart.js」 テーブルをグラフに変換してくれるjQueryプラグイン 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」

vTicker 縦方向にスクロールするクールなティッカーを実装できるjQueryプラグイン「vTicker」 ティッカーというと横スクロールなものをイメージされる方も少なくないかもしれませんが、縦にカッコよくスクロールするティッカーが実装できます テキストはulリストで定義して初期化するだけで使えます 最新ニュース等を１行で表示したい場合に使えるプラグインですね 関連エントリ エレメントを立体的に回転させられるjQueryプラグイン「Vortex」 テーブル内容を入力値でフィルタリングできるjQueryプラグイン「FilterTable」 レスポンシブでタッチ端末で使えるオーディオプレイヤ実装jQueryプラグイン「AudioPlayer」 マスクを使ったお洒落なスライダーが作れるjQueryプラグイン「Maskify Slider」 アプリ風のなめらかなサイドメニューが実装できるjQue