Categories
CSS JQuery Web development

CSS/jQuery Ghost Animation

Happy Halloween everyone! To celebrate the spookiest day of the year I prepared the CSS/jQuery Ghost animation tutorial. To create the Halloween Ghost follow the steps below.

  1. Add HTML
  2. Add CSS with the CSS Animation
  3. Add jQuery
*animation opened in the Firefox browser.
*to see the live output of the animation click here.

Step1.

Add HTML

<div id="container">
  <div class="ghost">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
    <div class="shadow"></div> 
  </div>
</div>

Step2.

Add CSS

Set the colour and position of the background, and elements:

body {
  background-color: #312244;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; 
}

#container {
  position: relative;
  z-index:10;
  color: white;
  font-size: 200px;
  text-shadow: 2px 2px black;  
}

Style the Ghost, and add an animation:

.ghost {
  position: relative;
  left:-100px;
  top:-100px;
  animation: bounce-out-down 4s ease infinite;
}

@keyframes bounce-out-down {
  0% { transform: translateY(0); }
  20% {
    opacity: 1;
    transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

.top {
  position: absolute;
  background-color: #f7ede2;
  width: 109px;
  height:150px;
  border-radius: 50px 50px 0 0;
}

.top:after {
  content:"";
  position: absolute;
  background-color: #272640;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  top:35px;
  left:25px;  
  
}

.top:before {
  content:"";
  position: absolute;
  background-color: #272640;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  top:35px;
  left:58px; 
}

.middle {
  position: absolute; 
  background-color: #f7ede2;
  width: 25px;
  height: 40px;
  border-radius: 30px;
  top:130px;
}

.middle:after {
  content:"";
  position: absolute;
  background-color: #f7ede2;
  width: 25px;
  height: 40px;
  border-radius: 30px;
  left:28px;
  top:-5px;
}

.middle:before {
  content:"";
  position: absolute;
  background-color: #f7ede2;
  width: 25px;
  height: 40px;
  border-radius: 30px;
  left:56px;
  top:-2px;
}

.bottom {
  position: absolute;
  background-color: #f7ede2;
  width: 25px;
  height: 40px;
  border-radius: 30px;
  top:132px;
  left:84px;
}

Add the shadow with an animation:

.shadow {
  background-color: #272640;
  position: absolute;
  width: 109px;
  height:30px;
  border-radius:50%;
  top:200px;
  left:-100px;
  top:95px;
  animation: bounce 4s ease infinite;
}

@keyframes bounce {
  0% { transform: translateY(0); }
  20% {
    opacity: 1;
    transform: scaleX(0.95);
  }
  100% {
    opacity: 0;
    transform: scaleX(1.1);
  }
}

Step 3.

Add jQuery

*Don’t forget to add the jQuery library link in the section of your document. To see how to add jQuery to HTML document click here.

$("#container").hover(function () {
    $(this).append($("<span>Boo!</span>"));
},function () {
    $(this).find('span').slideUp('fast');
});

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

Enjoy coding!

Categories
CSS JQuery

CSS Halloween Pumpkin

Halloween is coming! So it’s pumpkin time. Follow the steps below and create your own CSS spooky pumpkin!

CSS Pumpkin
Do you like this image? Check more images in the store.

Firstly, we will create the pumpkin with CSS and secondly, we will add some jQuery to spin the pumpkin eyes to make it more spooky!

*animation opened in the Firefox browser.
*to see the live output of the animation click here.

Step1.

Add HTML

<div id="content">
  <div id="pumpkin">
    <div class="middle"></div>
    <div class="back"></div>
    <div class="stalk"></div>
    <div class="stalk2"></div>
    <div class="eyes">
      <div class="eye1"></div>
      <div class="eye2"></div>
    </div>
     <div class="smile"></div>
    <div class="smile1"></div>
    <div class="shadow"></div>
  </div>
</div>

Step2.

Add CSS

Set the colour of the background, and the position of the elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; 
  background-color: #0b090a;
}

Style the pumpkin:

#content {
  position: relative;
}

#pumpkin {
  position: relative; 
  top:-200px;
  left:-150px;
}

.middle {
  position: absolute; 
  background-color: #ff9500;
  width: 120px;
  height:180px;
  left:147px;
  top:100px;
  border-radius: 50% 50% 50% 50% / 50% 50% 40% 40%;
  box-shadow: inset -5px 5px 0 rgba(0,0,0,0.07);
  z-index:10;
  
}
.middle:before {
  content:"";
  position: absolute;
  background-color: #ff9500;
  width: 120px;
  height:180px;
  border-radius: 50% 50% 50% 50% / 50% 50% 40% 40%;
  box-shadow: inset 5px 5px 0 rgba(0,0,0,0.07);
  left:-120px;
}

.middle:after {
  content:"";
  position: absolute;
  background-color: #ffa200;
  width: 120px;
  height:180px;
  border-radius: 50% 50% 50% 50% / 50% 50% 40% 40%;
  box-shadow: inset 5px 5px 0 rgba(0,0,0,0.07);
  left:-55px;
  top:15px;
}

.back {
  position: absolute; 
  background-color: #ff8800;
  width: 120px;
  height:180px;
  left:147px;
  top:100px;
  border-radius: 50% 50% 50% 50% / 50% 50% 40% 40%;
  box-shadow: inset -5px 5px 0 rgba(0,0,0,0.07);
  z-index:1;
  left:60px;
  top:80px;
  
}

.back:before {
  position: absolute; 
  content:"";
  background-color: #ff7b00;
  width: 120px;
  height:180px;
  left:147px;
  top:100px;
  border-radius: 50% 50% 50% 50% / 50% 50% 40% 40%;
  box-shadow: inset 5px 5px 0 rgba(0,0,0,0.07);
  top:0;
  left:60px;
  
  
}

 .stalk {
      background: #344e41;
      width: 35px;
      height: 35px;
      position: relative;
      text-align: center;
      transform: rotate(20deg) skew(-30deg);
      z-index: 11;
      left: 130px;   
      top: 100px;
      box-shadow: inset 5px 5px 0 rgba(0,0,0,0.07);
      border-radius:2px;
    }
    .stalk:before {
      content: "";
      position: absolute;
      border-radius:2px;
      top: 0;
      left: 0;
      height: 35px;
      width: 35px;
      background: #344e41;
      transform: rotate(135deg) ;
      box-shadow: inset 5px 5px 15px rgba(0,0,0,0.09);
    }

.stalk2 {
  position:absolute;
  width:50px;
	height:45px;
	border-top:18px solid #344e41;
	border-right:12px solid #344e41;
	border-top-right-radius:100px;
  left:90px;
  z-index:12;
  top:60px;
}

.stalk2:after {
  background-color: #26362e;
  border-radius:50%;
  content:"";
  position: absolute;
  width:10px;
  height:18px;
  top:-18px;
  left:-5px;
}
CSS Pumpkin

Style and animate eyes:

.eyes {
  position: absolute;
  z-index:30;
}

.eye1 {
  position: absolute;
  background-color: black;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  left: 80px;
  top:110px;
  transform-origin: center;
  box-shadow: inset -5px -5px 0 #333;
}

.eye2 {
  position: absolute;
  background-color: black;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  transform-origin: center;
  left: 160px;
  top:110px;
  box-shadow: inset -5px -5px 0 #333;
}

.eye1:after {
  position: absolute;
  content:"";
  background-image: radial-gradient(circle closest-side, red,
      transparent);
  width: 30px;
  height:30px;
  border-radius:50%;
  Left: 20px;
  box-shadow: 4px 3px 40px yellow;
  animation: eye 0.7s infinite;
  
}

.eye2:after {
  position: absolute;
  content:"";
  background-image: radial-gradient(circle closest-side, red,
      transparent);
  width: 30px;
  height:30px;
  border-radius:50%;
  Left: 10px;
  box-shadow: 4px 3px 40px yellow;
  animation: eye 0.7s infinite;
  
}

@keyframes eye {
  from, to { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.1); }
  50% { transform: scale(1.1, 0.9); }
  75% { transform: scale(0.95, 1.05); }
}

Style smile of the pumpkin:

.smile {
  position: absolute;
  width:95px;
	height:40px;
  border-radius: 0 0 100px 100px;
  background-color: black;
	top:225px;
  left:100px;
  z-index:20;  
  box-shadow: inset 4px 3px 35px yellow;
}

.smile:before {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 30px solid #ffa200;
  top:-5px;
  left:10px;
}

.smile:after {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 25px solid #ffa200;
  top:22px;
  left:37px;
}

.smile1 {
  position: absolute;
  background-color: #ffa200;
  width: 101px;
  height: 15px;
  border-radius:50%;
  top:220px;
  z-index:34;
  left: 97px;
  
}

and add some shadow:

.shadow {
  position: absolute;
  width: 320px;
  height: 70px;
  background-color: red;
  border-radius:50%;
  left:-10px;
  top:245px;
  filter: blur(45px);
}

Step3.

Add jQuery

$("#pumpkin").mousemove(function(e) {
  var eyes = $(".eye1, .eye2");
  var x = (eyes.offset().left) + (eyes.width() / 2);
  var y = (eyes.offset().top) + (eyes.height() / 2);
  var rad = Math.atan2(e.pageX - x, e.pageY - y);
  var rot = (rad * (180 / Math.PI) * -1) + 180;
  eyes.css({
    '-webkit-transform': 'rotate(' + rot + 'deg)',
    '-moz-transform': 'rotate(' + rot + 'deg)',
    '-ms-transform': 'rotate(' + rot + 'deg)',
    'transform': 'rotate(' + rot + 'deg)'
  });
});

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

Enjoy coding!

Categories
CSS JavaScript JQuery Web development

JavaScript Progress Bar/ Bee Progress Bar

A progress bar can be used to show a user how far along he/she is in a process ( such as a download, file transfer, or installation).

honey bee
Do you like this image? Check more images in the store.

In this tutorial, you’ll learn how to create a simple progress bar using JavaScript, and after that, we’ll add some CSS and jQuery to create an animated progress bar.

I. Simple Progress Bar

To create a Simple Progress Bar you need to:

  1. Add HTML
  2. Add CSS
  3. Add JavaScript

Step1.

Add HTML

<div id="myProgress">
  <div id="myBar">0%</div>
</div>
<br>
<button onclick="move()">Click Me</button> 

Step2.

Add CSS

#myProgress {
  width: 100%;
  background-color: #839791;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: #896978;
  text-align: center;
  line-height: 30px;
  color: white;
}

Step3.

Add JavaScript

var i = 0;
function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 0;
    var id = setInterval(frame, 20);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        elem.style.width = width + "%";
        elem.innerHTML = width  + "%";
      }
    }
  }
}

Output:

II. Bee Progress Bar

Now, when you know how the progress bar works we will do step ahead!

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

To create the Bee Progress Bar follow the steps below:

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

Step1.

Add HTML

 <div id="progress">
   <div id="text"><h1>Honey Bee</h1></div>
  <div id="bee">
    <div class="head"></div>
    <div class="feeler1"></div>
    <div class="feeler2"></div>
    <div class="eye"></div> 
    <div class="body"></div>
    <div class="leg1"></div>
    <div class="leg2"></div>
    <div class="wing1"></div>
    <div class="wing2"></div>
    <div class="sting"></div>
  </div>
    <div class="background">
    <div class="honey"></div>
    <div class="honey1"></div>
    <div class="honey2"></div>
  </div> 
  <div class="bar" id="bar"></div>
</div>

<button id="button" class="button" onclick="move()">Click Me</button> 

Step2.

Add CSS

Set the background colour and position of elements:

body{
   background-color: #f6ae2d;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
}

Style the Bee:

#bee {
  position: relative;
  left: 50px;
  top: -100px;
  z-index:100;
}

.head {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  position: absolute; 
  background-color: #e9c46a;
}

.feeler1 {
  position: absolute;
  border-radius: 50%;
  box-shadow: inset 3px 3px 0px black;
  width: 20px;
  height: 20px;
  top: -12px;
  left: 10px;
}

.feeler1:after {
  position:absolute;
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background-color: black;
  left: 15px;
}

.feeler2 {
  position: absolute;
  border-radius: 50%;
  box-shadow: inset 3px 3px 0px black;
  width: 20px;
  height: 20px;
  top: -16px;
  left: 20px;
}

.feeler2:after {
  position:absolute;
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background-color: black;
  left: 15px;
}

.eye {
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: white;
  border-radius: 50%;
  left: 25px;
  top:7px;  
}

.eye:after {
  content:"";
  position: absolute;
  background-color: black;
  border-radius:50%;
  width: 7px;
  height: 7px;
  top:5px;
  left:7px;
}

.body {
  position: absolute;
  width: 100px;
  height: 50px;
  border-radius: 50%;
  background: repeating-linear-gradient(
  to right,
  #000,
  #000 10px,
  #ffdc00 10px,
  #ffdc00 20px);
  z-index:-1;
  left: -75px;
  top:15px;
  
}

.sting {
  position:absolute;
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 0px solid transparent;
  border-bottom: 15px solid #f0efeb;
  left:-90px;
  top:29px;
  z-index:-2;
}

.leg1 {
  position: absolute;
  border-radius: 50%;
  box-shadow: inset -3px 3px 0px black;
  width: 20px;
  height: 20px;
  top: 57px;
  left: -3px;
}

.leg1:after {
  position: absolute;
  content:"";
  border-radius: 50%;
  box-shadow: inset -3px 3px 0px black;
  width: 20px;
  height: 20px;
  left: -53px;
}

.leg2 {
  position: absolute;
  border-radius: 50%;
  box-shadow: inset -3px 3px 0px black;
  width: 20px;
  height: 20px;
  top: 45px;
  left: 5px;
  z-index:-3;
}

.leg2:after {
  position: absolute;
  content:"";
  border-radius: 50%;
  box-shadow: inset -3px 3px 0px black;
  width: 20px;
  height: 20px;
  top:7px;
  left: -68px;
}

.wing1 {
  position: absolute;
  background-color: #a8dadc;
  opacity: 0.7;
  width: 50px;
  height: 80px;
  border-radius: 50%;
  top:-53px;
  left:-48px;
  z-index:-4;
  transform-origin: top bottom;
	animation: fly 0.1s ease infinite;
}

.wing2 {
  position: absolute;
  background-color: #a8dadc;
  opacity: 0.7;
  width: 50px;
  height: 80px;
  border-radius:50%;
  top:-50px;
  left:-62px;
  transform-origin: top bottom;
  animation: fly 0.1s ease infinite;
}

Add animation to spin the wings:

@keyframes fly {
	0% {
		transform:rotate(-20deg);
	}
	50% {
		transform:rotate(-40deg);
	}
}

Style the progress bar and the button:

#progress {
  position: absolute;
  width: 50%;
  background-color: #f26419;
  border-radius:100px;
  border: 3px solid black;
  box-shadow: 5px 5px 2px rgba(0,0,0,0.07); 
  top: 250px;
  left:25%;
}

#progress:after {
  content:"";
  background-image: 
}

#bar {
  width: 1%;
  height: 30px;
  border-radius: 100px;
  background: repeating-linear-gradient(
  to right,
  #000,
  #000 10px,
  #ffdc00 10px,
  #ffdc00 20px   
);
  text-align: center;
  line-height: 30px;
  color: white;
}

.button {
  position: absolute;
  background-color: #fcca46;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  border-radius:100px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; 
  transition-duration: 0.4s;
  top:300px;
  left:47%;
}

.button:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

Add some decoration:

.background {
  position: absolute;
  left: 93%;
  top:-65px;
  
}

.honey {
      position: relative;
      width: 54px;
      box-sizing: content-box;
      border-width: 50px 18px 0;
      border-style: solid;
      border-color: #e09f3e transparent;
      z-index:-10;
    }

.honey:before {
      content: "";
      position: absolute;
      height: 0;
      width: 0;
      top: -85px;
      left: -18px;
      border-width: 0 45px 35px;
      border-style: solid;
      border-color: transparent transparent #e09f3e;
    }

.honey1 {
      position: relative;
      width: 54px;
      box-sizing: content-box;
      border-width: 50px 18px 0;
      border-style: solid;
      border-color: #e09f3e transparent;
      left: 70px;
      top:-10px;
      z-index:-10;
      transform: rotate(40deg);
    }

.honey1:before {
      content: "";
      position: absolute;
      height: 0;
      width: 0;
      top: -85px;
      left: -18px;
      border-width: 0 45px 35px;
      border-style: solid;
      border-color: transparent transparent #e09f3e;
    }

.honey2 {
      position: relative;
      width: 54px;
      box-sizing: content-box;
      border-width: 50px 18px 0;
      border-style: solid;
      border-color: #e09f3e transparent;
      left: 60px;
      top:-170px;
      z-index:-10;
      transform: rotate(-30deg);
    }

.honey2:before {
      content: "";
      position: absolute;
      height: 0;
      width: 0;
      top: -85px;
      left: -18px;
      border-width: 0 45px 35px;
      border-style: solid;
      border-color: transparent transparent #e09f3e;
    }

Add @keyframes to move the bee:

.moveright {
  animation: moveright 2s forwards;
}

@keyframes moveright {
  0% {left: 50px;}
  100% {left: 1000px;}

}
CSS Honey Bee Animation

Step3.

Add JavaScript/ jQuery

jQuery:

$(function() {
  $('#button').click(function() {
    $('#bee').addClass('moveright');
     setTimeout(function () {
    $("#bee").removeClass('moveright');
}, 4000);
  });
});

and JavaScript:

var i = 0;
function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("bar");  
    var width = 10;
    var id = setInterval(frame, 15);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        elem.style.width = width + "%";
        elem.innerHTML = width  + "%";
        
      }
    }
  }
}

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

Enjoy coding!

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 HTML JavaScript JQuery Web development

Sketchborad JavaScript

sketch board javascript

Do you like sketching? Did you know that you can sketch on Java Script canvas too?

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

What do you need to do?

To create the JavaScript sketch board you need to have the pencil cursor in .png/ SVG format (for practising you can use mine below) and follow the steps below:

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

Step1.

Add HTML

Create the canvas-wrap, add canvas and buttons.

<div id="canvas-wrap">
  <div class="sketch-board">
    <div class="paper"></div>
  </div>
  <div class="paperclip"></div>
<canvas id="canvas"></canvas>
<button class="button" id="clear">Clear</button>
<button class="button" id="undo">Undo</button>
<button class="button" id="brushBlack">Black</button>
<button class="button" id="brushYellow">Yellow</button>
<button class="button" id="brushRed">Red</button>
<button class="button" id="brushBlue">Blue</button>
<button class="button" id="brushGreen">Green</button>

</div>

Step2.

Add CSS

Set the background colour and the size:

body {
  background-color: #EFD5C3;
  height: 100vh;  
}

Add canvas-wrap:

#canvas-wrap {
  position: relative;
  left: 35%;
}

And the canvas with mouse cursor:

canvas {  
  background-color: #fff;
  cursor: url(https://lenadesignorg.files.wordpress.com/2020/06/pencil.png?w=79) 5 80, auto;
  z-index:100;
}

Style the sketchboard:

.sketch-board {
  position: absolute;
  width: 700px;
  height: 500px;
  background-color: #c19875;
  z-index:-5;
  border-radius: 30px;
  left: -80px;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}

.sketch-board:before {
  background-color: #EFD5C3;
  position: absolute;
  width: 50px;
  height: 170px;
  border-radius: 30px;
  content:"";
  left: 30px;
  top: 170px;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}

.paper {
  background-color: #e6e3dc;
  width: 500px;
  height: 350px;
  position: absolute;
  top: 90px;
  left: 120px;
}

.paperclip {
  position: absolute;
  width: 150px;
  height: 40px;
  border: 7px solid #c0c0c0;
  border-radius: 20px;
  left: 200px;
  top: 25px;
  box-shadow: 5px -5px 0 rgba(0,0,0,0.07);
  z-index:1;
}

.paperclip:after {
  position: absolute;
  content:"";
  width: 200px;
  height: 30px;
  top: -20px;
  left:-25px;
  background-color: #8b786d;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  border-radius: 20px;  
}

Style buttons:

.button {
  background-color: #00a6a6;
  border: none;
  border-radius:20px;
  color: #fff;
  padding: 7px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  top: 450px;
  left:45px;
  position: relative;
  transition-duration: 0.4s;
}

.button:hover {
  background-color: #73bfb8;
}
JavaScript drawing

Step3.

Add JavaScript/ jQuery

Note: Remember to add jQuery (code above) in the <head> section in your code.

var canvas = document.querySelector('canvas');
  canvas.style.position = 'absolute';
  canvas.style.top = "80px";
  canvas.style.left = "50px";

var ctx = canvas.getContext('2d');
canvas.width = 500;
canvas.height = 350;

var lastX;
var lastY;
var mouseX;
var mouseY;
var canvasOffset = $("#canvas").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var isMouseDown = false;
var brushSize = 3;
var brushColor = "#000";

ctx.lineJoin = ctx.lineCap = 'round';

var points = [];


function handleMouseDown(e) {
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);

    ctx.beginPath();
    if (ctx.lineWidth != brushSize) {
        ctx.lineWidth = brushSize;
    }
    if (ctx.strokeStyle != brushColor) {
        ctx.strokeStyle = brushColor;
    }
    ctx.moveTo(mouseX, mouseY);
    points.push({
        x: mouseX,
        y: mouseY,
        size: brushSize,
        color: brushColor,
        mode: "begin"
    });
    lastX = mouseX;
    lastY = mouseY;
    isMouseDown = true;
}

function handleMouseUp(e) {
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);

    isMouseDown = false;
    points.push({
        x: mouseX,
        y: mouseY,
        size: brushSize,
        color: brushColor,
        mode: "end"
    });
}


function handleMouseMove(e) {
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);

    if (isMouseDown) {
        ctx.lineTo(mouseX, mouseY);
        ctx.stroke();
        lastX = mouseX;
        lastY = mouseY;
       
        points.push({
            x: mouseX,
            y: mouseY,
            size: brushSize,
            color: brushColor,
            mode: "draw"
        });
    }
}

$("#canvas").mousedown(function (e) {
    handleMouseDown(e);
});
$("#canvas").mousemove(function (e) {
    handleMouseMove(e);
});
$("#canvas").mouseup(function (e) {
    handleMouseUp(e);
});


function redrawAll() {

    if (points.length == 0) {
        return;
    }

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (var i = 0; i < points.length; i++) {

        var pt = points[i];

        var begin = false;

        if (ctx.lineWidth != pt.size) {
            ctx.lineWidth = pt.size;
            begin = true;
        }
        if (ctx.strokeStyle != pt.color) {
            ctx.strokeStyle = pt.color;
            begin = true;
        }
        if (pt.mode == "begin" || begin) {
            ctx.beginPath();
            ctx.moveTo(pt.x, pt.y);
        }
        ctx.lineTo(pt.x, pt.y);
        if (pt.mode == "end" || (i == points.length - 1)) {
            ctx.stroke();
        }
    }
    ctx.stroke();
}

function undoLast() {
    points.pop();
    redrawAll();
}

$("#brushGreen").click(function () {
    brushColor = "#89bd9e";
});
$("#brushYellow").click(function () {
    brushColor = "#fde74c";
});
$("#brushRed").click(function () {
    brushColor = "#e55934";
});
$("#brushBlue").click(function () {
    brushColor = "#5bc0eb";
});

$("#brushBlack").click(function () {
    brushColor = "#000";
});

var interval;
$("#undo").mousedown(function () {
    interval = setInterval(undoLast, 20);
}).mouseup(function () {
    clearInterval(interval);
});

var clear = function(){
  ctx.clearRect(0,0,500,350);
};

$('#clear').on("click",clear);

To see the live output of the animation go to my Codepen.

Enjoy coding!

Categories
CSS JQuery Web development

Bitten Doughnut Animation

Some time ago I posted the tutorial CSS Doughnut Animation where I used the only CSS to create it. Today, I created similar Doughnut, but to animate “bites” I used jQuery.

CSS Bitten Doughnut

The doughnut has been bitten πŸ™‚

*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/JS

Step1.

Add HTML

Draw your Doughnut:

<div class="container">
  <div class="content">
    <div class="doughnut"></div>
    <div class="sugar"></div>
    <div class="sugar1"></div>
    <div class="right"></div>
    <div class="sprinkles">
      <div class="sprinkle1"></div>
      <div class="sprinkle2"></div>
      <div class="sprinkle3"></div>
    </div>
    <div class="bite">
      <div class="bite1"></div>
      <div class="bite2"></div>
      <div class="bite3"></div>
      <div class="bite4"></div>
      <div class="bite5"></div>
      <div class="bite6"></div>
      <div class="bite7"></div>
  
    </div>
    <div class="crumbs">
      <div class="crumb1"></div>
      <div class="crumb2"></div>
    </div>
    <div class="shadow"></div>
  </div>
</div>

Step2.

Add CSS

Set the position and the color of the background, the container, and the content:

body {
  background-color: #720026;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  
}
.container {
  position: relative;
  top:-50px;
}

.content {
  position: relative;
}

Style the doughnut:

.doughnut { 
    position: relative;
    border: 120px solid #FF9B54;
    border-radius: 50%;
    box-shadow: inset 5px 5px 1px #FF7F51, 5px 5px 1px #FF7F51;
    height:150px;
    width:150px;
    
}

.doughnut:after {
  content:"";
  position: absolute;
  height: 170px;
  width: 170px;
  border-top:100px solid #CE4257;
	border-right:100px solid #CE4257;
  border-left:100px solid #CE4257;
  border-bottom: 100px solid transparent;
	border-radius:50%;
  top:-115px;
  left:-110px;
  z-index:1;
  
  
}
.doughnut:before {
  content:"";
  position: absolute;
  width:115px;
  height:110px;
  background-color: #FF9B54;
  left:-90px;
  top:100px;
  z-index:2;
  transform: skew(23deg);
}
.sugar {
  position: absolute; 
  background-color: #CE4257;
  width: 40px;
  height: 50px;
  border-radius:100px;
  top:190px;
  z-index:3;
  left:74px;
  transform: skew(15deg);
  box-shadow: 0 5px 0 rgba(255, 255, 255, 0.3);
  
}
.sugar:after {
  content:"";
  position: absolute; 
  background-color: #FF9B54;
  width: 40px;
  height: 50px;
  border-radius:100px;
  left:-40px;
  box-shadow:inset 0 5px 0 rgba(255, 255, 255, 0.3);
  
}
.sugar:before {
  content:"";
  position:absolute;
  background-color: #CE4257;
  width:23px;
  height:35px;
  top:15px;
  left:-63px;
  border-radius:100px;
  transform: skew(-5deg);
  box-shadow: 0 5px 0 rgba(255, 255, 255, 0.3);
  
}
.sugar1 {
  position: absolute;
  width:120px;
  height:80px;
  background-color: #FF9B54;
  left:230px;
  top:258px;
  z-index:2;
  transform: skew(-30deg);
}

.sugar1:after {
  content:"";
  position: absolute;
  width:40px;
  height:40px;
  background-color: #CE4257;
  border-radius:100px;
  top:-25px;
  left:-2px;
  transform: skew(10deg);
  box-shadow:0 5px 0 rgba(255, 255, 255, 0.3);
  
}
.sugar1:before {
  content:"";
  position: absolute; 
  width:40px;
  height:40px;
  background-color: #FF9B54;
  z-index:3;
  border-radius:100px;
  left:39px;
  top:-20px;
  box-shadow:inset 0 5px 0 rgba(255, 255, 255, 0.3);
}
.right {
  position: absolute;
  background-color: #CE4257;
  width:36px;
  height:40px;
  left:331px;
  top:238px;
  z-index:4;
  border-radius:100px;
  transform: skew(-25deg);
  box-shadow:0px 5px 0 rgba(255, 255, 255, 0.3);
}
CSS Doughnut

Add some sprinkles:

.sprinkles {
  position: absolute;
  z-index:5;
}

.sprinkle1 {
  position: absolute; 
  border-radius:100px;
  height: 30px;
  width: 10px;
  background-color: #FEE440;
  box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
  top:-260px;
  left:50px;
  transform: rotate(20deg);
}
.sprinkle1:after {
  content:"";
  position: absolute; 
  border-radius:100px;
  height: 30px;
  width: 10px;
  background-color: #F15BB5;
  box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
  top:-60px;
  left:50px;
  transform: rotate(20deg);
}

.sprinkle1:before {
  content:"";
  position: absolute; 
  border-radius:100px;
  height: 30px;
  width: 10px;
  background-color: #00BBF9;
  box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
  top:-110px;
  left:100px;
  transform: rotate(-60deg);
}

.sprinkle2 {
  position: absolute; 
  border-radius:100px;
  height: 30px;
  width: 10px;
  background-color: #00F5D4;
  box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
  top:-260px;
  left:340px;
  transform: rotate(70deg);
}

.sprinkle2:after {
  content:"";
  position: absolute; 
  border-radius:100px;
  height: 30px;
  width: 10px;
  background-color: #00F5D4;
  box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
  top:200px;
  left:-160px;
  transform: rotate(30deg);
}

.sprinkle2:before {
  content:"";
  position: absolute; 
  border-radius:100px;
  height: 30px;
  width: 10px;
  background-color: #9B5DE5;
  box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
  top:100px;
  left:-160px;
  transform: rotate(30deg);
}

.sprinkle3 {
  position: absolute; 
  border-radius:100px;
  height: 30px;
  width: 10px;
  background-color: #FEE440;
  box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
  top:-210px;
  left:300px;
  transform: rotate(-40deg);
}

.sprinkle3:before {
  content:"";
  position: absolute; 
  border-radius:100px;
  height: 30px;
  width: 10px;
  background-color: #9B5DE5;
  box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
  top:-90px;
  left:30px;
  transform: rotate(30deg);
}

.sprinkle3:after {
  content:"";
  position: absolute; 
  border-radius:100px;
  height: 30px;
  width: 10px;
  background-color: #F15BB5;
  box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
  top:-120px;
  left:60px;
  transform: rotate(-180deg);
}
CSS Sprinkle

Shadow and crumbs:

.crumbs {
  position: absolute;
  
}

.crumb1 {
  position: absolute;
  background-color: #FF9B54;
  border-radius:50%;
  box-shadow: inset 5px 5px 0 #FF7F51;
  width:30px;
  height:30px;
  
}

.crumb1:after {
  content:"";
  position: absolute;
  background-color: #FF9B54;
  border-radius:50%;
  box-shadow: inset 5px 5px 0 #FF7F51;
  width:20px;
  height:20px;
  left:-30px;
  top:-30px;
  
}

.crumb1:before {
  content:"";
  position: absolute;
  background-color: #FF9B54;
  border-radius:50%;
  box-shadow: inset 5px 5px 0 #FF7F51;
  width:10px;
  height:10px;
  left:-50px;
  top:10px;
  
}

.crumb2 {
  position: absolute;
  background-color: #FF9B54;
  border-radius:50%;
  box-shadow: inset -5px -5px 0 #FF7F51;
  width:30px;
  height:30px;
  top:-20px; 
  left:350px;
}

.crumb2:after {
  content:"";
  position: absolute;
  background-color: #FF9B54;
  border-radius:50%;
  box-shadow: inset -5px -5px 0 #FF7F51;
  width:20px;
  height:20px;
  left:-40px;
  top:40px;
}

.crumb2:before {
  content:"";
  position: absolute;
  background-color: #FF9B54;
  border-radius:50%;
  box-shadow: inset -5px -5px 0 #FF7F51;
  width:10px;
  height:10px;
  left:60px;
  top:30px;
}

.shadow {
  position: absolute;
  width:500px;
  height:100px;
  background-color: rgba(0,0,0,0.07);
  border-radius:50%;
  left:-50px;
  top:350px;
  z-index:-2;
}
CSS Doughnut

Create the bites:

.bite {
  position: absolute;
  z-index:100;
}

.bite1 {
  position: absolute; 
  background-color: #720026;
  width:100px;
  height:100px;
  border-radius:50%;
  left:250px;
  top:-380px;
 
}
.bite1:after {
  content:"";
  position:absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  top:40px;
  left:60px;
}

.bite1:before {
  content:"";
  position:absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  top:-40px;
  left:-30px;
}

.bite2 {
  position: absolute;
  background-color: #720026;
  width:100px;
  height:100px;
  border-radius:50%;
  top:-400px;
  left:90px;  
}

.bite2:after {
  content:"";
  position: absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  left:65px;
  top:0;
}

.bite2:before {
  content:"";
  position: absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  left:-65px;
  top:0;
}

.bite3 {
  position: absolute; 
  background-color: #720026;
  width:100px;
  height:100px;
  border-radius:50%;
  left:310px;
  top:-220px;
}

.bite3:after {
  content:"";
  position: absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  left:15px;
  top:-50px;
}

.bite3:before {
  content:"";
  position: absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  left:15px;
  top:60px;
}

.bite4 {
  position: absolute; 
  background-color: #720026;
  width:100px;
  height:100px;
  border-radius:50%;
  left:210px;
  top:-320px;
}

.bite4:after {
  content:"";
  position: absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  left:55px;
  top:35px;
}

.bite4:before {
  content:"";
  position: absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  left:-35px;
  top:-35px;
}

.bite5 {
  position: absolute;
  background-color: #720026;
  width:100px;
  height:100px;
  border-radius:50%;
  left:50px;
  top:-330px;
}

.bite5:before {
  content:"";
  position: absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  left:75px;
  top:5px;
}

.bite5:after {
  content:"";
  position: absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  left:-70px;
  top:0px;
}
.bite6 {
  position: absolute; 
  background-color: #720026;
  width:100px;
  height:100px;
  border-radius:50%;
  left:-10px;
  top:-220px;
 
}
.bite6:after {
  content:"";
  position:absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  top:50px;
  left:10px;
}

.bite6:before {
  content:"";
  position:absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  top:-40px;
  left:0;
}

.bite7 {
  position: absolute; 
  background-color: #720026;
  width:100px;
  height:100px;
  border-radius:50%;
  left:50px;
  top:-220px;
 
}
.bite7:after {
  content:"";
  position:absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  top:50px;
  left:30px;
}

.bite7:before {
  content:"";
  position:absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  top:-40px;
  left:15px;
}
Bitten doughnut

Step3.

Add jQuery /JS

(function($){ 
    
    var el = $('.bite1, .bite2, .bite3, .bite4, .bite5, .bite6, .bite7');
    var animationLength = 400;
    var duration = el.length * animationLength + animationLength;
    var clearAfter = 100;
    var animation;
    
    function fadeNext(collection){
        collection.eq(0).fadeIn(animationLength, function(){
            (collection=collection.slice(1)).length 
            && fadeNext(collection)
        });
    }
    
    function play(){
        fadeNext(el);
        animation = setTimeout(function(){
            el.hide();
            play();
        }, duration);
    }
    play();
    
    setTimeout(function(){
         clearTimeout(animation);   
    }, duration * clearAfter);
})(jQuery)

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

Enjoy coding!

Categories
CSS JavaScript JQuery Web development

jQuery mouseover() Method/ Escaping Dots Animation

The mouseover event occurs when the mouse pointer is over the selected element.

The mouseover() method triggers the mouseover event, or attaches a function to run when a mouseover event occurs.

jQuery mouseover() Method

Syntax:

$(selector).mouseover()

Attach a function to the mouseover event (optional):

$(selector).mouseover(function)

Example:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").mouseover(function(){
    $("p").css("background-color", "pink");
  });
  $("p").mouseout(function(){
    $("p").css("background-color", "green");
  });
});
</script>
</head>
<body>

<p>Move the mouse pointer over this paragraph.</p>

</body>
</html>

Output:

Let’s go to the animation:

By moving the mouse cursor on the elements make them moving.

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

What you need to do?

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

Step1.

Add HTML

<div class="container">
  <div class="bokeh">
  <div class="bokeh1"></div>
  <div class="bokeh2"></div>
  <div class="bokeh3"></div>
  <div class="bokeh4"></div>
  <div class="bokeh5"></div>
  <div class="bokeh6"></div>
  <div class="bokeh7"></div>
  <div class="bokeh8"></div>
  <div class="bokeh9"></div>
  <div class="bokeh10"></div>
  <div class="bokeh11"></div>
  <div class="bokeh12"></div>
  <div class="bokeh13"></div>
  <div class="bokeh14"></div>
  <div class="bokeh15"></div>
  <div class="bokeh16"></div>
  <div class="bokeh17"></div>
  <div class="bokeh18"></div>
  <div class="bokeh19"></div>
  <div class="bokeh20"></div>
  </div>
</div>

Step2.

Add CSS

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

body {
  background: black;
  height: 100vh;
}
.container {
  position: relative; 
  
}

Style dots:

.bokeh {
 position: relative;
 width: 75%;
 height: 80vh;
 
}

.bokeh1 {
 position: absolute;
 border-radius:50%;
 background-color: #FF1654;
 width: 200px;
 height: 200px;
 opacity: 0.5;
 box-shadow:inset 10px 5px 0 rgba(0,0,0,0.07);
 animation: move 5s linear infinite;
 animation: move 13s ease infinite;
}
.bokeh2 {
 position: absolute;
 border-radius:50%;
 background-color: #F3FFBD;
 width: 160px;
 left: 200px;
 height: 160px;
 opacity: 0.5;
 box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
 animation: move 11s ease infinite;
 
}
.bokeh3 {
  position: absolute;
  border-radius:50%;
  background-color: #247BA0;
  width: 160px;
  left: 200px;
  height: 160px;
  opacity: 0.5;
  top:100px;
  box-shadow:inset 10px 5px 0 rgba(0,0,0,0.07);
  animation: move 9s ease infinite;
  
}

.bokeh4 {
  position: absolute;
  border-radius:50%;
  background-color: #FF006E;
  width: 160px;
  height: 160px;
  opacity: 0.5;
  top:300px;
  left:500px;
  box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
  animation: move 12s ease infinite;
}

.bokeh5 {
  position: absolute;
  border-radius:50%;
  background-color: #8338EC;
  width: 160px;
  height: 160px;
  opacity: 0.5;
  top:400px;
  left:600px;
  box-shadow:inset 10px 5px 0 rgba(0,0,0,0.07);
  animation: move 10s ease infinite;
}

.bokeh6 {
  position: absolute;
  border-radius:50%;
  background-color: #FFBE0B;
  width: 100px;
  height: 100px;
  opacity: 0.5;
  top:300px;
  left:700px;
  box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
  animation: move 11s ease infinite;
}
.bokeh7 {
  position: absolute;
  border-radius:50%;
  background-color: #FB5607;
  width: 100px;
  height: 100px;
  opacity: 0.5;
  top:100px;
  left:800px;
  box-shadow:inset -10px 5px 0 rgba(0,0,0,0.07);
  animation: move 9s ease infinite;
}

.bokeh8 {
  position: absolute;
  border-radius:50%;
  background-color: #EF476F;
  width: 100px;
  height: 100px;
  opacity: 0.5;
  top:200px;
  left:600px;
  box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
  animation: move 12s ease infinite;
}

.bokeh9 {
  position: absolute;
  border-radius:50%;
  background-color: #FFD166;
  width: 100px;
  height: 100px;
  opacity: 0.5;
  top:300px;
  left:400px;
  box-shadow:inset 10px 5px 0 rgba(0,0,0,0.07);
  animation: move 8s ease infinite;
}

.bokeh10 {
  position: absolute;
  border-radius:50%;
  background-color: #06D6A0;
  width: 200px;
  height: 200px;
  opacity: 0.5;
  top:500px;
  left:400px;
  box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
  animation: move 10s ease infinite;
  
}
.bokeh10 {
  position: absolute;
  border-radius:50%;
  background-color: #06D6A0;
  width: 200px;
  height: 200px;
  opacity: 0.5;
  top:500px;
  left:400px;
  box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
  animation: move 10s ease infinite;
  
}

.bokeh11 {
  position: absolute;
  border-radius:50%;
  background-color: #118AB2;
  width: 200px;
  height: 200px;
  opacity: 0.5;
  top:200px;
  left:800px;
  box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
  animation: move 10s ease infinite;
  
}

.bokeh12 {
  position: absolute;
  border-radius:50%;
  background-color: #06D6A0;
  width: 180px;
  height: 180px;
  opacity: 0.5;
  top:200px;
  left:1100px;
  box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
  animation: move 12s ease infinite;
  
}

