YUI 3.x Home -

YUI Library Examples: Animation: Animated Scrolling

Animation: Animated Scrolling

This demonstrates how to animate the scroll of an element.

Click the arrows to scroll the content up or down.

Animation Demo

scroll up scroll down

This an example of what you can do with the YUI Animation Utility.

Follow the instructions above to see the animation in action.

Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten. Waarom gebruiken we het? Het is al geruime tijd een bekend gegeven dat een lezer, tijdens het bekijken van de layout van een pagina, afgeleid wordt door de tekstuele inhoud. Het belangrijke punt van het gebruik van Lorem Ipsum is dat het uit een min of meer normale verdeling van letters bestaat, in tegenstelling tot "Hier uw tekst, hier uw tekst" wat het tot min of meer leesbaar nederlands maakt. Veel desktop publishing pakketten en web pagina editors gebruiken tegenwoordig Lorem Ipsum als hun standaard model tekst, en een zoekopdracht naar "lorem ipsum" ontsluit veel websites die nog in aanbouw zijn. Verscheidene versies hebben zich ontwikkeld in de loop van de jaren, soms per ongeluk soms expres (ingevoegde humor en dergelijke).

Setting up the HTML

First we add some HTML to animate. We'll add a bunch of arbitrary content to demonstrate the scroll effect.

  1. <div id="demo" class="yui-module">
  2. <div class="yui-hd">
  3. <h4>Animation Demo</h4>
  4. <span class="yui-scroll-controls">
  5. <a title="scroll up" class="yui-scrollup"><em>scroll up</em></a>
  6. <a title="scroll down" class="yui-scrolldown"><em>scroll down</em></a>
  7. </span>
  8. </div>
  9. <div class="yui-bd yui-scroll">
  10. <p>This an example of what you can do with the YUI Animation Utility.</p>
  11. <p><em>Follow the instructions above to see the animation in action.</em></p>
  12. <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.
  13. Waarom gebruiken we het?
  14.  
  15. Het is al geruime tijd een bekend gegeven dat een lezer, tijdens het bekijken van de layout van een pagina, afgeleid wordt door de tekstuele inhoud. Het belangrijke punt van het gebruik van Lorem Ipsum is dat het uit een min of meer normale verdeling van letters bestaat, in tegenstelling tot "Hier uw tekst, hier uw tekst" wat het tot min of meer leesbaar nederlands maakt. Veel desktop publishing pakketten en web pagina editors gebruiken tegenwoordig Lorem Ipsum als hun standaard model tekst, en een zoekopdracht naar "lorem ipsum" ontsluit veel websites die nog in aanbouw zijn. Verscheidene versies hebben zich ontwikkeld in de loop van de jaren, soms per ongeluk soms expres (ingevoegde humor en dergelijke).</p>
  16.  
  17. </div>
  18. </div>
<div id="demo" class="yui-module">
    <div class="yui-hd">
        <h4>Animation Demo</h4>
        <span class="yui-scroll-controls">
            <a title="scroll up" class="yui-scrollup"><em>scroll up</em></a>
            <a title="scroll down" class="yui-scrolldown"><em>scroll down</em></a>
        </span>
    </div>
    <div class="yui-bd yui-scroll">
        <p>This an example of what you can do with the YUI Animation Utility.</p>
        <p><em>Follow the instructions above to see the animation in action.</em></p>
        <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.
        Waarom gebruiken we het?
 
        Het is al geruime tijd een bekend gegeven dat een lezer, tijdens het bekijken van de layout van een pagina, afgeleid wordt door de tekstuele inhoud. Het belangrijke punt van het gebruik van Lorem Ipsum is dat het uit een min of meer normale verdeling van letters bestaat, in tegenstelling tot "Hier uw tekst, hier uw tekst" wat het tot min of meer leesbaar nederlands maakt. Veel desktop publishing pakketten en web pagina editors gebruiken tegenwoordig Lorem Ipsum als hun standaard model tekst, en een zoekopdracht naar "lorem ipsum" ontsluit veel websites die nog in aanbouw zijn. Verscheidene versies hebben zich ontwikkeld in de loop van de jaren, soms per ongeluk soms expres (ingevoegde humor en dergelijke).</p>
 
    </div>
</div>

Creating the Anim Instance

Now we create an instance of Y.Anim, passing it a configuration object that includes the node we wish to animate.

  1. var node = Y.get('#demo');
  2.  
  3. var anim = new Y.Anim({
  4. node: node,
  5. duration: 1.5,
  6. easing: Y.Easing.easeOut
  7. });
var node = Y.get('#demo');
 
var anim = new Y.Anim({
    node: node,
    duration: 1.5,
    easing: Y.Easing.easeOut
});

Changing Attributes

Depending on which control is clicked, we may be scrolling up or down, so an event handler will update the to attribute's scroll behavior before calling run.

  1. var onClick = function(e) {
  2. var y = node.get('offsetHeight');
  3. if (e.currentTarget.hasClass('yui-scrollup')) {
  4. y = 0 - y;
  5. }
  6.  
  7. anim.set('to', { scroll: [0, y + node.get('scrollTop')] });
  8. anim.run();
  9. };
var onClick = function(e) {
    var y = node.get('offsetHeight');
    if (e.currentTarget.hasClass('yui-scrollup')) {
        y = 0 - y;
    }
 
    anim.set('to', { scroll: [0, y + node.get('scrollTop')] });
    anim.run();
};

Running the Animation

Finally we add an event handler to run the animation. Both of our controls use the same handler, so we can use the Y.all method to assign the handler to both.

  1. Y.all('#demo .yui-hd a').on('click', onClick);
Y.all('#demo .yui-hd a').on('click', onClick);

Full Script Source

  1. YUI().use('anim', function(Y) {
  2. var node = Y.get('#demo .yui-bd');
  3. var anim = new Y.Anim({
  4. node: node,
  5. to: {
  6. scroll: function(node) {
  7. return [0, node.get('scrollTop') + node.get('offsetHeight')]
  8. }
  9. },
  10. easing: Y.Easing.easeOut
  11. });
  12.  
  13. var onClick = function(e) {
  14. var y = node.get('offsetHeight');
  15. if (e.currentTarget.hasClass('yui-scrollup')) {
  16. y = 0 - y;
  17. }
  18.  
  19. anim.set('to', { scroll: [0, y + node.get('scrollTop')] });
  20. anim.run();
  21. };
  22.  
  23. Y.all('#demo .yui-hd a').on('click', onClick);
  24. });
YUI().use('anim', function(Y) {
    var node = Y.get('#demo .yui-bd');
    var anim = new Y.Anim({
        node: node,
        to: {
            scroll: function(node) {
                return [0, node.get('scrollTop') + node.get('offsetHeight')]
            }
        },
        easing: Y.Easing.easeOut
    });
 
    var onClick = function(e) {
        var y = node.get('offsetHeight');
        if (e.currentTarget.hasClass('yui-scrollup')) {
            y = 0 - y;
        }
 
        anim.set('to', { scroll: [0, y + node.get('scrollTop')] });
        anim.run();
    };
 
    Y.all('#demo .yui-hd a').on('click', onClick);
});

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings