Défilement d’une page avec animations

Pete R. a présenté son Faire défiler une page dans le monde il y a quelques semaines.

Il a fait un excellent travail en reproduisant l’effet de défilement d’une page utilisé sur les nouveaux sites Web Apple iPhone 5S / 5C.

J’ai jeté un coup d’œil aux animations dans mon précédent post – Côté Apple iPhone 5C déconstruit

Aujourd’hui, je veux vous montrer de manière plus détaillée comment ces animations ont été créées.

Voir la démo →Telecharger des fichiers ↓

Afficher l’animation lors du chargement de la page

Cette animation particulière n’est pas utilisée sur les pages Apple iPhone, mais vous pouvez toujours l’utiliser dans vos projets et apprendre à combiner JavaScript et CSS3 peut aider vos projets.

HTML

<body class="loading">
    <section>
        ...
    </section>
</body>

CSS

.loading {
    background: url('../img/ico_loading.gif') no-repeat center center;
}
section {
    opacity: 0;
    -webkit-transition:opacity .6s;
    -moz-transition:opacity .6s;
    -o-transition:opacity .6s;
    transition: opacity .6s;
}
.loaded section {
    opacity: 1;
}

jQuery

$(window).load(function() {
    // start up after 2sec no matter what
    window.setTimeout(function(){
        $('body').removeClass("loading").addClass('loaded');
    }, 2000);
});

Nous supprimerons le .loading Classe du corps après le chargement de la page et retarde le chargement de la page de 2 secondes.

Attention

Pour utiliser le code ci-dessus sur un projet réel, vous devrez également inclure des styles de secours pour les utilisateurs non-JavaScript. Utilisez le .no-js Classe qui sera rendue sur la balise HTML pour appliquer des styles no-JS.

Afficher l’animation

C’est un effet vraiment cool et je peux voir le potentiel qu’il peut être utilisé sur beaucoup de projets. Alignez simplement vos images côte à côte et utilisez-les translate3d Pour modifier sa position de départ, réinitialisez la valeur translate3d à 0.

#revealAnim .images-container img {
    -webkit-transition: -webkit-transform .6s .9s;
    -moz-transition: -moz-transform .6s .9s;
    transition: transform .6s .9s;
}
#revealAnim .images-container .back { z-index:2;
    -webkit-transform:translate3d(-40%, 0, 0);
       -moz-transform:translate3d(-40%, 0, 0);
            transform:translate3d(-40%, 0, 0);
}
#revealAnim .images-container .front {
    -webkit-transform:translate3d(61.6%, 0, 0);
       -moz-transform:translate3d(61.6%, 0, 0);
            transform:translate3d(61.6%, 0, 0);
}
#revealAnim .images-container .side {
    -webkit-transform:translate3d(-338%, 0, 0);
       -moz-transform:translate3d(-338%, 0, 0);
            transform:translate3d(-338%, 0, 0);
}
.viewing-page-2 #revealAnim .images-container img {
    -webkit-transform: translate3d(0, 0, 0) !important;
    -moz-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
}

Comme vous pouvez le voir; L’animation commence une fois les transitions de page terminées. le .9s est le transition delay et aussi la longueur de l’animation de la page.

Animation sans délai

La troisième diapositive de la démonstration déplace certains éléments dans la vue lorsque la page s’anime sur place.

Il n’y a pas de retard dans ces animations et tout s’emboîte .9sce qui en fait un effet magnifique et sophistiqué.

J’ai utilisé des transitions et des méthodes de transformation similaires pour révéler l’animation. Le CSS n’a pas besoin d’être répété ici.

Animer les éléments qui se chevauchent

C’est la partie la plus cool de la déconstruction. Déplacer des éléments d’une diapositive à une autre et les modifier offset crée un effet très perceptible.

HTML

<section id="betweenSlidesAnimEnd">
    <div class="fake-content">
        <div class="images-container">
            <img class="green" src="img/img_green.png" />
        </div>
    </div>
    <div class="section-content">
        <div class="copy-container">
            ...
    </div>
    <div class="images-container">
        <img class="front2" src="img/img_iphone.png" />
    </div>
    </div>
</section>

le .images-container a une photo avec deux iPhones côte à côte et l’iPhone vert est dans un conteneur séparé .fake-content. Nous avons besoin de ces deux conteneurs séparés pour déplacer les deux images indépendamment.

One Page Scroll rend une classe sur le corps qui montre la page sur laquelle vous vous trouvez actuellement. Nous utiliserons .viewing-page-3 pour changer le décalage du .fake-content et passez à la vue à partir de la page 3.

.viewing-page-3 .fake-content {
    -webkit-transform: translate3d(0, -100%, 0) !important;
    -moz-transform: translate3d(0, -100%, 0) !important;
    transform: translate3d(0, -100%, 0) !important;
}
.viewing-page-3 .fake-content .green {
    -webkit-transform: translate3d(0, 160px, 0) !important;
    -moz-transform: translate3d(0, 160px, 0) !important;
    transform: translate3d(0, 160px, 0) !important; 
}

Cela montre l’iPhone vert dans la vue de la page 3, même s’il fait partie du balisage de la page 4. Cool non?

.viewing-page-4 .fake-content,
.viewing-page-4 .fake-content .green {
    -webkit-transform: translate3d(0, 0, 0) !important;
    -moz-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
}

Puis on réinitialise ça translate3d Valeur à 0 pour que tout soit animé dans sa position standard.

Conclusion

J’espère que cela et mon prédécesseur Déconstruction latérale de l’iPhone 5C vous aidera à comprendre CSS transitions et transforms.

Cet article vous a-t-il été utile? Envisagez-vous de créer un site Web à défilement d’une page? Partagez vos créations et vos commentaires dans les commentaires ci-dessous.

Vous pouvez créer un effet similaire en utilisant ScrollMagic. Commencez à apprendre ScrollMagic dès aujourd’hui.

Voir la démo →Telecharger des fichiers ↓

Articles Liés