Animate the position of div elements with MooTools

Question

Animate the position of div elements with MooTools

Navigation

#1 by (2 votes)

1

How do I change the position of a div after page loading? That is, have two div's that after loading page one appears from the right and the other from the left, using MooTools.

The most similar example is this (but here with jQuery).

<style type="text/css">
  .home_visit_extend1
  {
    margin-top: -20px;
    position:absolute;
    width:100%;
    height:60px;
    background:#00B9F2;
  }
  .home_visit_extend2
  {
    margin-top: 40px;
    position:absolute;
    width:100%;
    height:500px;
    background: url(homevisit_bg.jpg);
  }
  .home_visit_extend3
  {
    margin-top: 500px;
    position:absolute;
    width:100%;
    height:auto;
    background:none;

  } 

  .home_visit_menu
  {
    width:900px;
    margin: 0 auto;
  }  
  .home_visit_content
  {
    width:900px;
    margin: 0 auto;
  }
  #hove_visit_content_left, #hove_visit_content_right {
    display: inline-block;    
    padding: 20px;   
  }  
  .home_visit_content_left_in
  {
    width:auto;
  }
  .hove_visit_content_right_in {
    width:450px;    
  }  

  .home_visit_icones{
    width:880px;
    margin: 0 auto;
    text-align:center;
  }
  .home_visit_icone_left{
    width:130px;
    height:130px;
    float: left;
    background:url(home_ico_circle_left.png) #FFFFFF;
    border-radius:89px; 
    border:6px solid #FFF;
    -moz-box-shadow: 0 0 22px #000000;
    -webkit-box-shadow: 0 0 22px #000000;
    box-shadow: 0 0 22px #000000;   
  }
  .home_visit_icone_middle{
    width:130px;
    height:130px; 
    margin:0 auto;
    display:inline-block;
    background:url(home_ico_circle_middle.png) #FFFFFF;
    border-radius:89px; 
    border:6px solid #FFF;
    -moz-box-shadow: 0 0 22px #000000;
    -webkit-box-shadow: 0 0 22px #000000;
    box-shadow: 0 0 22px #000000;   

  }
  .home_visit_icone_right{
    width:130px;
    height:130px;  
    float:right;
    background:url(home_ico_circle_right.png) #FFFFFF;
    border-radius:89px; 
    border:6px solid #FFF;
    -moz-box-shadow: 0 0 22px #000000;
    -webkit-box-shadow: 0 0 22px #000000;
    box-shadow: 0 0 22px #000000;   

  }

</style>

 <div class="home_visit_extend1">
    <div class="home_visit_menu">
           <ul>
                  <li cLass="home_visit_menu_li">
                       Home
                  </li>
                  <li cLass="home_visit_menu_li">
                  </li>
                  <li cLass="home_visit_menu_li">
                  </li>
                  <li cLass="home_visit_menu_li">
                  </li>
           </ul>
        <a class="menu_core_mini core_mini_auth" href="/login/return_url/64-Lw%3D%3D">
            <?php echo $this->translate('Sign In') ?>
        </a>
    </div>
</div>

<div class="home_visit_extend2">
    <div class="home_visit_content">
        <div id="hove_visit_content_left">
            <div id="hove_visit_content_left_in">
                <img src="homevisit_connection.png" border="0" style="margin-top:50px;" />
            </div>      
        </div>
        <div id="hove_visit_content_right">
        teste direito
        </div>
    </div>
</div>

<div class="home_visit_extend3">
    <div class="home_visit_icones">
        <div class="home_visit_icone_left">
        </div>
        <div class="home_visit_icone_middle">
        </div>
        <div class="home_visit_icone_right">
        </div>
    </div>
</div>

javascript mootools

asked by anonymous 27.10.2014 / 20:39

1 answer

Daylight Saving Time TFS I need to squeeze my layout when you open the keyboard

score 2 · Accepted Answer

To do this with MooTools you can do this:

var posts;
window.addEvent('domready', function () {
    posts = $$('.post');
})

window.addEvent('scroll', function (e) {
    var altura = window.getScroll().y;
    posts.each(function (post) {
        if (post.getPosition().y > altura + 200) return;
        post.setStyle('opacity', 1).tween('left', '0px');

    });
});

jsFiddle: link

Note also the CSS:

.post {
    text-align: center;
    opacity: 0;
    left: -1000px;
    position: relative;
}

When the page loads I cache all posts. // posts = $$('.post');

After each call to the scroll event I will check the position of the scroll and compare to the position of each post within the each () cycle.

    var altura = window.getScroll().y;
    posts.each(function (post) {
        if (post.getPosition().y > altura + 200) return;
        // aqui o código para as divs que devem estar visíveis
        // e/ou vão ser animadas
    });

If the condition occurs then I put the opacity back and do the animation with the tween.

post.setStyle('opacity', 1).tween('left', '0px');