画像がズームしながら浮かび上がってくる特殊効果 | S i M P L E * S i M P L E
画像がズームしながら浮かび上がってくる特殊効果 May 25, 2007 9:30 AM written by 8maki panic.comでは画像をクリックするとき、ちょっと楽しい。 画像がズームしながら浮かび上がってきます。ズームアウトもするするーっと戻っていく感じ。 Lightbox.jsでもZOOM用のライブラリーがありますが、これはZOOMするときのアニメーションが小気味いいですね。 実装したい方はこちらから。 → effects.js 細かいドキュメントは無いみたいですが、panic.comや作者のブログを参考にしてみてください。 » panic.com Info: 特殊効果 | 固定リンク | コメント (1) | トラックバック (0) | ↑ コメント一覧 少し気になりましたので、コメント経由で... effects.jsのライセンスに関する記載を拝見しましたが、
Error 404 - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
スクロールしても消えないドロップシャドウの作り方 July 30, 2007 4:40 PM written by Gen Taguchi メモ書きもかねてエントリー。ページをスクロールしていってもページの上や下にドロップシャドウを貼り付けておく方法。 ↑ このようなドロップシャドウですが・・・。 ↑ スクロールしても付いてきます。 サイトに立体的な効果をつけたいときに使えそうですね。いろいろ応用も利きそうです。 なお、PNGの透過部分を使っているのでInternet Explorerでは動きません。実際に動いているデモはこちらから。 詳しい作業ステップは以下のサイトからどうぞ。 » Scrolling Drop Shadows | Zooiblog Info: デザイン全般 | 固定リンク | コメント (0) | トラックバック (2) | ↑ この記事のトラックバックURL （
このページの先頭へ、をちょこっとおしゃれに | S i M P L E * S i M P L E
ブログでもサイトでもよく見る「このページの先頭へ」のリンク。長～いページだとそのリンクで一瞬に先頭に行ってしまい、読んでいる人が混乱することもよくあります。 そこでご紹介したいのが「するするるーーー」と先頭まで戻ってくれるJavascript。このブログでも導入してありますので是非体験してみてください。 ↑ ページの下の方でこの「↑」を押すとするすると上まで戻ります。 導入方法は簡単でJavascriptを導入し、「このページの先頭へ」リンクにonClickイベントを仕込むだけです。 仕込むJavascriptはこちら。ちなみに元ネタは「A (slightly) better technique for “Back to Top” links.」です。ページ内に書き込んでも、外部ファイルにしてもいいでしょう。 function backToTop() { var x1 = x2 = x3
もうPhotoshopは要らない？ブラウザだけでできるグラフィックジェネレータ15選 | S i M P L E * S i M P L E
そのままですが、Mashableで「Forget Photoshop: 15 Online Graphics Generators」が紹介されていました。 これはメモしておかねば。 Buttonator ボタンがいろいろ作れます。設定がいろいろあって良いですね。 RoundedCornr: Rounded Corner and Gradient Generator いわゆる角丸パーツを作れます。 Web 2.0 free buttons maker! 2.0っぽいボタンが作れます。 glassy buttons こちらもボタンジェネレータ。 Ajaxload – Ajax loading gif generator Ajaxのローディング中のパーツが作れます。 Web2.0 Logo Creator by Alex P Logo Maker : Web 2.0 Stylr 2.0っぽいロゴ
あらゆるページにもっと高機能な拡大鏡を追加できる『TJPzoom.js』 - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
昨日ご紹介した「あらゆるページに拡大鏡を追加できる『Loupe.js』」の高機能版ともいうべきスクリプトをご紹介。 TJPzoomを使えば画像に拡大鏡をつけられる上、マウスドラッグでさらに拡大したり、高解像度の写真を別に用意しておいて拡大時にそっちを表示できたりします。 以下に簡単に使い方をご紹介。まずは基本パターン。 最初にスクリプトを導入。 <script type="text/javascript" src="tjpzoom.js"></script> 次に画像のコードを以下のように変更。divタグをつけるのと、widthタグをつけるのを忘れずに。 <div> <img src="test.jpg" style="width:640px; height: 480px;" onmouseover="TJPzoom(this);"> </div> なお、このほかにいくつかの画像ファイルを
あらゆるページに拡大鏡を追加できる『Loupe.js』 | SIMPLE*SIMPLE
これはすごい。あらゆるページに拡大鏡を設置できるJavascriptです。 ↑ こんな感じに拡大鏡を設置可能。 画像と簡単なスクリプトをインストールすればOKなようです。 追加するコードは以下のとおり。 まずはページのヘッド部分に以下を追加。 <script type="text/javascript" src="loupe.js"></script> そして拡大鏡を追加したい画像にonLoadで以下を追加。 <div> <img id="..." onLoad="initLoupe(this.id);" src="..." width="356" height="205" alt="..."> </div> 細かい写真などを見せたい場合に便利ですね。知っておくとよさそうです。 ダウンロードや詳しい使い方は以下をご覧ください。 » Loupe.js
Adsense x Analytics - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
※ 百式管理人注：この記事、Simple*Simpleのテーマである「Smart Designs」のテーマからは逸れますが、うちの学生インターンくんが自主的に書いてくれました。こういう前向きな姿勢は高く評価したいので掲載してしまいます。いやぁ、最近の学生さんはみんな優秀だなぁ・・・。 あなたのブログでも導入しているかもしれないGoogle AdsenseとAnalytics。 » Track Google AdSense Clicks via Google Analytics – Free AdSense Tracker : SEO Book.com ではAnalyticsを利用してAdsenseのクリックを詳細に追跡する方法を紹介している。 「どのエントリーでクリック数が多いのか？」「どこから来たユーザーのクリック率が高いのか？」などAdsenseのレポート機能ではわからないことも完全で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SiMPLE*SiMPLE - ウェブ職人のための小粋なネタ帳