Categories
JQuery Web development

jQuery setTimeOut method / Coffee, coffee more coffee…

The setTimeout() method is JavaScript function however, this function can be also used with a library such as jQuery.

Iced Coffee - Vector Image
Do you like this image? Check more images in the store.

The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds. The function is only executed once.

Note: 1000 ms = 1 second

Syntax:

setTimeout(function() {
      // Do something after 1 second
      // the function takes time in a millisecond – and hence we have specified ‘1000’ as the timeout value
     }, 1000);

To create the animation below I used setTimeOut method:

*animation opened in the Safari browser.
To see the live output of the animation click here.

What do you need to do?

  1. Add HTML
  2. Add CSS
  3. Add jQuery

Step1.

Add HTML

Create the circle, and add the content (mug, coffee, drip and the fill).

<div id="circle">
   <div id="content">
     <div class="mug">
       <div class="handle"></div>
       <div class="inside">
         <div class="coffee"></div>
       </div>
       <div class="drink"></div>
       <div class="drip"></div>
        <div class="drip1"></div>
        <div class="drip2"></div>
     </div>
     <div class="fill"></div>
  </div>
</div>

Step2.

Add CSS

Set the colour and position of the background, circle and the content:

body{
   background-color: #e26d5c;
   background-size: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
}
#circle {
   background-color: #A1C181;
   width:450px;
   height:450px;
   top:30px;
   border-radius: 50%;
   position: relative;
   z-index: 1;
   overflow:hidden;
}
#content{
   background-color:transparent;
   width:450px;
   height:450px;
   border-radius:50%;
   position:relative;
   box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}

Style the mug:

.mug {
  position: absolute;
  width: 170px;
  height: 180px;
  background-color: #FCCA46;
  top: 135px;
  left:140px;  
}

.mug:after {
  position: absolute;
  content:"";
  width: 170px;
  height: 40px;
  border-radius:50%;
  background-color: #FCCA46;
  top:-18px;
}

.mug:before {
  position: absolute;
  content:"";
  width: 170px;
  height: 40px;
  border-radius:50%;
  background-color: #FCCA46;
  top:158px;
  box-shadow: 1px 25px 3px rgba(0,0,0,0.09);
}
.handle {
  position: absolute;
  border: 17px solid #FCCA46;
  border-radius:50%;
  width: 100px;
  height: 100px;
  left: 100px;
  top: 25px;  
}

.inside {
  position: absolute;
  content:"";
  width: 155px;
  height: 40px;
  border-radius:50%;
  background-color: #ffe066;
  top:-13px;
  left: 7px;
  z-index:1;
  overflow: hidden; 
}
Coffee jQuery

Add Coffee and drip:

.coffee {
  position: absolute;
  width: 200px;
  left:-20px;
  height: 40px;
  border-radius:50%;
  background-color: #432818;
  top:30px;
  opacity:1;
  
}

.drip {
  position: absolute; 
  width: 5px;
  height: 5px;
  background-color: #432818;
  z-index:2;
  left:60px;
  top:20px;
  opacity:1;
  
}

.drip1 {
  position: absolute; 
  width: 8px;
  height: 2px;
  left:35px;
  top:20px;
  background-color: #432818;
}

.drip2 {
  position: absolute; 
  width: 8px;
  height: 2px;
  left:130px;
  top:20px;
  background-color: #432818;
}

.fill {
  position: absolute;
  width: 500px;
  height: 500px;
  top:450px;
  background-color: #432818;
  z-index:3;
}

.drink {
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #432818;
  top:-150px;
  left: 75px;
  z-index:2;
}

Step3.

Add jQuery

setTimeout(function(){
    $(".drink").animate({
        "height": "+=275",
        top: "-=100"
    })
}, 2500, "ease")


setTimeout(function(){
    $(".coffee").animate({
        "height": "+=300",
        top: "-=100"
    })
}, 3000, "ease")

setTimeout(function(){
    $(".drip").animate({
        "height": "+=300",
        bottom: "-=100"
    })
}, 4500, "ease")

