Anyone know how to produce this sliding effect?

Does anyone know how to produce the sliding effect found at the following website?

http://www.beyonce.com/

When you go to it, it slides outwards to the right. .. I guess so to indicate that it could be slide.

When you click on the arrow it slides inward to the left, so it hides.

What's also cool about it is the arrow changes direction to the right when it hides to the left.

OR,

maybe something like the sliding pop up window you first see when entering digitalpoint.com

 

Not sure on exactly what you need but I found this which is pretty cool: http://jsfiddle.net/nirajmchauhan/GPdFk/

 

CSS animation I think. I would do it with CSS3 animation. It's not available in IE yet though. I could do that.

 

That is pretty cool. Just curious if there is way to make it so that the panel shows on it's own, without the need to hover over it. Then it can hide when clicked on.

 

Yea it can be done with animating CSS keyframes. To be hidden on load, with delayed animation of, for example 1s, and after 1s to do the animation with duration of XX sec.

 

If you have knowledge about css then you can do it easily on your own. You can not make that easily.

 

Great thanks... I'm somewhat familiar with CSS keyframes, just don't know how to keep the last frame to stay at 500px width .. here's my sample code:

div
{
width:10px;
height:500px;
background:red;
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}


@keyframes myfirst
{
from {background:red;}
to {background:yellow;
width:500px;
}

I would like to keep the width at 500px once the animation is over but it goes back to 10px. Can anyone help?

 

Can you put it in a container?

#framecontainer {
width:500px;
}

I'm not overly familiar with keyframes, but it sounds like once the keyframe is finished it's resolving to a div limit of 10px so if it's in it's own div of 500px it may resolve back to that?

 

Wow nice effect, love that website.

 

Here is a clue, looking at the code one of the lines is


<!--[if lt IE 8]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->

wiz

 

And it uses a pretty sophisticated piece of javascript
http://admin.brightcove.com/js/BrightcoveExperiences.js

wiz

 

Or just stay away from iFrames, they're not good for mobile devices anyway which could impact your traffic severely. Am I correct in thinking the best way to do it would be to use objects rather than iFrames?

 

Ha, thanks! That was a quick fix.. in order for it to remain at 500px width the width shoul be set to 500px from the div class. The only thing that needed to change was the width property in the first keyframe. Example...

div
{
width:500px;
height:500px;
background:red;
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}


@keyframes myfirst
{
from {background:red; width:10px; }
to {background:yellow;
width:500px;
}

That kept the expanding animation still at 500px width. Now if I could only close it on click. Anyone know how to do that?

 

I think you need the .hide() effect in jQuery. Take a look at this: http://api.jquery.com/hide/

 

I think your need to hide option.
It is possible to JavaScript.