AddObject JavaScript Scroller - NlsScroller Professional Fade Effect

Fade Effect

NlsScroller Professional - Advanced HTML Scroller Control

Index

NOTE that in Opera and other browsers that doesn't supports opacity, the scroller will use default continuous scroll.

Example below shows NlsScroller with Fade Effect. There are 2 fade type supported:

Linear Fade, current content is fading out and then next content is fading in.
Cross Fade, new content is fading in while the current content is fading out.

Happy New Year Everyone!
Monday January 1st, 2007

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Click here for detail

Happy Valentine Everyone!
Wednesday, February 14th, 2007

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Click here for detail

Special Event 1
Thursday, March 15th, 2007

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Click here for detail

Special Event 2
Sunday, April 1st, 2007

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Click here for detail

Special Event 3
Tuesday, May 22nd, 2007

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Click here for detail

Below are scripts required to initialize the scroller on the left. No complicated javascript and the content are embeded directly in the page in a DIV element with id="scrollerDiv".


            <script>

                var n = new NlsScroller("scroll1");

              

                n.setContentById("scrollerDiv");

                n.width=300;

                n.height=200;

                n.speed=4000;

                n.setEffect(new NlsEffFade("type=linear,speed=20,stepsnum=20"));

                n.render("scrollerDiv");  

            </script>

About the example:

The example above is configured to scroll automatically. It is possible to configure the scroller to scroll manually by default. You can also click on the mode button to toggle the scroll mode to auto/manual.
It is possible to show the toolbar.
Content/topic is changed every 3 seconds.