T.V
- The purpose of this tutorial is to explain how to create a campaign where the participants have to identify as quickly as possible the main element in a picture (e.g. a city, an object, a person, etc.) despite a disturbing element (clouds, smoke or water) that gradually disappears.
Demo
Here is a demo:
How it works
If you like how it looks and would love to use a similar effect using CSS, start by creating a quiz or a chrono quiz campaign. Each question should be illustrated with an image. Then, in order to fade your image from visible to invisible:
- First, paste some CSS in the Look and feel step of your campaign > Change look and feel > Advanced settings > CSS tab. Depending on the 'disturbing element' you want to use, you'll have to add a different code to your CSS. You'll find the related files at the end of this page.
- Then, to make it happen, you can just refer to it using HTML to make sure it takes the CSS code you pasted in:
Clouds fading out
In order to fade clouds out, access the Source mode of your question and paste the following code around your image.
1) Paste the following code before the <img> tag:
<div class="anim">
2) Paste the following code after the <img> tag:
<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>
Example:
Smoke fading out
In order to fade smoke out, access the Source mode of your question and paste the corresponding code around your image.
1) Paste the following code before the <img> tag:
<div class="anim smoke">
2) Paste the following code after the <img> tag:
<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>
Example:
Water fading out
In order to fade water out, you'd use something like this before the <img> tag:
<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>
Example:
