Categories
CSS JavaScript Web development

JavaScript onmousedown event/ Astronaut

spacecraft

Today, I’ll show you an example of CSS & JavaScript Animation using the JavaScript onmousedown event (addEventListener() method).

The JavaScript onmousedown event occurs when a user presses a mouse button over an element and, as you can see animation below- by pressing on the Astronaut we can move him to the place on the desktop which we like.

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

What do you need to do?

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

Step1.

Add HTML

<div class="container">
  <div class="astronaut">
    <div class="head"></div>
    <div class="uniform"></div>
    <div class="legs"></div>
    <div class="arm"></div>
    <div class="arm1"></div>
  </div>
  <div class="stars">
    <div class="star1"></div>
    <div class="star2"></div>
    <div class="star3"></div>
    <div class="star4"></div>
    <div class="star5"></div>
    <div class="star6"></div>
    <div class="star7"></div>
  </div>
</div>

Step2.

Add CSS

Set the colour of the background:

body {
background: rgb(20,2,10);
background: linear-gradient(90deg, rgba(20,2,10,1) 0%, rgba(6,37,73,1) 76%, rgba(6,37,73,1) 83%, rgba(12,15,19,1) 95%);
margin: 100px;

}

Create the container:

.container {
  position: relative;
  left: 35%;
  
}

Style the Astronaut:

