Transition effect of website content

Asked

Viewed 800 times

1

I visited that website and liked the way the content moves, when it is clicked on More Articles or Hide List, I’d like to implement it on a website I’m developing. I’m having difficulties to find the plugin that does this, inspected the page and saw that already one mixpanel.2.js I just can’t find the documentation for it. Has anyone ever used it? Is there another way to do it?

jquery css plugin

1 answer

2


You can do using the library greensock. Very good for animation in js.

She’s used that way:

HTML

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="cont1">
    <a href="#" id="back">BACK</a>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis voluptate molestiae velit eius ullam recusandae aspernatur quae perspiciatis beatae facilis consequuntur soluta! Ipsam omnis impedit porro numquam neque aperiam atque.</p></div>


  <div class="cont2">
    <a href="#" id="more">MORE</a>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam animi officia consequatur quidem consequuntur? Hic similique veritatis porro. Cum quibusdam recusandae fuga beatae saepe deleniti iure sequi eveniet numquam veniam.</p></div>
</body>
</html>

CSS

.cont1{
  background-color: #ccc;
  padding: 10px;
  width: 300px;
}

.cont2{
  top: 0;
  width: 100%;
  background-color: #fff;
  position: absolute;
  height: 100%;
  padding: 30px;
}

Javascript com Greensock

$("#more").click(function(){
  TweenMax.to($(".cont2"), 1, {left: 300});
});
$("#back").click(function(){
  TweenMax.to($(".cont2"), 1, {left: 0});
});

I made this small example for you to see how it works. You can see the example here.

  • I’ll explain a little better than I have today. I have a call menu, when I click on it, another div called menufixo that’s like display:none stays display:block. Then blz, so I have to change my extrusion, right? My code http://jsfiddle.net/felipestoker/mHv7K/

  • 1

    So Felipe, according to what you sent I think it won’t change much not... In this case you just sent me I just changed the positioning of the right of your css, and added the greensock library to work with the effect. I made a little transition from right to left. If it’s a little different what you’re going to do the structure won’t even change mt no, what changes will be more in css, even then it would be little thing. , see how it looks: http://jsfiddle.net/mHv7K/3/

  • I managed to do it the way I wanted, excellent plugin. : D Just a doubt, I’m using it for when I click menu He plays a whole div I got right to right:300px, only that some elements are disappearing, it would be better to work with the width of the screen instead, know how to capture the screen size so that elements do not disappear?

  • catch screen size in javascript is window.innerWidth; e window.innerheight;

  • I’m using it like this: http://jsfiddle.net/felipestoker/eY9b3/ what happens instead of me using right:300px I think the ideal would be to touch the total width of the screen, not to hide any item, the process would then be? TweenMax.to($(".fundo1"), 0.5, {'window.innerWidth'-300px: "300px"});&#xA; or something like that?

  • I don’t understand very well what you want to do when you say "move the total width of the screen"... do you want to put the div to the width of the current screen? if that’s what your div has to have in css width: 100% , that’s it?

  • What happens is that the div fundo1 by default has 100% when I click on the item menu, opens a direct fixed menu that holds the div fundo1 to the left, when he pushes, he’s hiding some items, so I want the div fundo1 just change width, not to hide anything, so I wanted to calculate the total width, I just don’t know how.

  • Ahhh I think I got it. So your js will have to look something like this: http://jsfiddle.net/eY9b3/1/

  • I got it this way: TweenMax.to($(".fundo1"), 0.5, {width: ($(window).width() -320)}); :P

  • 1

    yes, it ends up being the same, window.innerWidth is the same thing as $(window).width(), but without using jQuery... in case you have put right the -320 remember to change around also in case you change its size in css at some point... in the case of $("#menuFixo").width() it already takes the size that is set in css

  • I did, your help with the plugin was essential. Hug! D

Show 6 more comments

Browser other questions tagged jquery css plugin

You are not signed in. Login or sign up in order to post.