AddObject JavaScript Scroller - NlsScroller Professional Wipe Effect

Wipe Effect

NlsScroller Professional - Advanced HTML Scroller Control

Example below shows NlsScroller Pro with cross browsers wipe effect. You can configure the scroller to use horizontal, vertical or alternate wipe.

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=280;

                  n.height=180;

                  n.speed=5000;

                  n.setEffect(new NlsEffWipe("type=alternate,speed=5,stepsnum=100"));

                  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 5 seconds.