.bokeh13 {
  position: absolute;
  border-radius:50%;
  background-color: #073B4C;
  width: 180px;
  height: 180px;
  opacity: 0.5;
  top:300px;
  left:1500px;
  box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
  animation: move 14s ease infinite;
  
}

.bokeh14 {
  position: absolute;
  border-radius:50%;
  background-color: #4ECDC4;
  width: 100px;
  height: 100px;
  opacity: 0.5;
  top:200px;
  left:1600px;
  box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
  animation: move 12s ease infinite;
  
}

.bokeh15 {
  position: absolute;
  border-radius:50%;
  background-color: #FF6B6B;
  width: 100px;
  height: 100px;
  opacity: 0.5;
  top:100px;
  left:1500px;
  box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
  animation: move 8s ease infinite;
  
}

.bokeh16 {
  position: absolute;
  border-radius:50%;
  background-color: #FFE66D;
  width: 100px;
  height: 100px;
  opacity: 0.5;
  top:200px;
  left:1300px;
  box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
  animation: move 11s ease infinite;
  
}

.bokeh17 {
  position: absolute;
  border-radius:50%;
  background-color: #F3722C;
  width: 160px;
  height: 160px;
  opacity: 0.5;
  top:300px;
  left:1400px;
  box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
  animation: move 9s ease infinite;
  
}

.bokeh17 {
  position: absolute;
  border-radius:50%;
  background-color: #90BE6D;
  width: 160px;
  height: 160px;
  opacity: 0.5;
  top:100px;
  left:1300px;
  box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
  animation: move 13s ease infinite;
  
}

.bokeh18 {
  position: absolute;
  border-radius:50%;
  background-color: #F8961E;
  width: 160px;
  height: 160px;
  opacity: 0.5;
  top:100px;
  left:800px;
  box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
  animation: move 11s ease infinite;
  
}

.bokeh18 {
  position: absolute;
  border-radius:50%;
  background-color: #F94144;
  width: 160px;
  height: 160px;
  opacity: 0.5;
  top:200px;
  left:900px;
  box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
  animation: move 9s ease infinite;
  
}

.bokeh19 {
  position: absolute;
  border-radius:50%;
  background-color: #577590;
  width: 160px;
  height: 160px;
  opacity: 0.5;
  top:100px;
  left:1100px;
  box-shadow:inset 10px 5px 0 rgba(0,0,0,0.07);
  animation: move 14s ease infinite;
  
}

.bokeh20 {
  position: absolute;
  border-radius:50%;
  background-color: #F3722C;
  width: 100px;
  height: 100px;
  opacity: 0.5;
  top:300px;
  left:1200px;
  box-shadow:inset 10px 5px 0 rgba(0,0,0,0.07);
  animation: move 14s ease infinite;
  
}

Step3.

Add CSS Animation

@keyframes move {
	from {
		transform: rotate(0deg)
		           translate(200px)
               rotate(0deg);
	}
	to {
		transform: rotate(360deg)
		           translate(100px) 
               rotate(-360deg);
	}
}

Step4.

Add jQuery

jQuery(function($) {
    $(".bokeh1, .bokeh2, .bokeh3, .bokeh4, .bokeh5, .bokeh6, .bokeh7, .bokeh8, .bokeh9, .bokeh10, .bokeh11, .bokeh11, .bokeh12, .bokeh13, .bokeh14, .bokeh15, .bokeh16, .bokeh17, .bokeh18, .bokeh19, .bokeh20").mouseover(function() {
        var dWidth = $(document).width() - 50, 
            dHeight = $(document).height() - 50, 
            nextX = Math.floor(Math.random() * dWidth),
            nextY = Math.floor(Math.random() * dHeight);
        $(this).animate({ left: nextX + 'px', top: nextY + 'px' });
    });
});

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

Enjoy coding!

Categories
CSS JavaScript JQuery Web development

Coraline/ Other Mother – Walking Animation

Some time ago I watched a movie Coraline (2009) and today I’ll show the animation with one of the main characters – Other Mother.

If you haven’t seen the movie I can truly recommend you to watch it.

CSS Other Mother

In this animation, we can move the Other Mother in the right, or the left side using the control buttons.

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

What do you need to do?

You need to have a walking cycle image in .png format (for the training purposes you can use mine which I drew in Adobe Animate CC) and follow the steps below:

CSS Walking Cycle
  1. Add HTML
  2. Add CSS
  3. Add JavaScript/jQuery

Before you start – remember to add jQuery in your head section. You can read – how to add jQuery to HTML here.

Step1.

Add HTML

Draw the container, door, other Mother and the buttons.

<div class="container">
<div class="othermother"></div>
<div class="door">
<div class="keyhole"></div>
  </div>
<button id = "go"> Walk </button>
<button id = "left"> Left </button> 
<button id = "right"> Right </button> 
  <p>Push the buttons to move the Other Mother.</p>
  </div>

Step2.

Add CSS

Set the colour, and position of the background, and the container:

body {
  background-color: #896978;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;  
}

.container {
  position: relative;
}

Style the door:

.door {
  position: absolute;
  width: 75px;
  height: 90px;
  background-color: #7E390B;
  top:23px;
  border: 5px solid #AEB77D;
  box-shadow:inset -10px 10px 0 rgba(0,0,0,0.07);
  z-index:-100;
}

.door:after {
  content:"";
  border-radius:50% 50% 0 0;
  position:absolute;
  width:300px;
  height:300px;
  background-color: rgba(0,0,0,0.07);
  z-index:-5;
  top:-100px;
  left:-55px;
}

.door:before {
  content:"";
  position: absolute;
  border-bottom: 105px solid rgba(0,0,0,0.09);
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  height: 0;
  width: 86px;
  top:95px;
  left:-30px;
  
}


.keyhole {
  position:absolute; 
  width:25px;
  height:25px;
  border-radius:50%; 
  background-color: #AEB77D;
  box-shadow:inset 3px -3px 0 rgba(0,0,0,0.07);
  top:35px;
  left:5px;
}
.keyhole:after {
  content:"";
  position: absolute;
  background-color: black;
  width:10px;
  height:10px;
  border-radius:50%;
  top:5px;
  left:7px;
}
.keyhole:before {
  content:"";
  position:absolute; 
  border-bottom: 15px solid black;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  height: 0;
  width: 2px;
  top:7px;
  left:6px;
}
CSS Other Mother

Add the Other Mother:

.othermother {
  z-index:100;
  top:-35px;
  position: absolute;
  height: 224px;
  width: 130px; 
  background-image:url(
"https://lenadesign.org/wp-content/uploads/2020/05/1.png?w=1024"); 
  
}

button{
  margin-top: 200px; 
  background-color: #3498DB;
  display: inline-block;
  border: none;
  color: white;
  text-align: center;
  font-size: 16px;
  border-radius:20px;
  
}

.left{
  transform: scaleX(-1); 
}
CSS Walking Cycle

