snapfit.js (javascript jigsaw puzzle functionality for images)
To add snapfit just set the event onload="snapfit.add(this);" to an div surrounded image. <div><img onLoad="snapfit.add(this);" width="400" height="200" ...></div> Mouse- and Keyboard-driven handling: Move: Click & Drag Rotate clockwise in steps of 90°: DoubleClick Flip along X-axis: DoubleClick & [alt]Key or Right Mouse Button Flip along Y-axis: DoubleClick & [shift]Key or Middle Mouse Button Key
sphere.js (javascript spherical image effect)
Initialisation class "sphere" define the sphere size by adding isize followed by the desired size in pixel: Sphere size class "isize" - min=32 max=n default=auto vary the image by adding izoom followed by the desired zoom in percent: Image zoom class "izoom" - min=100 max=200 default=100 vary the image by adding ishift followed by the desired shift in percent: Image shift class "ishift" - min=1 ma
shiftzoom.js (javascript zoom and pan functionality for images)
Set defaults shiftzoom.defaultFading = true; //BOOLEAN startup image fading shiftzoom.defaultButtons = true; //BOOLEAN left top buttons shiftzoom.defaultNozoom = false; //BOOLEAN disable zooming feature shiftzoom.defaultBicubic = false; //BOOLEAN enable bicubic image interpolation for IE7+ shiftzoom.defaultWheelinvert= false; //BOOLEAN makes zoom behaviour identical with Google Maps
busy.js (javascript loading indicators)
Download cvi_busy_lib.js and include it into your webpage. <script type="text/javascript" src="cvi_busy_lib.js"></script> Add overlay to element ctrl = getBusyOverlay(parent[, overlay[, busy]]); parent == element to add the overlay to or "viewport" overlay e.g. {color: 'black', opacity: 0.5, ...} color == STRING 'black' or '#000000' or 'rgb(0,0,0)' Default: 'white' opacity == FLOAT 0.0 - 1
strokeText.js (with IE 6/7/8 support)
What is it good for strokeText.js is an unobtrusive javascript library working in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. The library provides cross API text stroking capability for Canvas and VML. The (built in) sans-serif font is also adapted for SVG to ensure an identical representation. strokeText.js is not a standalone application. It act's as an expansion to
bevel.js (javascript image bevel effect)
Download bevel.js and include it into your webpage. <script type="text/javascript" src="bevel.js"></script> Initialisation class "bevel" vary the radius by adding iradius followed by the desired radius in percent: Image radius class "iradius20" - min=20 max=40 default=20 vary the masking by adding usemask: Image masking class "usemask" vary the masking by adding ibackcol followed by the color: Mas
mapper.js (automatic area highlighting for image maps)
mapper.js 2.4 allows you to add automatic area highlighting to image maps on your webpages (inc. export to SVG). It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it can use "jsgraphics" from Walter Zorn (if installed), else it'll degrade and your visitors won't notice a thing. Image with class "mapper showcoords noborder iopacity50 icolorff00
curl.js (javascript page curl image effect)
Initialisation class "curl" vary the size of the curl by adding isize followed by the desired size in percent: Curl size class "isize" - min=0 max=MinImageDimension default=33 vary the paperback color of the curl by adding icolor followed by the color: Curl color class "icolor" - min=000000 max=ffffff default=0 vary the shadow by adding ishadow followed by the opacity in percent: Curl shadow class
reflex.js (javascript cover flow image effect)
To get the effect just add a class="reflex" to the image (minimum dimension: 32x32). The needed vertical space of the canvas element will grow by the height of the reflection, plus the height of the distance. Initialisation class "reflex" vary the reflection by adding idistance followed by the desired height in pixel: Reflection distance class "idistance" - min=0 max=100 default=0 vary the reflect
edge.js (javascript image mask effect)
Initialisation class "edge" vary the mask by adding imask followed by the maskimage number: Mask image class "imask" - min=0 max=NumberOfLoadedMasks default=0 fallback mask creates soft edges without any external resource image: Fallback class "inbuilt" vary the size of the fallback mask by adding isize followed by the desired size in pixel: Edge size class "isize" - min=0 max=HalfOfImageDimension
corner.js (with IE 6/7 support)
corner.js 2.1 allows you to add corners (and also shading and shadow) to images on your webpages (alternatively: glossy.js). It uses unobtrusive javascript to keep your code clean. It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it'll degrade and your visitors won't notice a thing. CVI-lab: Get a fast impression of the effects and their illu
Glossy.js (now with IE 6/7 support)
Initialisation class "glossy" vary the radius by adding iradius followed by the desired radius in percent of half of the smaller picture dimension: Corner radius class "iradius25" - min=20 max=50 default=25 vary the shadow by adding noshadow: Noshadow class "noshadow" - default=false vary the background by adding ibgcolor followed by the desired color as hex: Background color class "ibgcolor" - mi
Instant.js (now with IE 6/7 support)
Download instant.js and include it into your webpage. // only if you want to use the annotation feature... <script type="text/javascript" src="cvi_text_lib.js"></script> // ...else this one only... <script type="text/javascript" src="instant.js"></script> Initialisation class "instant" vary the shadow by adding ishadow followed by the desired opacity in percent: Shadow opacity class "ishadow" - mi
loupe.js (photorealistic loupe effect for images)
loupe.js 2.0 allows you to add photorealistic loupes (magnifier) to images on your webpages. The design is changeable by use of an image editing program. It uses unobtrusive javascript to keep your code clean. It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari, Chrome and IE6+. On older browsers, it'll degrade and your visitors won't notice a thing.
S5 Reloaded ? Enhanced version of the browser-based presentation slideshow system
Valid RSS? Valid CSS? Valid HTML (4.01 Transitional)? Obstruct-fair Entrance: Level-A Page: Welcome to S5 • Reloaded My name is Christian and my profession is web design and programming. When I searched for a browser based slide show system which should answer my personal needs I encountered S5 (Simple Standards-based Slide Show System) from Eric Meyer [meyerweb.com/eric/]. This format/program cou
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
slided.js (javascript slide frame image effect)
filmed.js (javascript film strip image effect)