T.V
- L'objectif de ce tutoriel est d'expliquer comment créer une campagne où les participants doivent identifier le plus rapidement possible l'élément principal d'une image (par exemple une ville, un objet, une personne, etc.) malgré un élément perturbateur (nuages, fumée ou eau) qui disparaît progressivement.
Démo
Voici une démo :
Comment ça marche ?
Si vous aimez le résultat et que vous aimeriez obtenir un effet similaire en utilisant de la CSS, commencez par créer une campagne de quiz ou de quiz chrono. Chaque question doit être illustrée par une image. Ensuite, afin de faire passer votre image du visible à l'invisible :
- Tout d'abord, collez un peu de CSS dans l'étape Apparence de votre campagne > Modifier l'apparence > Paramètres avancés > onglet CSS. En fonction de l'élément "perturbateur" que vous souhaitez utiliser, vous devrez ajouter un code différent à votre CSS. Vous trouverez les fichiers correspondants à la fin de cette page.
- Ensuite, pour y parvenir, il suffit de faire référence à ce code en utilisant du HTML pour s'assurer qu'il corresponde au code CSS que vous avez collé :
Des nuages qui s'estompent
Afin de faire disparaître les nuages, accédez au mode Source de votre question et collez le code suivant autour de votre image.
1) Collez le code suivant avant la balise <img> :
<div class="anim">
2) Collez le code suivant après la balise <img> :
<div class="cloud cloud-0"> </div>
<div class="cloud cloud-1"> </div>
<div class="cloud cloud-2"> </div>
<div class="cloud cloud-3"> </div>
<div class="cloud cloud-4"> </div>
<div class="cloud cloud-5"> </div>
<div class="cloud cloud-6"> </div>
<div class="cloud cloud-7"> </div>
</div>
Exemple :
De la fumée qui s'estompe
Afin de faire disparaître la fumée, accédez au mode Source de votre question et collez le code correspondant autour de votre image.
1) Collez le code suivant avant la balise <img> :
<div class="anim smoke">
2) Collez le code suivant après la balise <img> :
<div class="cloud cloud-0"> </div>
<div class="cloud cloud-1"> </div>
<div class="cloud cloud-2"> </div>
<div class="cloud cloud-3"> </div>
<div class="cloud cloud-4"> </div>
<div class="cloud cloud-5"> </div>
<div class="cloud cloud-6"> </div>
<div class="cloud cloud-7"> </div>
</div>
Exemple :
De l'eau qui disparaît
Afin de faire disparaître l'eau, vous utiliseriez quelque chose comme ceci avant le tag <img> :
<div class="vid"> <video autoplay="" loop="" muted="" poster="#"><source src="https://files.qualifio.com/library/demo/emails/2020/waves-240p.mp4" type="video/mp4" /></video>
Exemple :