Transcription
1. Bienvenue au cours !: Bonjour, je m'appelle Patti et je
vous souhaite la bienvenue dans mon cours de Skillshare. Je suis
spécialiste du marketing numérique et je travaille dans l'industrie depuis
plusieurs années maintenant, aidant les petites et grandes entreprises créer des sites Web
et à les conseiller sur les meilleures pratiques pour donner cela. utilise le meilleur parcours
de navigation. Dans ce cours, nous allons nous
concentrer sur l'utilisation d'animations et d'effets de défilement dans
la plateforme Editor X. Il s'agit d'une plateforme intuitive et
très bien conçue pour aider les utilisateurs comme
vous
à créer des sites Web
dans un très facile à utiliser. Ce site Web que
vous voyez devant vous est un exemple que
nous allons utiliser, qui figurait dans ma première classe de course de
montage. Donc, si vous ne vous êtes pas inscrit
ou n'y adhérez pas, je vous exhorte à le faire pour
que vous puissiez me suivre que nous traversons ce cours
particulier. Ce cours, nous
allons examiner l'utilisation de la parallaxe, révéler des caractéristiques, différentes
techniques d'animation et où
les placer et comment le faire
à l'aide du système intuitif que Wits a publié,
qui est Editor X. Ce que vous attendez. J'espère vraiment que vous vous joindrez à moi ce cours et j'ai
hâte de vous y voir. Et comme toujours, s'il
y a des questions,
une fois que vous vous êtes joint, hésitez pas à les placer dans la zone de discussion et je
serai sûr de revenir vers vous.
2. Comment rendre un site Web plus immersif: Ainsi, lorsqu'il s'agit de créer
un site Web immersif, l'
une des principales
attractions du spectateur ou de l'utilisateur est l'
immersion du site Web. Est-ce que cela permet
à l'utilisateur de se sentir transporté vers le produit ou le service
que vous proposez ? Et l'une des façons dont nous
pouvons souvent rendre le site Web plus immersif est d'inclure
beaucoup d'images, de vidéos, ajouter des effets, des animations, des animations
de
défilement sur le site Web qui aident à amplifier
cette expérience pour l'utilisateur.
3. Commencer avec l'image de Landing des héros: Donc, ce que nous allons faire, c'est
reprendre là où nous nous sommes arrêtés. Donc, si vous n'avez pas
déjà regardé ma première classe sur la création ce site Web d'
entreprise de touristes naturels. Je vous suggère de commencer par là,
puis de nous rejoindre ici où nous allons
être un peu plus avancés et ajouter de
belles animations, des effets de
défilement, qui
font vraiment ressortir le site Web
.
4. Les raisons des effets et des animations: Vous pouvez toujours considérer cette classe comme un module complémentaire
pour la précédente, où nous allons modifier
la configuration des images et
des textes que nous avons ici pour essayer de le
rendre plus immersif, en utilisant les
fonctionnalités avancées qu' Editor X a pour tenter de rendre l'expérience
plus immersive. L'une des premières choses que
nous allons faire est de rendre
cette image de héros,
qui est l'image de la
page de destination plus immersive et qui a un défilement
parallaxe. défilement Parallax
signifie essentiellement que ce conteneur, qui contient l'image
dedans, devient une fenêtre et que l'image
est placée derrière cela. Ainsi, lorsque vous faites défiler, vous pouvez faire avancer l'
image vers le haut et vers le bas par rapport au mouvement de défilement de la
souris.
5. Ajouter des effets et des animations: L'une des choses évidentes que nous
pouvons faire est que lorsque nous cliquons sur cette zone d'image et que nous nous
assurons que les images sont sélectionnées, nous pouvons accéder à l'onglet
Animation. Maintenant, cet onglet d'animation
aura plusieurs animations
à choisir. Et si vous survolez chacun d'eux, vous verrez comment cela donne un aperçu de ce à quoi
il pourrait ressembler. Maintenant, il s'agit évidemment d'animations
très basiques et elles peuvent servir un
but sur le site Web. Mais je n'ai pas l'impression qu'en
tant qu'image de héros d'atterrissage, elles ont le plus de sens. L'une des choses que
nous allons faire est ouvrir la colonne de l'inspecteur et nous pouvons nous
diriger vers certaines
des propriétés situées
à droite ici. Maintenant, tout d'abord,
nous voulons nous assurer que l'image elle-même est
fluide et qu'elle se trouve fluide et qu'elle se trouve dans ce conteneur, ce
qui est évidemment le cas. Et vous pouvez le constater en
regardant la zone bleue sous le menu Paramètres rapides où
il est indiqué section et image. Cela signifie que l'image est
placée dans ce conteneur. Sur la droite ici, vous verrez différentes
options. Nous voudrions peut-être
choisir la
capacité d'en faire
baisser un peu. Cela vous aidera à rendre le titre du
site Web plus important. Vous pouvez
choisir un arrière-plan, donc l'arrière-plan
sera superposé. Mais nous voulons le faire,
je l'ai déjà
mentionné ajouter quelques
effets de défilement à cette image principale. Pour ce faire, nous allons dans les paramètres. De telles choses
ouvriront une boîte contextuelle. Nous pouvons
déplacer ça si vous le souhaitez. Ici, vous avez la possibilité de
régler les paramètres de l'image, tels que le dégradé, la teinte, la luminosité, le
contraste, etc. Mais nous avons également la possibilité
d'avoir un comportement de défilement. Maintenant, c'est ce sur quoi
nous allons nous concentrer sur le comportement. Ici, vous avez deux options, votre parallaxe et
vous avez révélé. Si nous cliquons sur parallaxe, vous verrez comment l'image a
maintenant une perspective différente. En effet, Wix
comprend automatiquement la taille de l'image et la quantité de
mouvement qui peut se produire sur l'image
tout en conservant sa résolution. Maintenant, nous avons cliqué sur Parallaxe. Cliquons sur l'aperçu et
voyons à quoi cela ressemble. Maintenant, si je fais défiler vers le bas, vous verrez comment
l'image se déplace presque lentement derrière le
texte pendant que vous faites défiler vers le bas. Cela crée une expérience
immersive vraiment cool pour l'utilisateur. Et cela en
fait presque un effet 3D. Maintenant, j'aime vraiment ça. Et l'une des choses que nous
pouvons faire, c'est que je sais avant que nous ayons parlé
d'animations qui peuvent paraître un peu ennuyeuses. Nous allons ajouter un fondu. Donc, si nous cliquons sur le fondu et que nous allons le personnaliser. Maintenant, nous voulons qu'il soit
très rapide et rapide. Donc, plutôt
que de prendre 1,2 seconde, réduisons ça à
environ cinq secondes. Nous pouvons également
choisir d'avoir un retard, mais nous allons le
garder tel quel
parce que nous voulons qu'il
se charge instantanément. Maintenant, essayons ça. Voyez cette
animation très rapide dans le style. C'est exactement ce que nous recherchons. n'est qu'un exemple
d'utilisation de parallaxe. L'autre exemple que nous avons
est la fonctionnalité révélation. Maintenant, personnellement, j'ai vraiment
aimé la fonction révélation car elle vous permet d'
avoir une
image presque statique, surtout s'il y a différentes superpositions que vous voulez mettre en plus
de cette image. Faisons donc une nouvelle section et prenons un exemple et
voyons à quoi cela ressemble. Si nous venons ici et
ouvrons une nouvelle section. Nous allons donc ajouter une nouvelle section, une section
vide ici. Et nous allons en quelque sorte
ajouter quelques éléments ici. Nous pouvons rapidement accéder à
l'outil de composition. Cela nous donne de jolis préréglages. Nous pouvons toujours utiliser l'un d'entre eux, ou nous pouvons simplement ajouter rapidement et importer nos propres
objets là-dedans. Tout d'abord, ajoutons une mise
en page qui est une grille. Cela nous aide donc à
compartimenter la section. Encore une fois, j'ai abordé tout
cela dans ma vidéo précédente. Alors assurez-vous d'
y retourner si vous voulez en savoir plus sur le fonctionnement de toutes
ces fonctions, je mettrai un lien dans
la description de cette classe si vous
voulez aller que nous allons mettre dans une grille. Mettons donc une grille
ici et étirons c' est qu'elle couvre
toute la zone de section. Maintenant, d'un côté, nous
allons avoir du texte l'autre côté, nous
allons avoir une image. Vous pouvez désormais utiliser les
fonctions de révélation pour raconter une histoire. Par exemple, si nous voulions réutiliser l'une de ces
images d'ici. Par exemple, nous pourrions
utiliser le Royaume-Uni. Ce que nous allons
faire, c'est raconter une histoire sur le Royaume-Uni. Alors peut-être voulons-nous
maintenir les
pays mentionnés ou désolés, les villes ou les comtés ou les différents points
d'intérêt des touristes au
Royaume-Uni. Ce sera une histoire à raconter. Sur le côté gauche, nous
allons ajouter du texte. Nous pouvons le faire directement ici. Ou si vous avez des ressources
que vous avez préchargées, vous pouvez les récupérer à partir du dossier
des ressources enregistrées ici. Pour cela, nous allons juste
apporter un en-tête. Faisons donc glisser et déposer ceci ici et assurez-vous qu'
il est centré. Vous pouvez le faire en utilisant
les paramètres rapides ici. Alors, assurez-vous qu'il soit au centre. Et juste au
milieu. On y va. Appelons ce Royaume-Uni. Et ce texte est assez volumineux. Allons donc réduire ça à 70. Et étirez-le aussi
pour qu'il se déroule sur une seule ligne. Et puis assurez-vous
qu'il soit bien centré. C'est un. Nous pouvons choisir
l'arrière-plan pour que nous puissions évidemment en
faire n'importe quelle couleur .
En gardant à l'esprit. Nous allons avoir une photo
sur le côté droit, donc elle couvrira n'importe où l'
arrière-plan que nous choisirons. Nous pouvons choisir pour l'instant juste un
joli fond blanc vierge. Et sur la droite, nous allons
maintenant
inclure quelques emplacements. Si nous nous dirigeons vers
la section Médias, nous aurons quelques exemples
d'images que nous avons déjà. Allons donc ici. Et évidemment, ces
images reflètent Londres. Mais avec Wix, si vous avez la possibilité de
rechercher n'importe quel type d'image. Donc, si nous tapons simplement
au Royaume-Uni, rien ne se présente
qui apprend à tenir. Essayons Unsplash. On y va. Utilisons certaines
des images de ces gars. Désplash ou gratuitement des images haute
résolution que vous pouvez utiliser sur votre site Web
relativement, utilisons-nous cette image ici. Ajoutons donc ces deux pages ,
puis mettons cela à
droite. Et vous verrez apparaître cette boîte. Cela signifie que nous allons l'
attacher à cette section. Si nous cliquons ici et
que nous nous étirons, cela va maintenant remplir le
côté droit de la zone. Cool, ça a l'air assez joli. Mais ce que nous avons dit que nous voulions
faire, c'est raconter une histoire. Ce que nous allons faire
maintenant, c'est que nous allons
copier et coller
cette section de grille. C'est juste un copier-coller. Il s'agit donc d'un contrôle
C et V sous Windows ou de Commande C et V sur Mac. Ce que nous avons ici est maintenant deux des mêmes sections exactes. Ce que nous allons faire ici
est peut-être mentionné Londres comme premier emplacement. Montez cela
un peu plus haut et nous allons
ajouter un peu plus de texte. Il peut s'agir simplement d'
un texte de paragraphe. Maintenant, ça peut être n'importe quoi. Je ne vais pas
devenir trop fou dans ce tutoriel, mais vous pouvez évidemment choisir
ce que vous voulez inclure. Des fils si petits. Encore une fois, juste un exemple. Londres est la capitale
du Royaume-Uni qui abrite certains
des sites historiques
et architecturaux les plus
uniques du pays . Maintenant, ce que nous pouvons faire, c'est définir des animations pour cette section. Cliquez ici avec le bouton droit de la souris
et nous allons passer aux paramètres et nous
allons choisir Reveal. Maintenant, c'est important ici
parce que nous avons cliqué sur révéler. Nous pouvons également faire révéler le suivant
. Ce que l'on peut entendre maintenant
,
c'est qu' il place l'image derrière la fenêtre lorsque vous le faites
défiler, l'illusion est que le texte de
gauche se déplace pendant que l'image de droite reste. Donnons donc un aperçu.
Voyez à quoi ça ressemble. Ce qui est fait, c'est qu'on donne l'illusion que l'image est bloquée et immobile pendant que
le texte de gauche est en mouvement. Si je vais à la section, vous avez probablement remarqué qu'il y avait une sorte de
ligne blanche entre les deux. C'est parce que nous avons donné la section de
couleur de fond de blanc. Nous pouvons changer cela
et nous pouvons faire en sorte que cela n'ait pas de couleur d'arrière-plan. On ne peut toujours rien y aller. Et ça devrait
se débarrasser du bas. Et ensuite, faisons aussi
le top. Désolé, l'image, l'
opacité de l'image est là. Faisons en sorte qu'il n'ait
pas d'image d'arrière-plan. Et il en va de même pour celui-là. Donc, ils sont maintenant tous les deux
Contexte moins Là, on y va. De cette façon, vous obtenez l'illusion ce site en
particulier possède une image derrière lui. Maintenant, il s'agit d'une fonctionnalité vraiment
unique
que de nombreux sites Web intègrent de
nos jours. Parce que, comme vous pouvez l'imaginer, il est
parfois agréable de
se faire raconter une histoire. Auparavant, nous avions ces fonctions
où nous avions des effets de survol, où la couleur change en
fonction des mouvements de vol stationnaire, où nous avons maintenant la possibilité parcourir différentes sections car vous avez l'option ici
pour aller aussi profondément que vous le souhaitez. Aussi loin que vous le souhaitez. Il y a deux des
principales parallaxes et révéler
des animations de défilement qui peuvent vraiment rendre un
site Web cool. Une autre chose que
les entreprises aiment faire ou que les sites Web aiment avoir
est le défilement Azure. Différentes animations apparaissent
à différents moments. Si nous passons
à une page blanche. Donc, dans ce cas particulier,
nous utilisons des emplacements. Et réutilisons la même
section que Londres là-dedans. Alors, allez ici et nous allons nous concentrer
sur le Royaume-Uni. Maintenant, ce que nous allons
faire, c'est quand nous ajoutons
une section et que les gens
parcourent ce site Web. Voyez différentes animations
apparaître au fur et à mesure qu'elles défilent. L'une des façons dont nous pouvons le faire est d'ajouter une autre section. On y va. Faisons
une grille deux par deux. Cela nous
permet encore une fois d'avoir différents éléments
ou des atouts différents de différents
côtés. Et ajoutons une composition
préfabriquée. Et si nous utilisions quelque chose d'un
peu plus intéressant. Utilisons-le ici.
En ce moment, nous avons très bien, je dis une image précréée. Nous allons remplacer
cette image arrière quelque chose
d'un peu
plus intéressant. Mettons une personne qui travaille, se promène dans une forêt. De toute évidence,
la forêt existe également au Royaume-Uni. Nous ne sommes donc pas trop loin. Nous en avons un aperçu rapidement. Vous verrez comment cela se
trouve bien ici et
a évidemment commencé à changer le texte. Mais l'une des
choses que nous pouvons faire est y
ajouter quelques animations. Alors que vous faites défiler la
fenêtre contextuelle, dupliquons cela. Copiez et collez que
nous en avons deux. Et nous allons changer
cette image par autre chose. Donc, juste pour cela, nous allons utiliser
cette image de plage. Nous avons donc maintenant deux images
distinctes. Ce que nous pouvons faire, c'est
changer le point focal. Donc, maintenant, vous pouvez le voir
que nous commençons ici. Peut-être voulons-nous
utiliser plus de ce coin
inférieur droit
avec les coques. C'est comme une chose que nous
pourrions faire est d'ajouter des animations. Des animations comme celle-ci sont plutôt
belles si elles s'écoulent ou s'estompent. J'aime toujours
flotter en fonction parce que ça ressemble à ça. Il s'agit d'une animation de défilement
plus intuitive. Nous prenons donc le flotteur et nous
n'animons que la première fois. C'est très important car
la dernière chose que nous voulons, c'
est que chaque fois que quelqu'un charge
la page s'anime constamment, cela peut devenir assez
ennuyeux après un certain temps. Je
vais frapper par la gauche. Nous préférons donc l'animation. Ça a l'air bien. Nous pouvons faire la même chose
ici. Mais ce que nous allons faire, c'est déplacer cette
boîte vers la gauche. De cette façon, nous avons un peu de
différence entre les deux. Nous allons faire la même chose ici, mais cette fois, nous allons l'animer de droite. Flottez, personnalisez
Animate depuis la droite. Maintenant, si nous prévisualisons cela, vous verrez comment l'
animation
se produit uniquement lorsque vous arrivez
à la fenêtre d'affichage. Encore une fois, une très belle touche. Cela peut être fait pour
n'importe quoi sur Wix, n'importe quel élément ou ressource
que vous apportez, vous pouvez y ajouter des animations. Par exemple, nous allons mettre
quelques décorations ici. Nous pouvons mettre une belle image en
grande taille ici. Nous allons mettre
un texte ici, ce qui va dire qu' il y aura 50 % de rabais sur la
vente ou quelque chose comme ça. 50 % de livre d'ici le cinquième 2022. C'est un exemple que
nous avons ici. Nous allons mettre ça au
centre du conteneur. C'est donc une chose que j'ai faite
que je déplace et que j'ai maintenu les deux, c'est
qu'elle est placée
dans le conteneur. Cela signifie que vous pouvez voir la forme de base et la
mettre là-dedans. Copiez ceci, regroupez-les ensemble. Et
modifions rapidement ce texte pour qu'il
soit un peu meilleur
que ce qu'il fait. Donc, 50 % du livre d'ici
le 5 décembre. Maintenant, rendons ce
texte blanc car nous savons tous que le blanc
est plus beau sur le gris. Profit. Ce que nous voulons faire, c'est vouloir animer
ce groupe également. Nous pouvons donc faire de l'animation. Cliquez sur Flow in ou développez. Je vole peut-être. Encore une fois, des animations
sympas ici. Revenons à entrer. Bien, c'est plutôt professionnel. Nous pouvons en fait réduire
la longueur un peu plus courte. Nous n'
avons pas été trop tard. Laissez-moi encore 0,8
animer la première fois. Si nous recommençons ça. Voyez comment ça arrive lentement et
gentiment. Encore une fois, les animations et
vous pouvez ajouter des boutons, ils peuvent accéder aux
formulaires de contact et à des choses similaires. Ils ont donc eu des trucs vraiment utiles. Et c'est une petite
chose que vous pouvez utiliser pour améliorer l'expérience de votre
site Web.
6. et c'est un épinglage !: J'espère vraiment que vous avez trouvé ce cours très court utile. Je ne voulais
pas y aller trop longtemps. J'ai l'intention de réaliser chaque
semaine une série de vidéos de
cours de dix à 15 minutes qui se concentrent sur des
sujets spécifiques à l'aide de
l'éditeur X. La première a duré
environ une heure et demie parce que je voulais présenter le
pour vous en tant que nouvel utilisateur. Et cette fois-ci, il s'agissait se concentrer uniquement sur l'animation, défilement et les effets de parallaxe. La prochaine étape que nous allons faire
est celle de la gestion du contenu. Alors attendez prochaine classe où nous
allons essentiellement créer une
base de données de gestion de contenu remplie d' images pouvant être
placées sur des pages dynamiques. Ainsi, une fois que cette base de données
reçoit des images, elle est automatiquement ajoutée à certaines pages et pages dynamiques, ce qui peut s'avérer très utile, en particulier pour les utilisateurs qui
cherchent à créer des boutiques ou à des pages électroniques les sites de commerce où nouvelles images sont
diffusées pour des publicités ou des appareils ou
services personnalisés, qu'avez-vous ? Vous pouvez simplement modifier une base de données et elle est
envoyée à d'autres parties
du site Web sans avoir le processus fastidieux
d'ajouter
constamment des images à différentes pages et de vous perdre. en
perdant du temps à le faire. Alors,
attendez certainement cette prochaine vidéo. Et si vous avez
d'autres questions, veuillez les laisser dans
la section des questions. Et je vous serais reconnaissant si
vous pouviez revoir cette et la vidéo précédente si vous les
avez déjà regardées. Et j'ai hâte de
vous voir dans une classe à l'avenir.
Saad Bhatty, GeoTiktoker and UX/UI Designer