.astronaut {
  position: relative; 
  display: block; 
  animation: space 6s linear infinite alternate;
}
.head {
  position: absolute;
  border-radius: 50%;
  border: 10px solid #fff;
  width: 100px;
  height: 100px;
  background: rgb(121,121,121);
  background: radial-gradient(circle, rgba(121,121,121,1) 17%, rgba(6,37,73,1) 76%, rgba(6,37,73,1) 83%, rgba(20,2,10,1) 100%);
  box-shadow: 2px 2px 4px rgba(0,0,0,0.07); 
}
.head:after {
  content:"";
  position: absolute;
  background-color: #fff;
  width: 10px;
  height: 30px;
  left:-19px;
  top: 35px;
  border-radius: 20px;
}
.head:before {
  content:"";
  position: absolute;
  background-color: #fff;
  width: 10px;
  height: 30px;
  left:109px;
  top: 35px;
  border-radius: 20px;
}
.uniform {
  position: absolute;
  background-color: #fff;
  width: 120px;
  height: 150px;
  top: 100px;
  border-radius: 20px 20px 50px 50px;
  box-shadow:inset -10px -15px 0 rgba(0,0,0,0.07);
  z-index:-1;
}
.uniform:after {
  content:"";
  background-color:rgba(0,0,0,0.07);
  width: 70px;
  height: 50px;
  position: absolute;
  top: 30px;
  left: 20px;
  border-radius: 10px;
  box-shadow:inset -2px -2px 0 rgba(0,0,0,0.07);
}
.uniform:before {
  content:"";
  position: absolute;
  background-color: #D92A5F;
  width: 70px;
  height: 20px;
  top: 45px;
  left: 20px;
  box-shadow: 0 2px 4px #818181; 
}
.legs {
  position: absolute;
  background-color: #fff;
  width: 55px;
  height: 110px;
  border-radius: 20px 20px 50px 50px;
  box-shadow:inset -5px -15px 0 rgba(0,0,0,0.07);
  top: 200px;
  z-index:-3;
}
.legs:after {
  content:"";
  position: absolute;
  background-color: #fff;
  width: 55px;
  height: 110px;
  border-radius: 20px 20px 50px 50px;
  box-shadow:inset -5px -15px 0 rgba(0,0,0,0.07);
  z-index:-3;
  left:65px;
}
.arm {
  position: absolute;
  background-color: #fff;
  width: 45px;
  height: 110px;
  border-radius: 20px 20px 50px 50px;
  box-shadow:inset -5px -15px 0 rgba(0,0,0,0.07);
  top:100px;
  left: -40px;
  transform: rotate(50deg);
  z-index:-3;
}
.arm1 {
  position: absolute;
  background-color: #fff;
  width: 45px;
  height: 110px;
  border-radius: 20px 20px 50px 50px;
  box-shadow:inset -5px -15px 0 rgba(0,0,0,0.07);
  top:100px;
  left: 120px;
  transform: rotate(-50deg);
  z-index:-3;
}
.stars {
  position: absolute;
  z-index:-5;
  
}
.star1 {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  animation: flash .7s ease infinite alternate;
}
.star1:after {
  content:"";
  position:absolute;
  width: 5px;
  height: 5px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: 200px;
  top: 50px;
  animation: flash .5s ease infinite alternate;
}
.star1:before {
  content:"";
  position:absolute;
  width: 5px;
  height: 5px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: -200px;
  top: 150px;
  animation: flash .8s ease infinite alternate;
}
.star2 {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: 350px;
  top: 100px;
  animation: flash .7s ease infinite alternate;
}
.star2:after {
  content:"";
  position:absolute;
  width: 5px;
  height: 5px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: 200px;
  top: 50px;
  animation: flash .5s ease infinite alternate;
}
.star2:before {
  content:"";
  position:absolute;
  width: 5px;
  height: 5px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: -200px;
  top: 150px;
  animation: flash .7s ease infinite alternate;
}
.star3 {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: -350px;
  top: 80px;
  animation: flash .6s ease infinite alternate;
}
.star3:after {
  content:"";
  position:absolute;
  width: 5px;
  height: 5px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: 200px;
  top: 50px;
  animation: flash .7s ease infinite alternate;
}
.star3:before {
  content:"";
  position:absolute;
  width: 5px;
  height: 5px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: -200px;
  top: 150px;
  animation: flash .9s ease infinite alternate;
}
.star4 {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: 550px;
  top: 180px;
  animation: flash .8s ease infinite alternate;
}
.star4:after {
  content:"";
  position:absolute;
  width: 5px;
  height: 5px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: 200px;
  top: 50px;
  animation: flash .7s ease infinite alternate;
}
.star4:before {
  content:"";
  position:absolute;
  width: 5px;
  height: 5px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: -200px;
  top: 150px;
  animation: flash .6s ease infinite alternate;
}
.star5 {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: 650px;
  top: 50px;
  animation: flash .4s ease infinite alternate;
}
.star5:after {
  content:"";
  position:absolute;
  width: 5px;
  height: 5px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: 200px;
  top: 50px;
  animation: flash .9s ease infinite alternate;
}
.star5:before {
  content:"";
  position:absolute;
  width: 5px;
  height: 5px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: -200px;
  top: 150px;
  animation: flash .7s ease infinite alternate;
}
.star6 {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: 50px;
  top: 200px;
  animation: flash .8s ease infinite alternate;
}
.star6:after {
  content:"";
  position:absolute;
  width: 5px;
  height: 5px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: 200px;
  top: 50px;
  animation: flash .7s ease infinite alternate;
}
.star6:before {
  content:"";
  position:absolute;
  width: 5px;
  height: 5px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: -200px;
  top: 150px;
  animation: flash .4s ease infinite alternate;
}
.star7 {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: 850px;
  top: 180px;
  animation: flash .9s ease infinite alternate;
}
.star7:after {
  content:"";
  position:absolute;
  width: 5px;
  height: 5px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: 200px;
  top: 50px;
  animation: flash .8s ease infinite alternate;
}
.star7:before {
  content:"";
  position:absolute;
  width: 5px;
  height: 5px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: -200px;
  top: 150px;
  animation: flash .5s ease infinite alternate;
}

Step3.

Add CSS Animation

To make an astronaut fly in the space:

@keyframes space {
	0%{transform:translateY(-50px) rotate(-12deg);}
	100%{ transform:translateY(-100px) rotate(10deg)};
}

To make stars flash:

@keyframes flash {
	from { opacity: 1; }	
	to { opacity: 0; }
}

Step4.

Add JavaScript

To make an astronaut move:

var elem = document.querySelector('.container'), 
div = document.querySelector('.astronaut'), 
         x = 0, 
 
         y = 0, 
 
         mousedown = false; 
 
 div.addEventListener('mousedown', function (e) {  
     
     mousedown = true; 
     
     x = div.offsetLeft - e.clientX; 

     y = div.offsetTop - e.clientY; 

 }, true); 

 
 
 div.addEventListener('mouseup', function (e) { 

     

     mousedown = false; 
 
 }, true); 


 elem.addEventListener('mousemove', function (e) { 

     
     if (mousedown) { 

        
         div.style.left = e.clientX + x + 'px'; 
         div.style.top = e.clientY + y + 'px'; 
     }  
 }, true); 

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

Enjoy coding!

Leave a Reply