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.
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 .9s
ce 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.
Articles Liés
Aimez-vous ce que vous lisez?
Inscrivez-vous pour recevoir mes futurs tutoriels et démos directement dans votre boîte de réception.
Pas de spam, désabonnez-vous à tout moment.