Step3.

Add JavaScript/jQuery

$(document).ready(function(){
  var leftButton = $("#left"); 
  var rightButton = $("#right"); 
  var goButton = $("#go"); 
  var walking = false; 
  var stepNum = 5; 
  var stepTimeout; 
  var divWindow = $(".othermother"); 
  var divPosition = 0; 
  var direction = 1; 
  var speed = 10; 
   
  goButton.click(function(){
    walking = (!walking) ? true : false; 
    if(walking){
      goButton.html("Stop"); 
      step();  
    } 
    else{
      goButton.html("Walk"); 
      clearTimeout(stepTimeout); 
    }
  });
  
  leftButton.click(function(){
    divWindow.addClass("left"); 
    direction = -1; 
  }); 
  
  rightButton.click(function(){
    divWindow.removeClass("left"); 
    direction = 1; 
  }); 
  
  function step(){
    divWindow.css("background-position", (-130 * stepNum) + "px"); 
    divPosition = divPosition + (direction * speed);
    divWindow.css("left", divPosition + "px"); 
    stepNum = (stepNum + 1) % 8; 
    stepTimeout = setTimeout(step, 750/speed); 
  }; 
}); 

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

Enjoy coding!

Categories
CSS JavaScript JQuery

CSS/jQuery/JS Playing Cube

Let’s take a closer look on another example of the tutorial CSS Perspective Property, CSS Perspective-orgin Property & 3d Cube and let’s create a 3d Playing Cube.

CSS Playing Cube

Click and drag the cube and change its the position!

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

To create a 3d playing cube you will need 6 pictures. You can use these below:

and then:

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

Step1.

Add HTML

<div class="game">
  <div class="cube">
  <div class="side front"></div>
  <div class="side back"></div>
  <div class="side right"></div>
  <div class="side left"></div>
  <div class="side top"></div>
  <div class="side bottom"></div>
  </div>
</div>

Step2.

Add CSS

body {
  height:80vh;
  background: linear-gradient(6deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
}

.game {
  perspective: 800px;
}
.cube {
  font-size: 50px;
  width: 100px;
  margin: 4.5em auto;
  transform-style: preserve-3d;
  transform: rotateX(-45deg) rotateY(30deg);
}

.side {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  text-align: center;
  line-height: 2em;
}

.front {transform: translateZ(1em);
        background-image:url('https://lenadesign.org/wp-content/uploads/2020/04/1-1.png?w=100');}
.top {transform: rotateX(90deg) translateZ(1em);
       background-image:url('https://lenadesign.org/wp-content/uploads/2020/04/4-1.png?w=100');}

.right {transform: rotateY(90deg) translateZ(1em);
background-image:url('https://lenadesign.org/wp-content/uploads/2020/04/5-1.png?w=100');}

.left {transform: rotateY(-90deg) translateZ(1em);
background-image:url('https://lenadesign.org/wp-content/uploads/2020/04/2-1.png?w=100');}

.bottom {transform: rotateX(-90deg) translateZ(1em);
background-image:url('https://lenadesign.org/wp-content/uploads/2020/04/3-1.png?w=100');}

.back {transform: rotateY(-180deg) translateZ(1em);
background-image:url('https://lenadesign.org/wp-content/uploads/2020/04/6-1.png?w=100');}

Step3.

Add jQuery/JavaScript

var lastMouseX = 0,
	lastMouseY = 0;
var rotX = 0,
	rotY = 0;

$(document).on("mousedown", function(ev) {
	lastMouseX = ev.clientX;
	lastMouseY = ev.clientY;
	$(document).on("mousemove", mouseMoved);
});
$(document).on("mouseup", function() {
	$(document).off("mousemove", mouseMoved);
});

function mouseMoved(ev) {
	var deltaX = ev.pageX - lastMouseX;
	var deltaY = ev.pageY - lastMouseY;

	lastMouseX = ev.pageX;
	lastMouseY = ev.pageY;

	rotY -= deltaX * 0.1;
	rotX += deltaY * 0.1;

	$(".cube").css("transform", "translateX( 0px) rotateX( " + rotX + "deg) rotateY(" + rotY + "deg)");
}

To see the live output go to lenastanley.com.

Enjoy coding!

Categories
CSS JavaScript JQuery Web development

CSS & jQuery 3d Cube

3d Cube

From the tutorial CSS Perspective property, we know now how to create 3d Cube. To make a Cube move/rotate we can add some JavaScript and jQuery.

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

The cube is gonna move with the move of the mouse.

What do you need to do?

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

Step1.

Add HTML

Each cube has 6 sides. We need to create them in HMTL:

<div id="wrap">
    <div id="D3Cube">
        <div id="side1"></div>
        <div id="side2"></div>
        <div id="side3"></div>
        <div id="side4"></div>
        <div id="side5"></div>
        <div id="side6"></div>
    </div>
</div>

Step2.

Add CSS

body {
  background: linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(233,210,148,1) 100%);
  height:100vh;
  display:flex;
  justify-content: center;
  align-items: center;
}

#wrap {
    position:relative;
}
#D3Cube {
    width: 250px;
    height: 250px;
    transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    -moz-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    -webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    margin: auto;
    position: relative;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
#D3Cube > div {
    position: absolute;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    width: 250px;
    height: 250px;
    float: left;
    overflow: hidden;
    opacity: 0.8;
}
#side1 {
    transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(125px);
    -moz-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(125px);
    -webkit-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(125px);
    background-color: #F9E79F;
}
#side2 {
    transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(125px);
    -moz-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(125px);
    -webkit-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(125px);
    background-color: #85C1E9;
}
#side3 {
    transform: translateX(0px) translateY(0px) translateZ(125px);
    -moz-transform: translateX(0px) translateY(0px) translateZ(125px);
    -webkit-transform: translateX(0px) translateY(0px) translateZ(125px);
    background-color: #F1948A;
}
#side4 {
    transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(125px);
    -moz-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(125px);
    -webkit-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(125px);
    background-color: #1ABC9C;
}
#side5 {
    transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(125px);
    -moz-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(125px);
    -webkit-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(125px);
    background-color: #8E44AD;
}
#side6 {
    transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(125px);
    -moz-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(125px);
    -webkit-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(125px);
    background-color: #D7DBDD;
   }

Step3.

Add JavaScript/jQuery

$(document).mousemove(function(e) {
  $('#3dCube').css('transform', 'rotateX(0deg) rotateY(0deg)');
  
  var rotate_X;
  var rotate_Y;
  var invert = false;
  
  if (invert) {
    rotate_X = e.pageX;
    rotate_Y = e.pageY;
  } else if (!invert) {
    rotate_X = e.pageX;
    rotate_Y = -e.pageY;
  }
  
  $('#D3Cube').css('transform', 'rotateX(' + rotate_Y + 'deg) rotateY(' + rotate_X + 'deg)')
});

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

Enjoy coding!