|
5. NlsScroller Effect
NlsScroller Pro is unique scroller control.
NslScroller Pro supports many cross browsers effect that you can easily configured.
Sections below describes more detail about each of the effect.
- Continuous Scroll
- Slide Effect
- Fade Effect
- Wipe Effect
- Blank Effect
- IE Visual Transition Effect
5.1. Continuous Scroll
Standard (default) scroller effect, continuously scrolls the contents.
Object:
function NlsEffContinuous (conf)
Arguments:
-
conf, comma separated key value pair parameter.
Below are supported parameters:
- direction, scrolling direction, possible value up, down, left and right. Default value is up
- speed, scrolling speed in milliseconds, default is 40ms.
- step, scrolling step, default value is 1.
- delay, topic delay, scroller scrolls a topic and stop for the amount of specified time before continue to next topic. Default value is 0 (continuous scroll)
Browsers compatibility:
Supported on all NlsScroller's compatible browsers.
Example code:
<html>
<head>
<title>Embeding NlsScroller</title>
<link rel="StyleSheet" href="nlsscroller/nlsscroller.css" type="text/css" />
<script language="javascript" src=" nlsscroller/nlsscroller.js"></script>
</head>
<body>
<h1>Here is my first scroller</h1><br>
<div id="scrollerDiv" style="width:220px;height:220px;overflow:auto;">
<div>
<strong>Topic 1</strong>
<p>Description here, Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod...
</p>
</div>
<span class="nlsscrollerbreak"></span>
<div>
<strong>Topic 2</strong>
<p>Description here, Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod...
</p>
</div>
<span class="nlsscrollerbreak"></span>
<div>
<strong>Topic 3</strong>
<p>Description here, Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod...
</p>
</div>
</div>
<script>
var n = new NlsScroller("scroll1");
n.width=300;
n.height=220;
n.setEffect(new NlsEffContinuous("direction=up,speed=40,step=1,delay=0"));
//uncomment this line if you want the scroller stops for 2 seconds (as specified
//in delay parameter in milliseconds).
//n.setEffect(new NlsEffContinuous("direction=up,speed=40,step=1,delay=2000"));
n.setContentById("scrollerDiv");
n.render("scrollerDiv");
</script>
</body>
</html>
5.2. Slide Effect
Slide in, slide out and slide shift effect.
Library:
nlsscroller_eff_slide.js
Object:
function NlsEffSlide(conf)
Arguments:
-
conf, comma separated key value pair parameter.
Below are supported parameters:
- type, possible value shift, in and out. Default value is shift.
- direction, scrolling direction, possible value up, down, left and right. Default value is up
- speed, sliding speed, in milliseconds. Default value is 10.
- stepsnum, number of steps to slides from start to finish, default value is 80.
Browsers compatibility:
Supported on all NlsScroller's compatible browsers.
Example:
<html>
<head>
<title>Embeding NlsScroller</title>
<link rel="StyleSheet" href="nlsscroller/slide.css" type="text/css" />
<script language="javascript" src=" nlsscroller/nlsscroller.js"></script>
<script language="javascript" src=" nlsscroller/nlsscroller_eff_slide.js"></script>
</head>
<body>
<h1>Here is my first scroller</h1><br>
<div id="scrollerDiv" style="width:220px;height:220px;overflow:auto;">
<div>
<strong>Topic 1</strong>
<p>Description here, Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod...
</p>
</div>
<span class="nlsscrollerbreak"></span>
<div>
<strong>Topic 2</strong>
<p>Description here, Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod...
</p>
</div>
<span class="nlsscrollerbreak"></span>
<div>
<strong>Topic 3</strong>
<p>Description here, Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod...
</p>
</div>
</div>
<script>
var n = new NlsScroller("scroll1");
n.width=300;
n.height=220;
n.setEffect(
new NlsEffSlide("type=shift,direction=up,speed=10,stepsnum=40")
);
//uncomment this lines for slide in effect
//n.setEffect(
// new NlsEffSlide("type=in,direction=up,speed=10,stepsnum=40")
//);
//uncomment this lines for slide out effect
//n.setEffect(
// new NlsEffSlide("type=out,direction=up,speed=10,stepsnum=40")
//);
n.setContentById("scrollerDiv");
n.render("scrollerDiv");
</script>
</body>
</html>
5.3. Fade Effect
Linear and cross fade effect.
Library:
nlsscroller_eff_fade.js
Object:
function NlsEffFade(conf)
Arguments:
-
conf, comma separated key value pair parameter.
Below are supported parameters:
- type, possible value:
- linear, current content fades out followed by next topic fades in.
- cross, current topic is fading out while next topic is fading in.
Default value is linear.
- speed, fading speed, in milliseconds
- stepsnum, number of steps to fades from start to finish, default value is 50.
Browsers compatibility :
Supported on all NlsScroller's compatible browsers except Opera. In Opera the effect will be defaulted to Continuous Scroll.
Example:
<html>
<head>
<title>Embeding NlsScroller</title>
<link rel="StyleSheet" href="nlsscroller/nlsscroller.css" type="text/css" />
<script language="javascript" src=" nlsscroller/nlsscroller.js"></script>
<script language="javascript" src=" nlsscroller/nlsscroller_eff_fade.js"></script>
</head>
<body>
<h1>Here is my first scroller</h1><br>
<div id="scrollerDiv" style="width:220px;height:220px;overflow:auto;">
<div>
<strong>Topic 1</strong>
<p>Description here, Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod...
</p>
</div>
<span class="nlsscrollerbreak"></span>
<div>
<strong>Topic 2</strong>
<p>Description here, Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod...
</p>
</div>
<span class="nlsscrollerbreak"></span>
<div>
<strong>Topic 3</strong>
<p>Description here, Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod...
</p>
</div>
</div>
<script>
var n = new NlsScroller("scroll1");
n.width=300;
n.height=220;
n.setEffect(new NlsEffFade("tyle=linear,speed=5,stepsnum=50"));
//uncomment this line for cross fade effect
//n.setEffect(new NlsEffFade("tyle=cross,speed=5,stepsnum=50"));
n.setContentById("scrollerDiv");
n.render("scrollerDiv");
</script>
</body>
</html>
5.4. Wipe Effect
Horizonal, vertical and alternate wipe effect.
Library:
nlsscroller_eff_wipe.js
Object:
function NlsEffWipe(conf)
Arguments:
-
conf, comma separated key value pair parameter.
Below are supported parameters:
- type, possible value vertical, horizontal, alternate.
Default value is alternate
- speed, wipe speed, in milliseconds. Default value is 5.
- stepsnum, number of steps to wipes from start to finish, default value is 100.
Browsers compatibility :
Supported on all NlsScroller's compatible browsers.
Example:
<html>
<head>
<title>Embeding NlsScroller</title>
<link rel="StyleSheet" href="nlsscroller/nlsscroller.css" type="text/css" />
<script language="javascript" src=" nlsscroller/nlsscroller.js"></script>
<script language="javascript" src=" nlsscroller/nlsscroller_eff_wipe.js"></script>
</head>
<body>
<h1>Here is my first scroller</h1><br>
<div id="scrollerDiv" style="width:220px;height:220px;overflow:auto;">
<div>
<strong>Topic 1</strong>
<p>Description here, Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod...
</p>
</div>
<span class="nlsscrollerbreak"></span>
<div>
<strong>Topic 2</strong>
<p>Description here, Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod...
</p>
</div>
<span class="nlsscrollerbreak"></span>
<div>
<strong>Topic 3</strong>
<p>Description here, Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod...
</p>
</div>
</div>
<script>
var n = new NlsScroller("scroll1");
n.width=300;
n.height=220;
n.setEffect(new NlsEffWipe("type=alternate,speed=5,stepsnum=100"));
//uncomment this line for vertical wipe effect
//n.setEffect(new NlsEffWipe("type=vertical,speed=5,stepsnum=100"));
//uncomment this line for horizontal wipe effect
//n.setEffect(new NlsEffWipe("type=horizontal,speed=5,stepsnum=100"));
n.setContentById("scrollerDiv");
n.render("scrollerDiv");
</script>
</body>
</html>
5.5. Blank Effect
Temporary blank before change to next topic.
Library:
nlsscroller_eff_blank.js
Object:
function NlsEffBlank(conf)
Arguments:
-
conf, comma separated key value pair parameter.
Below are supported parameters:
- speed, amount of times in milliseconds the scroller goes blank before displaying next topic.
Browsers compatibility :
Supported on all NlsScroller's compatible browsers.
Example:
<html>
<head>
<title>Embeding NlsScroller</title>
<link rel="StyleSheet" href="nlsscroller/nlsscroller.css" type="text/css" />
<script language="javascript" src=" nlsscroller/nlsscroller.js"></script>
<script language="javascript" src=" nlsscroller/nlsscroller_eff_blank.js"></script>
</head>
<body>
<h1>Here is my first scroller</h1><br>
<div id="scrollerDiv" style="width:220px;height:220px;overflow:auto;">
<div>
<strong>Topic 1</strong>
<p>Description here, Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod...
</p>
</div>
<span class="nlsscrollerbreak"></span>
<div>
<strong>Topic 2</strong>
<p>Description here, Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod...
</p>
</div>
<span class="nlsscrollerbreak"></span>
<div>
<strong>Topic 3</strong>
<p>Description here, Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod...
</p>
</div>
</div>
<script>
var n = new NlsScroller("scroll1");
n.width=300;
n.height=220;
n.setEffect(new NlsEffBlank("speed=600"));
n.setContentById("scrollerDiv");
n.render("scrollerDiv");
</script>
</body>
</html>
5.6. IE Visual Transition Effect
IE Transition filter effect.
Library:
nlsscroller_eff_ievs.js
Object:
function NlsEffIETrans(conf)
Arguments:
-
ieTransEff, array of IE Visual Transition Filter class.
You can define more that one transition class in this array.
Browsers compatibility :
Supported on IE 5.5+ only. On other browsers, the effect will be defaulted to Continuous Scroll.
Example:
<html>
<head>
<title>Embeding NlsScroller</title>
<link rel="StyleSheet" href="nlsscroller/nlsscroller.css" type="text/css" />
<script language="javascript" src=" nlsscroller/nlsscroller.js"></script>
<script language="javascript" src=" nlsscroller/nlsscroller_eff_ievs.js"></script>
</head>
<body>
<h1>Here is my first scroller</h1><br>
<div id="scrollerDiv" style="width:220px;height:220px;overflow:auto;">
<div>
<strong>Topic 1</strong>
<p>Description here, Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod...
</p>
</div>
<span class="nlsscrollerbreak"></span>
<div>
<strong>Topic 2</strong>
<p>Description here, Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod...
</p>
</div>
<span class="nlsscrollerbreak"></span>
<div>
<strong>Topic 3</strong>
<p>Description here, Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod...
</p>
</div>
</div>
<script>
var n = new NlsScroller("scroll1");
n.width=300;
n.height=220;
n.setEffect(
new NlsEffIETrans(
["progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.00,wipestyle=0,motion=forward);"]
)
);
//other transition effect
//n.setEffect(new NlsEffIETrans(["progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=CLOCK);"]));
//n.setEffect(new NlsEffIETrans(["progid:DXImageTransform.Microsoft.Fade(Overlap=1);"]));
//n.setEffect(new NlsEffIETrans(["progid:DXImageTransform.Microsoft.Stretch(stretchstyle=SPIN);"]));
//n.setEffect(new NlsEffIETrans(["progid:DXImageTransform.Microsoft.Iris(irisstyle=CIRCLE,motion=in);"]));
//n.setEffect(new NlsEffIETrans(["progid:DXImageTransform.Microsoft.Iris(irisstyle=CIRCLE,motion=in)","progid:DXImageTransform.Microsoft.Iris(irisstyle=STAR,motion=in)","progid:DXImageTransform.Microsoft.Spiral(GridSizeX=16,GridSizeY=16)","progid:DXImageTransform.Microsoft.Blinds( Bands=6,direction=up)", "progid:DXImageTransform.Microsoft.Wheel(spokes=4)"]));
n.setContentById("scrollerDiv");
n.render("scrollerDiv");
</script>
</body>
</html>
|