NEW! - SLICE-MENU (POPS-SLICE-MENU) - 2011/02/07 UP

GOTO SLICE-MENU

新！、、MENU画像をスライス分割したアクションを行います。20種のタイプを簡単設定できます。
●シミュレーションがありますので、内容など確認できます。編集なども可能です。



NEW! - POPS-TRANSITION シリーズ1 POPS-SLICE-PHOTO - 2010/11/17 UP

GOTO SLICE-PHOTO

新！、、画像をスライス分割した、FLASH LIKE な TRANSITIONエフェクトシステムです。サンプル解説とＤＥＭＯをご覧ください。


NEW! - POPS-TRANSITION シリーズ2 POPS-TRANSIT-PHOTO - 2010/11/24 UP

GOTO TRANSIT-PHOTO

新！、、１枚画像の、スライド、フェードなど数多くのTRANSITIONエフェクトシステムです。サンプル解説とＤＥＭＯをご覧ください。


NEW! - POPS-TRANSITION シリーズ3 POPS-SPLIT-PHOTO - 2010/11/24 UP

GOTO SPLIT-PHOTO

新！、、縦または横スライス分割が変化する、TRANSITIONエフェクトシステムです。サンプル解説とＤＥＭＯをご覧ください。

 

 

スムーツに伸縮する透過PNG画像を配置したBOX、 POPS-iBOX

POPS-iBOXシリーズ POPS-iBOX (A2.B2.C2) 画像横幅を広げたタイプ

popup lightbox

POPS-iBOX は jqueryプラグインです。 LightBox風に、透過png32配置のboxを写真画像とともに、スムーツ拡大するアプリです。

陰影を形成表示している特殊な構造のBOXを、POPS-PANELと名づけそれを基本に発展させたものです。
POPS-PANELを使用した、LightBox系POPS-iBOX原型を作り、それを元に、デザイン的にキレイになるよう、アレンジしたものである。
いまさら、LightBox系の画像拡大アプリなど、お思いかと、、、少しの違いがあります、下の各種のＤＥＭＯと解説をご覧ください。



下の各々の名前画像をクリックしたください。ＤＥＭＯ、解説ページに進みます。


POPS-iBOXシリーズ No1 POPUPタイプ (チョッとお勧め)

POPUPタイプのページに進む

POPS-iBOXシリーズ No2 PAGERタイプ (超--お勧め)

PAGERタイプのページに進む

POPS-iBOXシリーズ No3 LightBoxタイプ (お勧め普通)

LightBoxタイプのページに進む

◇用途に応じて３種類用意しました。


 

改造の資料と POPS-iBOX-A2-B、 POPS-iBOX-B2-B、Opacity 処理タイプ

極力、動作が軽くなるように改造した Opacity処理タイプ2種です。
上の通常伸縮タイプより動作が重くなります、サンプルを参照の上判断ください。


Opacity処理タイプのページに進む

改造の資料とPOPS-iBOX-A2-B POPUP Opacity処理タイプ。個人的に改造する場合の解説、資料などをも収録しています。

Opacity処理タイプのページに進む

 

Opacity処理タイプのページに進む

改造の資料とPOPS-iBOX-B2-B PAGER Opacity処理タイプ。個人的に改造する場合の解説、資料などをも収録しています。

PAGER付き、Opacity処理タイプのページに進む

 

お断り、LightBoxタイプは重くなるので、制作していません。


 

POPS-PANEL DEMO


特殊な構造のため、POPS-PANELと名前をつけています。POPS-iBOXはこの構造を使用しています。


[ POPS-PANEL 仕様と特徴 ]

・HTML構造のパネル部品構造体(BOX)である。単体では何の意味をも成さないものである。
・外周に透過PNG32画像を配置した(SHADOW)、背景と一体構造、アニメスクリプトが少なくてすむ。
・動作が軽く正確な伸縮をする。スペックの悪いマシンでもＯＫ。
・スムーツ伸縮、陰影の切れなどが無い。
・標準で、opacityカスタムアニメ、FADEなどopacity処理にも対応できます。
・色々なものに組み込み、応用できる。TABLE構成でないので、他のBOXとの相性が良い。
・クロスブラウザ。
・反面、IEにおける様々な問題、不具合を含んでいる。(ほぼ解決済み、使用に問題は無い)

 

POPS-PANEL 動作サンプル DEMO

 

[ POPS-PANEL-TEST 実際の例] ★ 中央のパネルを [ CLICK ] して下さい、大きさが順次変わります。


 

※ 動作時間はランダム値です。このＤＥＭＯでは陰影部分が最小のPNG32画像を使用しています。
※ このDEMOでは、IE8のバグである陰影の重なりを、特殊な「99.99%法」で取っています。
※ DEMOに使用のＪＳ、ＣＳＳ、pops_panel_demo.js pops_panel_demo.css

 

INFO、更新情報など

pops info

※ 当サイト、ＯＰＥＮしました。よろしくお願いします。
※ サイト構成、ページ内容、配布するZIPの内容などは、予告無く変更なる場合があります。
※ 新規立ち上げのため、誤字などがありましたら、ご容赦ください。

※ サイト管理者への連絡は以下のアドレスにお願いします。

yahoomail banner

 

What a New

※ 2011/02/07/ SLICE-MENU (POPS-SLICE-MENU)を配布開始。
※ 2010/11/24/ POPS-TRANSITIONシリーズ TRANSIT-PHOTO SPLIT-PHOTOを配布開始。
※ 2010/11/17/ POPS-TRANSITIONシリーズ SLICE-PHOTO 1種を配布開始。
※ 2010/08/15/ POPS-iBOX B2-B (PAGER Opacity処理タイプ)、改造資料UP。
※ 2010/08/06/ POPS-iBOX A2-B (POPUP Opacity処理タイプ)、改造資料UP。
※ 2010/07/20/ POPS-iBOXシリーズ POPS-iBOX (A2.B2.C2) 3種を配布開始。
※ 2010/07/20/ OPEN