jQuery Sliding login forum troubles

[ErraticFox]

Now I’ve looked up plenty of ways on how to do this and look at the scripts plenty of times, but I don’t understand how they hide the login forum (or whatever slides over). Though I’m barely any good with jQuery or JS. I’m moderately good with CSS, but not to this extent (if this is possible with CSS3).

Could someone show me some way of doing this? I don’t mean just plop a script down, I mean how I’d go about doing this. I’ve thought of ways, but the ways I’m thinking of seem way too complicated and I feel like I’m overthinking it. This is what I’ve been using as a reference or playing around with jQuery trying to do it.

And optionally my website for the actual full code (buttons at the top right): http://forum.leftalt.com

http://i.imgur.com/J0q5cYE.gif

http://codepen.io/ErraticFox/pen/qEOZgv

[Ilan Firsov]

What I’d do is put the form in a wrapper with overflow:hidden and fixed width
Then inside that wrapper create 2 forms (register and login) which positioned absolutely (or relative, could work too) and move them outside the view with left/right properties.
Then using JQuery animate those left/right properties to display and hide the form when needed.

You don’t need JQuery for this animation, you can use pure JS though you will have to create the animation manually with loops and such, and you can even use CSS transitions to animate the change in the properties while using JS only to change classes

I created this example which uses JQuery animate()
http://codepen.io/ilanf/pen/WbQGvL

[Author]

Posts