パララックスサイトの作り方の初歩
最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
[JS]画像にモザイクをかけたり、点描状にするちょっと面白いスクリプト -SeuratJS
アニメーションで点描に paper.seurat({ imageSource: 'circus.png', attributes: {r: 2, stroke: "none"}, animator: function(elm, x,y,step){ var anim = Raphael.animation({r: 7}, 350); elm.animate(anim.delay(35*y)); }); 点描をアニメーションで動かします。 点描のアニメーション paper.seurat({ imageSource: 'eiffle-tower.png', animator: function(elm,x,y,step){ var anim = Raphael.animation({cx: 2, cy: 2, r: 1}, 2e3, function(){ var anim = Raphael
3D Thumbnail Hover Effects | Codrops
A tutorial about how to create 3D thumbnail hover effects with CSS 3D transforms and jQuery. Today we want to show you how to create some exciting 3D hover effects using CSS3 and jQuery. This idea is inspired by the cool hover effect that you can find on the page of the Google SketchUp Showcase. In our examples, we’ll use thumbails that will reveal some more information on hover. We will create a
スクロールによってリストの表示をダイナミックに変化させる·stroll.js MOONGIFT
stroll.jsはCSS3を使ったスクロール時に多彩なイフェクトを実現するJavaScriptライブラリです。 WebページはJavaScriptによってどんどんダイナミックに変化させられるようになっています。そこにさらにCSS3を組み合わせることでスクロール時のイフェクトをこんなにダイナミックにできます。それを実現するのがstroll.jsです。 例です。スクロールさせるとリスト部の描画が滑らかに変化します。 3Dを使っている場合は特に奇麗です。 様々な変化があります。 スクロールは上から下、下から上の両方に対応しています。 ソースです。ul.classでアニメーション方式を指定しています。後は単純なリストです。 デモ動画です。全部で13種類のアニメーションがあります。 stroll.jsではリストのスクロールに伴うイフェクトを容易に実現できます。スクロールの速度によってイフェクトの幅
[JS]大量の画像コンテンツに便利！ サムネイルを自動生成するスクリプト -NailThumb
大きいサイズの画像から、クロップやリサイズなどして小さいサイズのサムネイルを自動生成するjQueryのプラグインを紹介します。 サムネイルはテキスト配置やさまざまなエフェクトにも対応しています。 jQuery NailThumb [ad#ad-2] NailThumbのデモ NailThumbの使い方 NailThumbのデモ NailThumbは元画像のアスペクト比を維持したまま、クロップやリサイズをしてサムネイルをスクリプトで生成します。 サムネイルはさまざまなフォーマットが用意されています。 キャプション テキストをオーバーレイで表示することもできます。 NailThumbの使い方 NailThumbの基本的な使い方は、サムネイル用のコンテナとサムネイルのサイズ設定です。 外部ファイル スクリプトとスタイルシートを外部ファイルとして記述します。 <script type="text/
マウスの動きに追従して奥行きのある背景移動をするjQueryプラグイン「jquery.parallax.js」
Posted: 2011.05.30 / Category: javascript / Tag: jQuery, Plugin マウスの動きに追従して奥行きのある背景移動をするjQueryプラグイン「jquery.parallax.js」のご紹介です。 最新のはわかりませんがIEだと動かないかもです。 「jquery.parallax.js」のダウンロードとインクルード プラグインを下記URLからダウンロードします。 ここでは現時点で最新版である「0.2」を使用します。 jQuery Parallax | jQuery Plugins ダウンロードしたらjsファイルを読み込みましょう。 jQuery本体も忘れず読み込みます。 html <script type="text/javascript" src="jquery1.5.1.js"></script> <script type="te
jsdo.it
Come creare il miglior gioco da casinò Quando si progetta un gioco da casinò, la prima cosa che devi considerare è che tipo di gioco sarà. Ci sono molti diversi tipi di giochi da casinò, dalle slot e video poker ai giochi da tavolo e giochi di carte. Dovrai decidere quale tipo di gioco si adatta meglio alle tue esigenze. Ogni tipo di gioco ha il proprio set di regole e regolamenti, quindi dovrai a
フォームのためのjQuery集「10+ jQuery Form Enhancement Plugins」
ユーザーとのコミュニケーションに一般的に使われているフォーム。メールフォーム、アンケートフォーム、会員登録と幅広い使われ方をしていますが、今回紹介するのはそんなフォームを快適にしてくれるフォームのためのjQuery集「10+ jQuery Form Enhancement Plugins」を紹介したいと思います。 フォームをちょっと便利にしてくれるそんなテクニックが詰まっています。エントリーに収録されているモノのから気になったものをいくつかピックアップして紹介したいと思います。 詳しくは以下 ■Baby Step ステップ形式にフォームを切り分けて表示できるプラグイン。インターフェイスの簡易化に。 ■Access Key Highlighter キーボードでショートカットを可能にしてくれるjQuery。 ■Checkbox Area Select マウスで選択した範囲にチェックがはいるチェ
jQueryで実現するリッチな表現のメニュー「10 Fresh jQuery Tutorials to Enhance Navigation Menus」
軽量のjavascriptライブラリとして幅広く利用されているjQuery。その機能は多岐にわたり様々なプラグインやパッケージが後悔されていますが、今日紹介するのはjQueryの中でもナビゲーションに絞って紹介しているエントリー「10 Fresh jQuery Tutorials to Enhance Navigation Menus」です。 Horizontal Scroll Menu with jQuery Tutorial 詳しくは以下 ■Spritemenu フェードインやアコーディオンなどのマウスオーバーアクションが付けられるメニュー ■Sexy Drop Down Menu w/ jQuery & CSS FLASHメニューのようなスムーズなアニメーションを見せるドロップダウンメニュー ■A Simple and Beautiful jQuery Accordion Tutor
デザイナーのためのjQueryテクニック「10 Easy jQuery Tricks for Designers」
TOP > WebDesign > デザイナーのためのjQueryテクニック「10 Easy jQuery Tricks for Designers」 非常に使い勝手が良いjavascriptライブラリ「jQuery」。様々なエフェクトを実現したり、ちょっとした問題を解決したり本当に様々な使い方がありますが、今回紹介するのはそんなjQueryを使った、デザインテクニックを集めたエントリー「10 Easy jQuery Tricks for Designers」を紹介したいと思います。 Equal-Height Columns 例えば上記のようなカラムを揃えるテクニック等、CSSでWEBを組んでいて気になる部分を解消してくれるテクニックが収録されています。 詳しくは以下 ・Rounded corners without the HTML mess（角丸を簡単に作る） ・Scrolli
写真関連のjQueryプラグインのまとめ「 30 Best jQuery Photo Plugins」
WEBの要素のうち最も重要なもののひとつ写真。そのクオリティや見せ方で、WEBサイトのクオリティは全く違ってきます。今日紹介するのはそんな写真を効果的に見せる、jQueryプラグインをまとめたエントリー「30 Best jQuery Photo Plugins」を紹介したいと思います。 3. GalleryView スライダー、スライドショー、ギャラリー、スクローラーなど様々なプラグインが収録されていますが、今回はその中から特に気になったものをいくつか紹介したいと思います。 詳しくは以下 ■20. jQZoom 細部を拡大してみせてくれるjQueryです。上記のような商材なんかをPRするには良いですね。 ■29. jQuery Multimedia Portfolio 様々なメディアに対応したショーケース。簡単なポートフォリオなどに使えそうです。 ■4. jQuery Cycle 様々な方
デザインの邪魔をしないシンプルで小粋なjQueryエフェクト集「21 Simple and Useful jQuery Tutorials」
TOP > WebDesign > デザインの邪魔をしないシンプルで小粋なjQueryエフェクト集「21 Simple and Useful jQuery Tutorials」 非常に高機能で軽量なjavascriptライブラリとして様々な機能を提供してくれるjQuery。様々なシーンで利用されていますが、今回紹介するのはデザインの邪魔をしないシンプルで小粋なjQueryエフェクト集「21 Simple and Useful jQuery Tutorials You Might Have Missed」です。 Vertical Scroll Menu ｜ Demo ナビゲーションメニューからギャラリーなどジャンル別に全部で21個のエフェクトが紹介されていますが、今回は其の中からいくつかピックアップして紹介したいと思います。 詳しくは以下 ■Four Corners Sliding
The 20 Most Practical and Creative Uses of jQuery - Nettuts+
There have been plenty of posts on the number of awesome jQuery plugins and where to find them. However, sometimes it is best not to rely on third party plugins and resources. Do it yourself the old fashioned way! Today, we will have a look at 20+ creative uses of jQuery in modern day websites and applications; sure to inspire you for your next project. James Padolsey Color Switcher
Web開発に役立つ30超のチュートリアル - NETTUTS
We've all felt that haze that forms around your eyes when you're trying to study lines and lines of code from a written tutorial. After an hour or so, your eyes simply become too weakened to continue reading. That's why I'm such a huge fan of video tutorials. You can sit back and learn at your own pace. I've compiled a list of over thirty screencasts that are guaranteed to help you.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.artbir.com/news/2011/06/27/css/index.html
indeza.jp
http://www.designwalker.com/2009/09/jquery-table.html
indeza.jp
ITクオリティ 30のアコーディオン＋タブスクリプト
http://youmos.com/news/postcardviewer