-
Bonjour, je m'appelle Nivesh.
Je suis développeur Google Web Designer.
-
Dans cette vidéo, je vais vous montrer
-
comment créer
-
des animations parallaxes.
-
Faisons défiler la page :
les images au 1er plan et
-
à l'arrière-plan
-
se déplacent à des vitesses différentes
et créent l'illusion de profondeur.
-
Le composant "Parallaxe" envoie
les événements
-
de défilement de page
-
vers l'annonce.
-
Il anime alors les images.
-
Vous pouvez trouver d'autres exemples
d'animations parallaxes
-
sous "Fichier", "Créer depuis un modèle",
-
et en sélectionnant la catégorie
"Parallax for Display & Video 360".
-
Voici à quoi ressemble
l'animation parallaxe dans le navigateur.
-
Les images se déplacent
verticalement et horizontalement
-
lorsque nous faisons défiler la page.
-
Pour créer notre
propre animation parallaxe,
-
sous "Fichier",
sélectionnons "Nouveau".
-
L'environnement défini
doit être "Display & Video 360".
-
Pour ajouter
le composant parallaxe au projet,
-
Ouvrez
le panneau "Composants"
-
et faites glisser le composant "Parallaxe"
-
du dossier "Interaction"
vers l'espace de création.
-
Vous pouvez configurer ce composant
-
dans le panneau "Propriétés",
-
en cliquant sur la commande "Images"
-
ou en double-cliquant
sur le composant.
-
Commencez par ajouter des images
à votre animation parallaxe.
-
Pour cela, vous pouvez
faire glisser les fichiers
-
depuis le système de fichiers
vers l'espace de création
-
ou le panneau "Calques".
-
Ou vous pouvez cliquer
sur le bouton "+" du panneau
-
et sélectionner des images
depuis le système de fichiers.
-
Vous pouvez réorganiser les calques
-
par glisser-déposer
dans le panneau "Calques".
-
L'ordre des calques détermine
leur position respective,
-
les calques supérieurs étant devant.
-
Vous pouvez afficher
et masquer les images
-
en cliquant sur les vignettes
-
ou sur l'icône en forme d'œil
pour afficher
-
et masquer toutes les images.
-
Masquer un calque peut faciliter
le travail sur un autre.
-
Par exemple,
je vais masquer tous les calques.
-
Je garde le produit,
le texte et la grande feuille.
-
La boîte de dialogue des paramètres
contient les onglets
-
Début, Fin et Aperçu.
-
Vous pouvez configurer
l'animation parallaxe
-
en plaçant chaque calque
là où il doit apparaître
-
au début et à la fin de l'animation.
-
La position de départ
correspond au moment où
-
le composant commence à apparaître
sur une page Web.
-
Voilà, à ce moment-là.
-
Et la position de fin,
-
lorsque le composant
quitte la fenêtre d'affichage.
-
Configurons le début de l'animation.
-
Je masque à nouveau la feuille,
puis je place le produit
-
au centre à l'aide de la souris.
-
Vous pouvez aussi
utiliser les touches fléchées
-
en maintenant la touche Maj. enfoncée.
-
Les éléments sont déplacés
de 10 pixels à la fois.
-
Vous pouvez également saisir les données
dans le panneau "Propriétés du calque".
-
Et, pour la position de fin,
Je clique sur "Faire correspondre
-
à la position de départ"
pour copier les valeurs.
-
Repositionnons la feuille.
-
En maintenant la touche Maj. enfoncée,
je la fais glisser
-
à l'aide de la souris.
-
J'éloigne la feuille
en position de fin.
-
Sous "Propriétés avancées",
j'active "Afficher la couche fantôme".
-
Une image translucide de l'onglet sur lequel
-
vous ne travaillez pas s'affiche.
-
Les calques fantômes servent
juste de référence.
-
Ils n'apparaissent ni dans les aperçus,
-
ni dans le fichier publié.
Affichons l'aperçu.
-
Faites défiler pour observer
-
le comportement des calques visibles
sur un appareil mobile.
-
Cliquez sur l'onglet "Début" ou "Fin"
pour continuer à modifier le fichier.
-
Ici, je sélectionne
"Lissage à l'approche/l'éloignement".
-
Je change l'opacité du texte
qui passe de 0,3 à 1.
-
Et j'affiche de nouveau l'aperçu.
-
Vous pouvez définir
la dimension des calques.
-
Définissons la largeur
de la feuille sur 250 pixels.
-
Les proportions étant verrouillées,
-
la hauteur est automatiquement modifiée.
-
La taille spécifiée du calque
-
reste identique au début et à la fin.
-
Les tailles ne dépendent pas
de l'animation.
-
Si vous êtes satisfait du composant,
-
cliquez sur "Enregistrer".
-
Vous revenez
à l'interface standard de GWD.
-
Pour gagner du temps,
je reprends le fichier de modèle
-
dont l'animation est déjà configurée.
-
Dans le panneau "Propriétés",
je recherche la section
-
"Facteur de défilement".
-
Cette propriété ne sert qu'à l'affichage
dans l'espace de création GWD.
-
Modifiez cette valeur pour
voir à quoi ressemblerait l'annonce
-
avec d'autres facteurs de défilement.
-
Vous pouvez également afficher l'aperçu
de votre annonce dans le navigateur.
-
Dans ce cas,
la page d'aperçu simule la manière
-
dont l'annonce s'affiche sur une page Web,
-
avec assez de contenu
pour faire défiler l'écran
-
au-dessus et au-dessous du composant.
-
Vous obtenez un aperçu
de l'animation parallaxe
-
intégrée aux éléments de votre annonce,
-
par exemple les incitations à l'action
et les actions de sortie.
-
Merci de votre attention.
