Using CSS and SVG's to animate for web

-
In order to do animations we will need something to animate. So let's move into Adobe Illustrator where we can create a basic flat design SVG for which we can use for our animation. In this case, I am going for a simple coffee cup.


From there on we will need another SVG image that will get an animated effect. Let's settle with a steam effect for the coffee cup.


The image above will be our steam effect (look past the blue background). So now that we have two different pictures, we can start with the animation. But first, we will have to export these two images as .png images, and that without any backgrounds (the blue background). From there on out, let's create a HTML page, a CSS document and import a CSS animation library. Let's call the HTML page index.html and the CSS document for main.css.

For our imported CSS animation library, we will use a library called Animate.css (version 3.7.2), which is great for quick animations. Though, I will override some of the keyframes from the library in order to make a smoother animation for the steam effect (something I will do in main.css).

Index.html
<!doctype html>

<html>
 <head>
 <title>Animated Coffee Cup</title>
 <link rel="stylesheet" href="main.css"/>
 <link rel="stylesheet" href="animate.css"/> 
 </head>
 <body>
  <div class="wrapper">
   <img src="coffee_cup.png"/>
   <img id="steam" class="animated infinite wobble" src="steam.png"/>
  </div>
 </body>
</html>

The only things added to the HTML page is a class called wrapper, link to the CSS document and library, and the two images. Namely the coffee cup and the steam images. Now, let's use some CSS to achieve an animation out of these two images.

main.css
body {
   background: #99C0F9;
}
.wrapper {
   margin: auto;
   width: 100px;
}
.wrapper img {
    margin: auto;margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
#steam {
    position: absolute;
    margin-top: -75px;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

@keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-0.3%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-0.3%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  30% {
    -webkit-transform: translate3d(0.3%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(1%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-0.3%, 0, 0) rotate3d(0, 3, 1, -2deg);
    transform: translate3d(-0.3%, 0, 0) rotate3d(0, 3, 1, -1deg);
  }

  60% {
    -webkit-transform: translate3d(1%, 0, 0) rotate3d(0, 0, 1, 1deg);
    transform: translate3d(1%, 0, 0) rotate3d(0, 3, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-0.3%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-0.3%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 15s !important; 
}

With the CSS and HTML written above, we will achieve an subtle animation like this:


One could always add some more details to the steam effect. But I find the subtle animation to be smooth and relaxing (if one looks past the clipping caused by the .gif).

All the files used for this project can be found here:
https://filebin.net/76azs2m9z6fpwpoz

Comments

Post a Comment

Popular posts from this blog

Vigenère cipher encryption with C++

-
Image
Vigenère cipher is a substitution cipher that uses a 26 x 26 alphabetic table to either encrypt or decrypt. For example, say we wanted to encrypt the plaintext: "DAY" Then we would first pick an arbitrary keyword for the letter, let's go with: "SEE" From there on out, we would use the plaintext on the columns and keyword on the rows on the 26 x 26 table and then substitute. Ultimately, we would see that the plaintext combined with the keyword turns into: "VEC" Which will be our final encrypted text. An illustration of this can be seen visually as: Now, let's move over to the C++ program and start with main.cpp. main.cpp #include "Vigenere.h" Vigenere * vigenere = nullptr; int main () { vigenere = new Vigenere(); while (vigenere -> isRunning()) { vigenere -> showMenu(); vigenere -> handleEvents(); } return 0 ; } In this case, we're simply creating a new instance of a Vigenere object that we're g
Read more

Minimum Spanning Trees (MST)

-
Image
Let's imagine an undirected graph with weighted edges. From this graph, the spanning tree wil be a tree that maps all the vertices. In other words, the tree seen above will be G = (V, E) = (4, 5) and the spanning tree must be at least S = (4, 3). Let us visualize us this down below. Here we will have S = (4, 3) marked with green, which will be our spanning tree. As we can see, it covers all the vertices in the tree. However, it doesn't cover all the vertices in regards to the weighted edges. This S tree will have the sum of 4 + 5 + 2 = 11. Now when it comes to minimal spanning trees, we have to care about the weighted edges in the graph. Let's find the minimal spanning tree of the G graph above. Let's call this subgraph for S2 = (4, 3). In this subgraph we will see that the sum will be equal to 4 + 1 +2 = 7 and that it covers all the vertices. Since it has the smallest sum out of all the spanning trees you can make over graph G, it will be the minimal sp
Read more