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.

  1. Continuous Scroll
  2. Slide Effect
  3. Fade Effect
  4. Wipe Effect
  5. Blank Effect
  6. 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>