setTimeout(function(){
    $(".drip1").animate({
        "height": "+=300",
        bottom: "-=100"
    })
}, 5500, "ease")

setTimeout(function(){
    $(".drip2").animate({
        "height": "+=300",
        bottom: "-=100"
    })
}, 6500, "ease")

setTimeout(function(){
    $(".fill").animate({
        "height": "+=500",
        top: "-=500"
    }, 5000)
}, 5500, "ease")

To see the live output of the animation go to lenastanley.com.

Enjoy coding!

Categories
CSS Web development

CSS Coffee Express Animation

It’s Monday… but it’s OK. Fancy some Coffee?

CSS Coffee Express

To create the CSS Coffee Express animation follow the steps below and watch the video tutorial.

*animation opened in the Safari browser.
To see the live output of the animation click here.

Step1.

Add HTML

<div class="container">
  <div class="express">
    <div class="top"></div>
    <div class="buttons"></div>
    <div class="logo"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
    <div class="buttons2"></div>
    <div class="coffeepod"></div>
    <div class="coffee"></div>
    <div class="milk"></div>
    <div class="cup">
    <div id="wrap">
  <div id="steam" class="steam1"></div>
  <div id="steam" class="steam2"></div>
  <div id="steam" class="steam3"></div>
  <div id="steam" class="steam4"></div>
    </div>
      </div>
  </div>
</div>

Step2.

Add CSS

Set the size and the colour of the background, and the container.

body {
  background-color: #CD6155;
  height: 100vh;
  
}
.container {
  position: relative;
  left:40%;
  top: 50px;
  
}

Style the coffee express:

.express {
  position: relative;
  
}
.top {
  position: absolute;
  background-color: #C2C1C1;
  width: 220px;
  height: 140px;
  border-radius: 30px;
  overflow:hidden;
  
}
.top:after {
  position: absolute;
  content:"";
  background-color:#E5E8E8;
  width:180px;
  height: 160px;
  left:20px;
  box-shadow:inset 5px 5px 0 rgba(0,0,0,0.07);
  
}
.middle {
  position: absolute;
  background-color: #b2b2b2;
  width:190px;
  height:180px;
  top:130px;
  left:15px;
  z-index:-1;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}
.middle:after {
  content:"";
  background-color: #A22C20;
  width:220px;
  height:20px;
  position: absolute;
  top:160px;
  left:-15px;
  border-radius: 10px 10px 0 0;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}
.middle:before {
  content:"";
  position: absolute;
  background-color: #949494;
  width: 150px;
  height: 170px;
  left:20px;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}
.bottom {
  position: absolute;
  background-color: #E74C3C;
  width: 260px;
  height: 60px;
  top:310px;
  left:-21px;
  border-radius:20px 20px 0 0;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  
}
.bottom:after {
  content:"";
  position: absolute;
  background-color: #292929;
  width: 260px;
  height: 15px;
  border-radius: 0 0 10px 10px;
  top:60px;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}
.bottom:before {
  content:"";
  position: absolute;
  background-color: #292929;
  width: 290px;
  height: 15px;
  top:70px;
  left: -16px;
  border-radius:20px;
  opacity:0.5;
}
CSS Coffee Express

Add the logo:

.logo {
  background-color: #F08080;
  display: inline-block;
  height: 30px;
  margin: 0 10px;
  position: relative;
  top: 50px;
  left: 85px;
  transform: rotate(-45deg);
  width: 30px;
  
}

.logo:before,
.logo:after {
  content: "";
  background-color: #F08080;
  border-radius: 50%;
  height: 30px;
  position: absolute;
  width: 30px;
  box-shadow:inset -2px 2px 0 #EC7063;
}

.logo:before {
  top: -15px;
  left: 0;
}

.logo:after {
  left: 15px;
  top: 0;
}

and the buttons:

