Our first tutorial!!

Posted on

Do you remember Giovanni from the Face Recognition project? Well, he is here today to do a little tutorial for us!

We wondered how the mobile app of this project could be cooler and one of the ideas we came up with was this: AN ANIMATED SPLASH SCREEN!!

 

 

In this post we will talk about the first steps you have to follow. We want to do a GIF of our Smart Green Island logo as you can see in the previous image. First the island appears, and then the words contained in the logo will appear.

To animate the logo, first you have to use a photo edition program.

To select the letters and separate them from the background, we will use the “Magic Wand” (you also can press W in your keyboard) as you can see here:

And then, clicking the letters and pressing Ctrl + J you create new layers like these ones:

And you will have something like these:

In our case, we exported the images in .png and then we create a file .html in reference to the images. Here you can copy the code:

 <ion-content>
 <divclass="parent">
 <imgclass="island_background"src="./Gran Canaria verde.png">
 <imgclass="smart_text"src="./smart.png">
 <imgclass="green_text"src="./green.png">
 <imgclass="island_text"src="./island.png">
 </div>
 </ion-content>

Afterwards, for the animation, we will create a .scss:

With the first image (island_background), the island without letters in our case, we write this

.island_background {
position: relative;
top: 0;
left: 0;
z-index: 1;
padding-top: 18%;
opacity: 0;
transform: rotate3d(1, 1, 0, 50deg);
animation: 1s0.2sease fadeInAndSpin;
animation-fill-mode: forwards;
}

And then you can copy this for the rest of the images. Like here:

.smart_text {
position: absolute;
top: 0;
left: 0;
z-index: 1;
padding-top: 18%;
opacity: 0;
animation: 1s0.4slinear fadeIn;
animation-fill-mode: forwards;
}

.green_text {
position: absolute;
top: 0;
left: 0;
z-index: 1;
padding-top: 18%;
opacity: 0;
animation: 1s0.6slinear fadeIn;
animation-fill-mode: forwards;
}

.island_text {
 position: absolute;
 top: 0;
 left: 0;
 z-index: 2;
 padding-top: 18%;
 opacity: 0;
 animation: 1s 0.8s linear fadeIn;
 animation-fill-mode: forwards;
 }

That’s all for this post, in one of the next ones we will tell you more about this. Stay tuned! See you 😉

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>