How is this effect done?

http://www.sky.com/

You will see a shot from the latest Jurassic Park. In the midground there is a transparent sky logo with a parallax effect. What I am trying to work out is what it is (png, font, svg...?) and how does it manage to have that deformation effect near the edges.

Could anyone tell me which code and media elements (fonts, images, code, etc) make this work as I would like to recreate the effect in my localhost.

thanks in advance
badwolfffAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Don ThomsonCommented:
What you are asking is to give you the code or process for designing this home page.  

I suspect that the person who put that homepage together - did not do so in just a couple of minutes. I'm also sure he/she was well paid for the design.

Anything like this homepage design has an inherent copyright.  

Experts exchange has very strict policy against about doing what you are asking.
0
Julian HansenCommented:
The background is made up of a composite of PNG imagees. Right click on the background in various spots and select view background image to see what the images look like.

The "scene shifting" effect is achieved by animating the images at different speeds as you scroll up giving the impression of the background being at different depths.

That is it in a nutshell - if you are asking for code then my advice is to look at the source and see what they are doing and post back with specific questions. To write a dissertation on the effect in its entirety is beyond the scope of an EE type question (at least for me). If you are not able to follow the code (or at least part of it) then probably need to do some research and post back. No offense intended - just stating the facts here.
0
badwolfffAuthor Commented:
I think you guys got me wrong. I only meant the word sky and how it was made up and how that effect was achieved. The rest of the multi layered parallax is pretty straightforward. I just wanted to know if the "sky" was a png with some semi-transparent effect in photoshop or a font with some special css3 style that I don't know of. I can achieve everything on that page but the only thing that perplexes me is that one bit there as it is really well done. Sometimes new fashionable pieces of code come out and it is difficult to keep track. See? That's all I really wanted to know :)
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Julian HansenCommented:
It uses a canvas and
<canvas width="1600" height="489" style="width: 1600px; height: 489px;" class="hero-canvas"></canvas>

Open in new window

then gets some JSON data from the server
{

    "metadata" :
    {
        "formatVersion" : 3.1,
        "sourceFile"    : "sky_logo_90.obj",
        "generatedBy"   : "OBJConverter",
        "vertices"      : 14044,
        "faces"         : 28076,
        "normals"       : 0,
        "uvs"           : 81572,
        "materials"     : 1
    },

    "materials": [	{
	"DbgColor" : 15658734,
	"DbgIndex" : 0,
	"DbgName" : "Glass"
	}],

    "buffers": "sky_logo_90.bin"

}

Open in new window

Will investigate more and see if I can isolate the rest.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
badwolfffAuthor Commented:
By the way Julian, that .obj they are using do you think it is a 3d model rendered on the webpage using canvas?
0
Julian HansenCommented:
It looks like it is a three.js rendered object
http://threejs.org/
https://en.wikipedia.org/wiki/Three.js
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.