A simple-to-follow information on making an interactive coloring recreation in your emails (code pattern included) — Stripo.e mail
Do you know that April ninth is Nationwide Unicorn Day? It’s a whimsical and magical celebration of unicorns, legendary creatures typically related to purity, grace, and enchantment. Not too long ago, we made a particular interactive publication for this vacation, during which we carried out a recreation the place recipients want to paint a unicorn.
Folks actually preferred the sport, and lots of have been concerned with creating such stunning, distinctive interactive content material for emails. Nicely, you requested — we answered. On this information, we are going to present you create this recreation and provide the full code for it, which you’ll experiment with in your personal e mail newsletters.
You should utilize this recreation to make your e mail extra partaking and dedicate it to varied events. For instance, you can provide low cost promo codes for coloring the image or current recipients with unique presents, primarily based on their latest exercise, after ending the sport.
The sport creation course of may be roughly divided into 4 phases: the “moon” background picture, the palette, different pictures, and click on zones. We’ll undergo every stage intimately, and on the finish, you’ll have your personal full-fledged recreation you could add to your e mail. With out additional ado, let’s get began.
Stage 1. The “moon” background picture
The “coronary heart” of the sport is pictures. To begin with, let’s put together the preliminary “moon” picture. We’ll coloration it otherwise than different components of the picture as a result of that is the very first layer. For the “moon,” we put together a picture with clean area as an alternative of the moon and a background round it that matches the background of the e-mail (in our case, it’s white).
Vital observe: The dimensions of our pictures has been doubled. Consequently, for a recreation that’s 420px huge, we made the picture 840px huge.
Subsequent, we uploaded the created picture into the template and, after that, inserted the HTML block into the empty construction so as to add the next code:
<fashion amp-custom>
.container-image {
place: relative;
width: 410px;
top: 410px;
margin: 0 auto;
}
.container-image div {
place: absolute;
}
.container-image span {
show: block;
width: 100%;
top: 100%;
cursor: pointer;
background-repeat: no-repeat;
background-position: 0 0;
background-size: cowl;
}
.btn-color-1 span {
background-color: #ffe14d;
}
.btn-color-2 span {
background-color: #c9a3c7;
}
.btn-color-3 span {
background-color: #ff5cd9;
}
.btn-color-4 span {
background-color: #4099d4;
}
.layer-1 {
width: 100%;
top: 100%;
left: 0;
prime: 0;
}
.layer-1 span {
background-image: url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_248acda4694b320e2c1fa70ebbbeec3aac0ca1fb50efddf513440d327edb6bf5/pictures/layer0102.png);
}
.colours ul {
list-style-type: none;
padding: 0;
margin: 0;
width: 100%;
text-align: heart;
show: flex;
justify-content: heart;
align-items: heart;
}
.colours li {
show: inline-block;
margin: 0 5px;
}
.colours li:first-child {
margin-right: 8px;
}
.colours li span {
show: inline-block;
width: 42px;
top: 42px;
border-radius: 50%;
cursor: pointer;
border: 2px stable #fff;
}
.colours li .energetic {
border: 2px stable #333;
}
@media solely display and (max-width: 600px) {
.container-image {
width: 250px;
top: 250px;
}
}
</fashion>
<div class="container-image">
<div class="layer-1"><span></span></div>
</div>
<div class="colours">
<ul>
<li class="btn-color-1"><span class="energetic"></span></li>
<li class="btn-color-2"><span></span></li>
<li class="btn-color-3"><span></span></li>
<li class="btn-color-4"><span></span></li>
</ul>
</div>
The container-image class is liable for the scale of the sport. In our case, the sport is 410 by 410 pixels within the desktop model and 250 by 250 pixels within the cellular model. You may change sizes right here in the event you want totally different ones.
Contained in the container-image block, there will probably be blocks with the courses layer-1, layer-2, layer-3, and so on., which we are going to place in the suitable spots utilizing absolute positioning. In these blocks, there’s a span tag with pictures.
The block with the colours class is a coloration palette. The types already point out colours for every button btn-color-1, btn-color-2, and so on., so you possibly can change them with your personal.
As soon as the code is inserted, you’ll see a crescent moon picture and coloration panel.
Stage 2. The palette
The subsequent step is to make the colour palette clickable and present which coloration is chosen. To grasp what coloration is chosen, we are going to create a “coloration” variable, and if you click on on every ingredient of the palette, we are going to write the worth 1, 2, 3, and so on., into it.
With the intention to make it, change the block with the palette to the next code:
<div class="colours">
<ul>
<li class="btn-color-1"><span class="energetic" [class]="coloration == 1 || !coloration ? 'energetic' : '' " function="button" tabindex="1" on="faucet:AMP.setState({coloration: 1})"></span></li>
<li class="btn-color-2"><span [class]="coloration == 2 ? 'energetic' : '' " function="button" tabindex="1" on="faucet:AMP.setState({coloration: 2})"></span></li>
<li class="btn-color-3"><span [class]="coloration == 3 ? 'energetic' : '' " function="button" tabindex="1" on="faucet:AMP.setState({coloration: 3})"></span></li>
<li class="btn-color-4"><span [class]="coloration == 4 ? 'energetic' : '' " function="button" tabindex="1" on="faucet:AMP.setState({coloration: 4})"></span></li>
</ul>
</div>
Consequently, you’ll change this:
To obtain the code like this:
On this code, with a purpose to make the weather clickable, we add the next attributes: <span function=”button” tabindex=”1″ on=”faucet:AMP.setState({coloration: 1})”>
Let’s contemplate each intimately:
- function=”button” — a required attribute that should be added together with on=”faucet:…”, it modifications the function of the ingredient;
- tabindex=”1″ — required attribute, units the order during which focus is obtained when transferring between parts utilizing the Tab key. The transition happens from a decrease worth to a bigger one, for instance, from 1 to 2, then to three, and so forth;
- on=”faucet:” — click on occasion handler;
- AMP.setState({ coloration: 1 }) — a way that means that you can create and alter variables and their worth.
To point out the energetic ingredient, we created the “energetic” class, and we added it to the ingredient that the person clicks on.
The primary coloration is chosen by default, so it already has the “energetic” class assigned, and we added the next verify to it:
[class]=”coloration == 1 || !coloration ? ‘energetic’ : ” “
It is a shorthand notation of the situation, actually that means that if the colour variable is the same as 1 or if it has no worth, then the category will probably be ‘energetic’ in any other case there isn’t any class.
[class] — the category attribute is written in sq. brackets as a result of that is how AMP specifies attributes whose values will change dynamically.
For all different colours, we add a shortened situation: if the worth of the colour variable is the same as the colour quantity so as (2, 3, 4, and so on.), then we add the ‘energetic’ class:
[class]=”coloration == 2 ? ‘energetic’ : ” “
The subsequent step will probably be portray the “moon.” To do that, we add the already acquainted attributes to the span tag in a block with the layer-1 class:
<div class="layer-1">
<span function="button" tabindex="1" [class]="layer1" on="faucet:AMP.setState({layer1: coloration ? 'coloration'+coloration : 'color1'})"></span>
</div>
That is what the code seems to be like earlier than pasting:
And that is the code after pasting:
- [class]=”layer1″ — we substituted the category title from the layer1 variable;
- on=”faucet:AMP.setState({layer1: coloration ? ‘coloration’+coloration : ‘color1’})” — when clicked, a layer1 variable is created during which, if the colour variable exists, ‘coloration’ is written plus the worth of the variable (1, 2, 3). The result’s the category ‘color1’, ‘color2’, and so on. (if there isn’t any coloration variable but, the category will probably be ‘color1’).
After that, we add the code with the required types:
.layer-1 .color1 {
background-color: #ffe14d;
}
.layer-1 .color2 {
background-color: #c9a3c7;
}
.layer-1 .color3 {
background-color: #ff5cd9;
}
.layer-1 .color4 {
background-color: #4099d4;
}
Stage 3. Different pictures
The primary layer can now be painted over. Subsequent, you should put together the picture for the subsequent layer. We divided the remainder of the image into items that will probably be painted over and made sprites for every bit with all of the attainable colours that will probably be accessible (and which might be within the palette).
Vital observe: The gap between items of various colours should be the identical.
Listed below are the sources of the photographs for the sport:
Subsequent, you should add layer 2 and three beneath the block with the category layer-1 and the corresponding types for them. The layer code seems to be like this:
<div class="layer-2"><span function="button" tabindex="2" [class]="layer2" on="faucet:AMP.setState({layer2: coloration ? 'coloration'+coloration : 'color1'})"></span></div>
<div class="layer-3"><span [class]="layer3"></span></div>
Whereas the fashion code seems to be like this:
.layer-2 {
width: 29.51%;
top: 21.46%;
left: 15.37%;
prime: 14.39%;
}
.layer-2 span {
background-image: url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_f61060edca5f418873af71474512724771bf46977f7bb9ac2b4e11c4c017d541/pictures/layer02.png);
}
.layer-3 {
width: 17.56%;
top: 36.34%;
left: 12.68%;
prime: 46.34%;
}
.layer-3 span {
background-image: url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_248acda4694b320e2c1fa70ebbbeec3aac0ca1fb50efddf513440d327edb6bf5/pictures/layer03_uXc.png);
}
.container-image span.color1 {
background-position: 25% 0;
}
.container-image span.color2 {
background-position: 50% 0;
}
.container-image span.color3 {
background-position: 75% 0;
}
.container-image span.color4 {
background-position: 100% 0;
}
Coding tip: To put the items of the picture in the suitable locations, you possibly can assign a background picture for the mother or father block with the total picture. Within the console preview (F12 for Home windows), transfer the piece to the specified place, then copy this worth and place it within the code. When all of the items are positioned, take away this fashion from the picture.
Types are wanted as we set the block sizes and organize the images of their locations with them. All values are in % so that you just don’t want to alter them on cellular. Additionally, for every coloration, a mode has been added that exhibits the a part of the image equivalent to this coloration.
The best way to calculate all the things in %:
For instance, let’s take a “star” image. This image helps present the way you calculate all the things correctly.
First, you should decide the size in pixels, which is the true dimension of the image. On this case, the scale is 1210px by 175px. Nevertheless, now we have 5 stars in a row, and we’d like the width of 1, so we divide the width by 5. As well as, all our pictures are twice as giant as crucial, so we additionally divide these dimensions by 2.
Complete width: 1210/5 = 242/2 = 121px, top 175/2 = 87.5px.
Now you should convert all the things to %. The width of our block with the sport is 410px is 100%, the width of the picture is 121px is X.
Consequently, we get:
X = 121*100/410 = 29.5%
We do the identical with top:
X = 87.5*100/410 = 21.34%
The values “left” and “prime” can instantly be set as percentages.
Stage 4. Click on zones
Now, you possibly can change colours and paint over the “moon” and “stars” however not the “tail.” The press zone for pictures is rectangular, so it overlaps among the different pictures and appears like this:
Because the “stars” don’t overlap different photos, we positioned a click on on the picture itself, however the “tail” overlaps a part of the “moon,” so it’s crucial so as to add extra parts for an accurate click on zone.
To do that, we have to add two blocks for the tail after the block with the layer-3 class:
<b class="layer-3-1" function="button" tabindex="3" on="faucet:AMP.setState({layer3: coloration ? 'coloration'+coloration : 'color1'})"></b>
<b class="layer-3-2" function="button" tabindex="3" on="faucet:AMP.setState({layer3: coloration ? 'coloration'+coloration : 'color1'})"></b>
Please observe that these are the blocks for the “tail,” which makes use of the layer3 variable, so, for them, we additionally use the layer3 variable.
As soon as pasted, it’s time so as to add some types:
.layer-3-1,
.layer-3-2 {
show: block;
place: absolute;
cursor: pointer;
}
.layer-3-1 {
width: 10.49%;
top: 17.07%;
left: 14.39%;
prime: 45.85%;
rework: rotate(10deg);
}
.layer-3-2 {
width: 11.95%;
top: 16.83%;
left: 16.83%;
prime: 60.24%;
rework: rotate(-21deg);
}
The fundamental code is similar as within the earlier layers — solely within the types, we added a rework to make the clicking zone extra exact.
If we add a border to the blocks we simply inserted, we are going to see a brand new click on zone:
This manner, we add all of the items of the picture. For those who overlap others or overlap themselves, we add extra blocks — on which we connect a click on occasion.
Endgame message
In the long run, it’s value including a block with a message that will probably be proven when the person colours all of the layers. To do that, you should add a block with textual content that will probably be proven when all of the variables — layer1, layer2, layer3, layer4, and so on. — have a worth.
In the intervening time, now we have solely added three layers, so solely three variables are listed. On the finish of the sport, they need to match the variety of layer variables.
So as to add a message on the finish of the sport, copy this code beneath the block with the colours class:
<div class="message" hidden [hidden]="!layer1 || !layer2 || !layer3">
<h2><b>Вау, це просто шедевр! </b>😍</h2>
</div>
The hidden attribute is specified right here as a result of the block must be hidden at the start of the sport. Then, the [hidden] attribute provides or removes the hidden attribute, relying on the situation inside. In our case, the block will probably be hidden so long as at the least one of many listed variables is empty. As quickly as all variables obtain a worth, the hidden attribute will probably be eliminated.
Additionally, our recreation block is hidden after coloring. To do that, we have to add one other situation to the block with the colours class:
[hidden]=”layer1 && layer2 && layer3″
The [hidden] attribute will probably be added when all variables have a worth and the block is hidden.
Full recreation code pattern
So, now we have checked out all of the elements of the sport, what they’re for, and the way they work. After all of the manipulations, the sport code ought to appear like this:
<fashion amp-custom>
.container-image {
place: relative;
width: 410px;
top: 410px;
margin: 0 auto;
}
.container-image div {
place: absolute;
}
.container-image span {
show: block;
width: 100%;
top: 100%;
cursor: pointer;
background-repeat: no-repeat;
background-position: 0 0;
background-size: cowl;
}
.layer-1 .color1,
.btn-color-1 span {
background-color: #ffe14d;
}
.layer-1 .color2,
.btn-color-2 span {
background-color: #c9a3c7;
}
.layer-1 .color3,
.btn-color-3 span {
background-color: #ff5cd9;
}
.layer-1 .color4,
.btn-color-4 span {
background-color: #4099d4;
}
.layer-1 {
width: 100%;
top: 100%;
left: 0;
prime: 0;
}
.layer-1 span {
background-image: url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_248acda4694b320e2c1fa70ebbbeec3aac0ca1fb50efddf513440d327edb6bf5/pictures/layer0102.png);
}
.layer-1-1,
.layer-1-2,
.layer-1-3,
.layer-1-4 {
show: block;
place: absolute;
cursor: pointer;
}
.layer-1-1 {
width: 24.39%;
top: 26.83%;
rework: rotate(-15deg);
left: 46.34%;
prime: 65.61%;
}
.layer-1-2 {
width: 14.39%;
top: 21.46%;
rework: rotate(21deg);
left: 39.02%;
prime: 72.93%;
}
.layer-1-3 {
width: 13.17%;
top: 15.37%;
rework: rotate(-15deg);
left: 71.95%;
prime: 72.93%;
}
.layer-1-4 {
width: 9.02%;
top: 39.27%;
rework: rotate(-9deg);
left: 75.85%;
prime: 9.76%;
}
.container-image span.color1 {
background-position: 25% 0;
}
.container-image span.color2 {
background-position: 50% 0;
}
.container-image span.color3 {
background-position: 75% 0;
}
.container-image span.color4 {
background-position: 100% 0;
}
.layer-2 {
width: 29.51%;
top: 21.46%;
left: 15.37%;
prime: 14.39%;
}
.layer-2 span {
background-image: url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_f61060edca5f418873af71474512724771bf46977f7bb9ac2b4e11c4c017d541/pictures/layer02.png);
}
.layer-3 {
width: 17.56%;
top: 36.34%;
left: 12.68%;
prime: 46.34%;
}
.layer-3 span {
background-image: url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_248acda4694b320e2c1fa70ebbbeec3aac0ca1fb50efddf513440d327edb6bf5/pictures/layer03_uXc.png);
}
.layer-3-1,
.layer-3-2 {
show: block;
place: absolute;
cursor: pointer;
}
.layer-3-1 {
width: 10.49%;
top: 17.07%;
left: 14.39%;
prime: 45.85%;
rework: rotate(10deg);
}
.layer-3-2 {
width: 11.95%;
top: 16.83%;
left: 16.83%;
prime: 60.24%;
rework: rotate(-21deg);
}
.layer-4 {
width: 53.90%;
top: 34.63%;
left: 28.29%;
prime: 52.93%;
}
.layer-4 span {
background-image: url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_8ae58955cfb1c968315c9464fb0b20f3fa55d574a142348227e4440a245bf429/pictures/layer04.png);
}
.layer-4-1,
.layer-4-2,
.layer-4-3 {
show: block;
place: absolute;
width: 9.76%;
top: 7.07%;
cursor: pointer;
}
.layer-4-1 {
left: 28.05%;
prime: 80.00%;
}
.layer-4-2 {
left: 70.98%;
prime: 52.93%;
}
.layer-4-3 {
left: 71.95%;
prime: 66.10%;
}
.layer-5 {
width: 54.88%;
top: 71.22%;
left: 24.39%;
prime: 11.22%;
}
.layer-5 span {
background-image: url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_248acda4694b320e2c1fa70ebbbeec3aac0ca1fb50efddf513440d327edb6bf5/pictures/layer05.png);
}
.layer-5-1,
.layer-5-2,
.layer-5-3,
.layer-5-4,
.layer-5-5,
.layer-5-6,
.layer-5-7,
.layer-5-8 {
show: block;
place: absolute;
cursor: pointer;
}
.layer-5-1 {
width: 11.22%;
top: 21.46%;
rework: rotate(18deg);
left: 31.71%;
prime: 59.76%;
}
.layer-5-2 {
width: 22.44%;
top: 23.90%;
left: 26.10%;
prime: 39.76%;
}
.layer-5-3 {
width: 8.54%;
top: 21.46%;
rework: rotate(-32deg);
left: 64.88%;
prime: 48.05%;
}
.layer-5-4 {
width: 9.02%;
top: 10.73%;
rework: rotate(-19deg);
left: 68.54%;
prime: 43.90%;
}
.layer-5-5 {
width: 22.44%;
top: 16.83%;
rework: rotate(-16deg);
left: 41.71%;
prime: 49.51%;
}
.layer-5-6 {
width: 11.95%;
top: 18.29%;
rework: rotate(-18deg);
left: 58.29%;
prime: 21.46%;
}
.layer-5-7 {
width: 11.46%;
top: 18.29%;
rework: rotate(30deg);
left: 57.32%;
prime: 35.37%;
}
.layer-5-8 {
width: 10.00%;
top: 20.49%;
rework: rotate(-123deg);
left: 52.93%;
prime: 18.78%;
}
.layer-6 {
width: 27.32%;
top: 35.37%;
left: 48.54%;
prime: 14.88%;
}
.layer-6 span {
background-image: url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_a9f2a37800ac6365b7305670b3e9505b3b265fbf13535f0419236592cf77d260/pictures/layer06.png);
}
.layer-7 {
width: 10.24%;
top: 11.71%;
left: 48.78%;
prime: 8.78%;
}
.layer-7 span {
background-image: url(https://zlnfb.stripocdn.e mail/content material/guids/CABINET_248acda4694b320e2c1fa70ebbbeec3aac0ca1fb50efddf513440d327edb6bf5/pictures/layer07.png);
}
.layer-7-1 {
show: block;
place: absolute;
cursor: pointer;
width: 13.41%;
top: 5.37%;
rework: rotate(60deg);
left: 46.34%;
prime: 11.22%;
}
.colours ul {
list-style-type: none;
padding: 0;
margin: 0;
width: 100%;
text-align: heart;
show: flex;
justify-content: heart;
align-items: heart;
}
.colours li {
show: inline-block;
margin: 0 5px;
}
.colours li span {
show: inline-block;
width: 42px;
top: 42px;
border-radius: 50%;
cursor: pointer;
border: 2px stable #fff;
}
.colours li .energetic {
border: 2px stable #333;
}
.message {
padding: 10px 10px 0;
text-align: heart;
}
@media solely display and (max-width: 600px) {
.colours li span {
width: 32px;
top: 32px;
}
.container-image {
width: 250px;
top: 250px;
}
}
</fashion>
<div class="container-image">
<div class="layer-1"><span function="button" tabindex="1" [class]="layer1" on="faucet:AMP.setState({layer1: coloration ? 'coloration'+coloration : 'color1'})"></span></div>
<div class="layer-4"><span [class]="layer4"></span></div>
<div class="layer-7"><span [class]="layer7"></span></div>
<div class="layer-5"><span [class]="layer5"></span></div>
<div class="layer-6"><span [class]="layer6" function="button" tabindex="6" on="faucet:AMP.setState({layer6: coloration ? 'coloration'+coloration : 'color1'})"></span></div>
<div class="layer-2"><span function="button" tabindex="2" [class]="layer2" on="faucet:AMP.setState({layer2: coloration ? 'coloration'+coloration : 'color1'})"></span></div>
<div class="layer-3"><span [class]="layer3"></span></div>
<b class="layer-5-1" function="button" tabindex="5" on="faucet:AMP.setState({layer5: coloration ? 'coloration'+coloration : 'color1'})"></b><b class="layer-5-2" function="button" tabindex="5" on="faucet:AMP.setState({layer5: coloration ? 'coloration'+coloration : 'color1'})"></b><b class="layer-5-3" function="button" tabindex="5" on="faucet:AMP.setState({layer5: coloration ? 'coloration'+coloration : 'color1'})"></b><b class="layer-5-4" function="button" tabindex="5" on="faucet:AMP.setState({layer5: coloration ? 'coloration'+coloration : 'color1'})"></b><b class="layer-5-5" function="button" tabindex="5" on="faucet:AMP.setState({layer5: coloration ? 'coloration'+coloration : 'color1'})"></b><b class="layer-5-6" function="button" tabindex="5" on="faucet:AMP.setState({layer5: coloration ? 'coloration'+coloration : 'color1'})"></b><b class="layer-5-7" function="button" tabindex="5" on="faucet:AMP.setState({layer5: coloration ? 'coloration'+coloration : 'color1'})"></b><b class="layer-5-8" function="button" tabindex="5" on="faucet:AMP.setState({layer5: coloration ? 'coloration'+coloration : 'color1'})"></b><b class="layer-4-1" function="button" tabindex="4" on="faucet:AMP.setState({layer4: coloration ? 'coloration'+coloration : 'color1'})"></b><b class="layer-4-2" function="button" tabindex="4" on="faucet:AMP.setState({layer4: coloration ? 'coloration'+coloration : 'color1'})"></b><b class="layer-4-3" function="button" tabindex="4" on="faucet:AMP.setState({layer4: coloration ? 'coloration'+coloration : 'color1'})"></b><b class="layer-7-1" function="button" tabindex="7" on="faucet:AMP.setState({layer7: coloration ? 'coloration'+coloration : 'color1'})"></b><b class="layer-3-1" function="button" tabindex="3" on="faucet:AMP.setState({layer3: coloration ? 'coloration'+coloration : 'color1'})"></b><b class="layer-3-2" function="button" tabindex="3" on="faucet:AMP.setState({layer3: coloration ? 'coloration'+coloration : 'color1'})"></b><b class="layer-1-1" function="button" tabindex="1" on="faucet:AMP.setState({layer1: coloration ? 'coloration'+coloration : 'color1'})"></b><b class="layer-1-2" function="button" tabindex="1" on="faucet:AMP.setState({layer1: coloration ? 'coloration'+coloration : 'color1'})"></b><b class="layer-1-3" function="button" tabindex="1" on="faucet:AMP.setState({layer1: coloration ? 'coloration'+coloration : 'color1'})"></b><b class="layer-1-4" function="button" tabindex="1" on="faucet:AMP.setState({layer1: coloration ? 'coloration'+coloration : 'color1'})"></b>
</div>
<div class="colours" [hidden]="layer1 && layer2 && layer3 && layer4 && layer5 && layer6 && layer7">
<ul>
<li class="btn-color-1"><span class="energetic" [class]="coloration == 1 || !coloration ? 'energetic' : '' " function="button" tabindex="1" on="faucet:AMP.setState({coloration: 1})"></span></li>
<li class="btn-color-2"><span [class]="coloration == 2 ? 'energetic' : '' " function="button" tabindex="1" on="faucet:AMP.setState({coloration: 2})"></span></li>
<li class="btn-color-3"><span [class]="coloration == 3 ? 'energetic' : '' " function="button" tabindex="1" on="faucet:AMP.setState({coloration: 3})"></span></li>
<li class="btn-color-4"><span [class]="coloration == 4 ? 'energetic' : '' " function="button" tabindex="1" on="faucet:AMP.setState({coloration: 4})"></span></li>
</ul>
</div>
<div class="message" hidden [hidden]="!layer1 || !layer2 || !layer3 || !layer4 || !layer5 || !layer6 || !layer7">
<h2><b>Wow, that is only a masterpiece!</b>😍</h2>
</div>
The ultimate recreation made with this code will look and work like this:
Use this code as you would like. Experiment with the sport, photos, types, and so on., to grasp these recreation mechanics and create a really distinctive coloring recreation in your e mail marketing campaign.
Wrapping up
As you possibly can see, the sport mechanics are fairly attention-grabbing and strange, however creating them entails a posh creation course of requiring programming abilities in the event you create the sport from scratch.
We created this information in order that any marketer, no matter their technical savvy, can recreate the mechanics and add the sport to their e mail newsletters to shock recipients and make e mail interactions extra partaking.
As well as, our skilled e mail programmers are at all times pleased to assist carry your {custom} AMP content material concepts to life, elevating your e mail recreation to unprecedented heights.
Create distinctive emails with Stripo
