Geek Answers Handbook

How to create web animations using video - for example apple.com/ipad -air

I'm working on a project that would like to have a video image, like what Apple is doing on its iPad Air page.

Visit apple.com/ipad -air and you will understand what I mean. IPad moves through each "slide" on a web page.

My question is this: how can you make these animations work? I looked at their code and saw that the iPad was just a big .mp4 file. It seems that he stops at certain key frames. Are there any jquery libraries that could help me?

In addition, I want to be able to support older browsers. How can I detect browsers and be able to support older ones?

Thanks in advance!

+4
source share
4 answers

Use onepage-scroll and set CSS3 effects using callback functions .

Additional Information:

Demo
OnePageScroll.js: Creating an Apple iPhone 5S Website

+4
source

, , , - mp4, CSS3 . , Chrome Dev, , "" (, Design, Performance, Wireless ..). , HTML-:

<section class="scene active" id="design" data-track-visitor-engagement="design">
            <div class="scene-content">
                <img class="hero-img centered" src="http://images.apple.com/ipad-air/overview/images/desktop/design_hero_2x.jpg" width="498" height="640" alt="">
                <div class="container centered fade-slide">
                    <h1><img src="http://images.apple.com/ipad-air/overview/images/desktop/design_title_2x.png" width="325" height="220" alt="All-new design. A ton of advanced technology. In just one pound."></h1>
                    <p class="intro">You have to hold iPad&nbsp;Air to believe it. It’s just 7.5 millimeters thin and weighs just one pound. The stunning Retina display sits inside thinner bezels, so all you see is your content. And an incredible amount of power lies inside the sleek enclosure. So you can do so much more. With so much&nbsp;less.</p>
                    <p class="intro"><a class="more" href="/ipad-air/design/" onclick="s_objectID=&quot;http://www.apple.com/ipad-air/design/_2&quot;;return this.s_oc?this.s_oc(e):true">Learn more about design</a></p>
                </div>
                <ul class="tiles centered fade-slide">
                    <li><img src="http://images.apple.com/ipad-air/overview/images/desktop/design_details_weight_2x.png" width="100" height="100" alt="1 pound"></li>
                    <li><img src="http://images.apple.com/ipad-air/overview/images/desktop/design_details_lighter_2x.png" width="100" height="100" alt="28% lighter"></li>
                    <li><img src="http://images.apple.com/ipad-air/overview/images/desktop/design_details_thinner_2x.png" width="100" height="100" alt="20% thinner"></li>
                </ul>
            </div>
        </section>

, .fade-slide -webkit-transition: CSS. , mp4. CSS

, , - javascript/jQuery ( , Apple, , , , , ).

, , :).

+1

, , Apple HTML5, javascript.

JPG.

, , - Apple JPEG, , JPEG , , , . JSON , , "" Javascript.

()

, , , , - , - Apple. , :

, Apple - . , , .

, .

0

<video> popcorn.js. . javascript css3 <video> .

​​ ( ) greensock. Greensock , , .

- , .

lib, greensock

http://johnpolacek.imtqy.com/superscrollorama/

here is an example of using dual-channel video control via popcorn

http://client.heliozilla.com/aer/demo_06.html

0
source

More articles:


All Articles