How is HTML section sliding done

Question

I am curious on how is the sliding section on http://www.wearebeef.co.uk/ done? I have tried Googling but I cant really find a way how it is done.

Answer 1

I'm the Lead Web Developer at Beef, so I will try and give you a run down on what we did. Most of this you should be able to work out from the source code, so wont post too many examples.

Each panel is a <section>, all with a width of 90%. Each panel is then given a fixed position, and left value of 0 5%, 95% etc to space them out. We then have a class on the body stating which panel is open, and give the other two a width of 5% e.g:

body.home panel.work,
body.home panel.noise {
 width:5%;
}

And so on and so forth. We use JS to change the appropriate classes, and a CSS transition handles the actual animation. There is a backbone core as well that handles loading all the content into the panels, and jQuery fades them in. We built it in Middleman, so it pumps out a static html version, so should work without JS as well.

We encountered loads of bugs when building it, especially getting all the responsive stuff working, and scrolling on iPads etc. But have a good look though the source code to work out what we did.

Thanks for the interest though. Any more Q's just let us know.

Cheers!

Answer 2

Hmm, if you checked the website's source, there's a script file named application.js and it contains a function named cycleImages. When I searched for it, it led me in this site:

http://jquery.malsup.com/cycle/

-- It's different from the one in the site but I think it functions the same.

You could also go through the application.css in the code and you'll be able to see that the site implemented a CSS3 property: transition

You could see demos from css-tricks site or w3schools or... over here

http://www.css3.info/preview/css3-transitions/

There could be other tricks but you just have to go thoroughly in the site to see how it was done.