What is this and how did they do it?

[cmc1]

Our local school have updated their website and the intro page with the first six images looks very very clever :

the young lad with the guitar
the performing arts girl
the scientist
the batsman
The fencers
The girl toasting the marshmallows

What is this called, how did they do it and what did they use to create this effect?

http://www.tettenhallcollege.co.uk/

 

[afasoas]

It looks like it's playing a video sourced from vimeo.

 

[cmc1]

How did you find that out

 

[SteveSc]

Not sure the video was sourced from Vimeo, it is being hosted on Vimeo as you can see the link in the source code.

 

[SteveSc]

On the technique, I don't know how it is done but to me it looks a bit similar to the work that Julien Douvier does.

 

[CraigDHD]

The technique is called parallax, here's the first tutorial that came up on youtube...

View: https://www.youtube.com/watch?v=ZVrYyX3bHI8

 

[treeman]

It looks like a Cinemagraph to me, Google has loads of info, on how to do it or you can get software to do it for you.

 

[sunnyside_up]

There's a name for that.. can't remember what it is...

Whoops - forgot to hit enter and you all beat me to it.

 

[Harriers9]

That is a massive block of data in that source code. Could be a PITA if it needed editing

 

[Photodiva]

That is a massive block of data in that source code. Could be a PITA if it needed editing

There's a whole lot of style info at the top, why on earth its there and not in a separate file I don't know. I think the image effect is cool, though.

 

[dejongj]

Nothing much more than a bit of javascript jquery to use the video background which is indeed streaming from vimeo, on which they overlayed a whole bunch of other images with the ken burns effect still as a background.Then they've used more javascript for the carousel to load their stories, and more javascript to scroll in a parallel fashion and get the footer into view. Looks nice, stupidly heavy page load and an accessibility nightmare for anyone requiring assistive technologies.

But granted it looks very pretty.

 

[Ozei]

..... it is being hosted on Vimeo as you can see the link in the source code.

here's the link -
https://player.vimeo.com/external/1...515cc507d17e6343eeddb0efd8c1a0&profile_id=113" type="video/mp4

 

[SixToes]

It's called 2.5d animation, same effect that Sky used to use in their ads right? They are nicely done on the site you found.

 

[Ozei]

Whoever did the stills obviously planned it to be 2.5d from the start - otherwise they wouldn't have had the necessary complete background shots, e.g. cricket field without the batsman, hallway without the fencers, etc.

 

[neil_g]

Not designed very well for mobile, most of the content is off the edge.