.buttons {
  position: absolute;
  border-radius: 50%;
  background-color: #A9CCE3;
  width: 20px;
  height: 20px;
  border: 4px solid #292929;
  top: 100px;
  left: 60px;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  
}
.buttons:after {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #A9CCE3;
  width: 20px;
  height: 20px;
  border: 4px solid #292929;
  top: -3px;
  left: 30px;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  
}
.buttons:before {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #A9CCE3;
  width: 20px;
  height: 20px;
  border: 4px solid #292929;
  top: -3px;
  left: 65px;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  
}
.buttons2 {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 3px solid white;
  border-radius: 50%;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  top:330px;
  left: 50px;
}
.buttons2:after {
  content:"";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 3px solid white;
  border-radius: 50%;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  left: 50px;
  top:-2px;
}
.buttons2:before {
  content:"";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 3px solid white;
  border-radius: 50%;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  left: 100px;
  top:-2px;
}
CSS Coffee

Coffee pod:

.coffeepod {
  position: absolute;
  width: 80px;
  height: 20px;
  background-color:#D7D7D7;
  top:140px; 
  left: 70px;
  border-radius: 0 0 20px 20px;
  box-shadow:inset 3px -5px 0 rgba(0,0,0,0.07);
}
.coffeepod:after {
  content:"";
  position: absolute;
  background-color: #292929;
  width:50px;
  height: 10px;
  top:20px;
  left:15px;
  border-radius: 0 0 5px 5px;
  
}

Coffee and milk:

.coffee {
  position: absolute;
  background-color: #292929;
  width: 10px;
  height: 20px;
  border-radius: 2px;
  top: 160px;
  left:95px;
}
.coffee:after {
  content:"";
  position: absolute;
  width: 6px;
  height: 65px;
  opacity: 0;
  top: 20px;
  left: 2px;
  background-color: #472708;
  animation: milk 5s linear;
  animation-delay: 5s;
}
.milk {
  position: absolute;
  background-color: #292929;
  width: 10px;
  height: 20px;
  border-radius: 2px;
  top: 160px;
  left:115px;
}

.milk:after {
  content:"";
  position: absolute;
  width: 6px;
  height: 65px;
  opacity: 0;
  top: 20px;
  left: 2px;
  background-color: white;
  animation: milk 4s linear;
  animation-delay: 4s;
}
CSS Coffee Machine

The Coffee Express is ready. Now, it is time to add the cup:

.cup {
  position: absolute;
  background-color:#292929;
  width: 70px;
  height: 5px;
  top: 285px;
  left: 75px;
  border-radius: 5px 5px 0 0;
}
.cup:after {
  position: absolute;
  content:"";
  background-color: #2874A6;
  width: 70px;
  height: 50px;
  border-radius: 5px 5px 30px 30px;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  top:-49px;
}
.cup:before {
  position: absolute;
  content:"";
  border: 8px solid #2874A6;
  border-radius: 50%;
  width: 20px;
  height: 15px;
  top:-46px;
  left:55px;
  
}
CSS Coffee Machine

Steam:

#steam {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #F3F1E7;
  border-radius: 50%;
  z-index: -1;
  opacity: 0;
  top: -20px;
  left: 30%;
}
.steam1 {
  animation: steam1 5s ease-out infinite; 
}
.steam3 {
  animation: steam1 4s ease-out 2s infinite; 
}
.steam2 {
  animation: steam2 1s ease-out 0.5s infinite; 
}
.steam4 {
  animation: steam2 2s ease-out 1.5s infinite; 
}

Step3.

Add CSS Animation

To fill the cup:

@keyframes milk {
  0% {height: 0px; opacity: 1;}
  10% {height: 0px; opacity: 1;}
  30% {height: 65px;opacity: 1;}
  80% {height: 65px; opacity: 1;}
  100% {height: 65px; opacity: 0;}
}

and add the steam:

@keyframes steam1{
  0%{
    transform: translateY(0) translateX(0) scale(0.3);
    opacity: 0.25;
  }
  100%{
    transform: translateY(-80px) translateX(10px) scale(1);
    opacity: 0;
  }
}
@keyframes steam2{
  0%{
    transform: translateY(0) translateX(0) scale(0.4);
    opacity: 0.25;
  }
  100%{
    transform: translateY(-90px) translateX(-10px) scale(1);
    opacity: 0;
  }
}

To see the live output of the animation visit lenastanley.com.

Enjoy coding!