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

Roll the dice!

We know now how to toss a coin using JavaScript, so why not to try a roll the dice too?

CSS Dice 3d

Try to roll double six!

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

To create the Dice game follow the steps below:

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

Step1.

Add HTML

Create the Game container and another one for dice, and dots.

Note: to creating the dice you need to know how to create 3d cube. If you need more information about 3d cube and CSS perspective check the tutorial CSS Perspective Property, CSS Perspective-origin Property and 3d Cube.

 <div class="game">
    <div class="container">
      <div id='dice1' class="dice dice-one">
        <div id="dice-one-side-one" class='side one'>
          <div class="dot one-1"></div>
        </div>
        <div id="dice-one-side-two" class='side two'>
          <div class="dot two-1"></div>
          <div class="dot two-2"></div>
        </div>
        <div id="dice-one-side-three" class='side three'>
          <div class="dot three-1"></div>
          <div class="dot three-2"></div>
          <div class="dot three-3"></div>
        </div>
        <div id="dice-one-side-four" class='side four'>
          <div class="dot four-1"></div>
          <div class="dot four-2"></div>
          <div class="dot four-3"></div>
          <div class="dot four-4"></div>
        </div>
        <div id="dice-one-side-five" class='side five'>
          <div class="dot five-1"></div>
          <div class="dot five-2"></div>
          <div class="dot five-3"></div>
          <div class="dot five-4"></div>
          <div class="dot five-5"></div>
        </div>
        <div id="dice-one-side-six" class='side six'>
          <div class="dot six-1"></div>
          <div class="dot six-2"></div>
          <div class="dot six-3"></div>
          <div class="dot six-4"></div>
          <div class="dot six-5"></div>
          <div class="dot six-6"></div>
        </div>
      </div>
   </div>
    <div class="container">
      <div id='dice2' class="dice dice-two">
        <div id="dice-two-side-one" class='side one'>
          <div class="dot one-1"></div>
        </div>
        <div id="dice-two-side-two" class='side two'>
          <div class="dot two-1"></div>
          <div class="dot two-2"></div>
        </div>
        <div id="dice-two-side-three" class='side three'>
          <div class="dot three-1"></div>
          <div class="dot three-2"></div>
          <div class="dot three-3"></div>
        </div>
        <div id="dice-two-side-four" class='side four'>
          <div class="dot four-1"></div>
          <div class="dot four-2"></div>
          <div class="dot four-3"></div>
          <div class="dot four-4"></div>
        </div>
        <div id="dice-two-side-five" class='side five'>
          <div class="dot five-1"></div>
          <div class="dot five-2"></div>
          <div class="dot five-3"></div>
          <div class="dot five-4"></div>
          <div class="dot five-5"></div>
        </div>
        <div id="dice-two-side-six" class='side six'>
          <div class="dot six-1"></div>
          <div class="dot six-2"></div>
          <div class="dot six-3"></div>
          <div class="dot six-4"></div>
          <div class="dot six-5"></div>
          <div class="dot six-6"></div>
        </div>
      </div> 
   </div>
   <div id='roll' class='roll-button'><button>Roll dice!</button></div>
  </div> 

Step2.

Add CSS

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

body {
  background-color: #6a994e;
  perspective: 900px; 
  height: 100vh;
 }

.game {
  position: relative;
  width: 100%;
  height: 50%; 
}

.container {
  position: relative;
  display: inline-block;
  left:40%;
  top: 200px;

}

Style the button:

.roll-button {
  margin-left: 15px; }

button {
  position: absolute;
  left:55%;
  top:-350px;
  padding: 15px 50px;
  color: #fff;
  background-color: #f4d35e;
  border: none;
  font-size: 20px;
  border-radius: 20px; 
  box-shadow: 1px 3px #50514F;
  outline: none;
  transition: .3s; }

button:hover, button:active {
  outline: none;
  background: #50514F;
  cursor: pointer;
  margin-top: 15px; }

Add dice and dots:

.dice {
  position: relative;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transition: transform 1s; }

.dot {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: -10px 5px 5px -10px;
  border-radius: 20px;
  background-color: #ef233c;
  box-shadow: inset 2px 2px #d90429;}

.dice-one {
  left: 450px; }

.dice-two {
  left: 300px;
  top:-200px;
}

.side {
  position: absolute;
  background-color: #ffF;
  border-radius:5px;
  width: 100px;
  height: 100px;
  border: 1px solid #e5e5e5;
  text-align: center;
  line-height: 2em;
}

.side:nth-child(1) {
  transform: translateZ(3.1em); }

.side:nth-child(6) {
  transform: rotateY(90deg) translateZ(3.1em); }

.side:nth-child(3) {
  transform: rotateY(-90deg) translateZ(3.1em); }

.side:nth-child(4) {
  transform: rotateX(90deg) translateZ(3.1em); }

.side:nth-child(5) {
  transform: rotateX(-90deg) translateZ(3.1em); }

.side:nth-child(2) {
  transform: rotateY(-180deg) translateZ(3.1em); }

.two-1, .three-1, .four-1, .five-1, .six-1 {
  top: 20%;
  left: 20%; }

.four-3, .five-3, .six-4 {
  top: 20%;
  left: 80%; }

.one-1, .three-2, .five-5 {
  top: 50%;
  left: 50%; }

.four-2, .five-2, .six-3 {
  top: 80%;
  left: 20%; }

.two-2, .three-3, .four-4, .five-4, .six-6 {
  top: 80%;
  left: 80%; }

.six-2 {
  top: 50%;
  left: 20%; }

.six-5 {
  top: 50%;
  left: 80%; 
}
3d roll dice javascript

Add .show elements which will spin the dice:

.show-1 {
  transform: rotateX(720deg) rotateZ(-720deg); }

.show-6 {
  transform: rotateX(-900deg) rotateZ(1080deg); }

.show-3 {
  transform: rotateY(-450deg) rotateZ(-1440deg); }

.show-4 {
  transform: rotateY(810deg) rotateZ(720deg); }

.show-5 {
  transform: rotateX(-810deg) rotateZ(-1080deg); }

.show-2 {
  transform: rotateX(450deg) rotateZ(-720deg); }

Step3.

Add JavaScript

Note: To generate a random number of the dice dots we need to use Math.floor(Math.random() * 6) + 1;
If Math.random() were to roll 0.9, we take that and multiply it by 6 which gives us 5.4. Then we take the floor of that which is 5. Then we add 1 which gives us a final result of 6. So the random numbers will only be between 1 and 6.

var elDiceOne       = document.getElementById('dice1');
var elDiceTwo       = document.getElementById('dice2');
var elComeOut       = document.getElementById('roll');

elComeOut.onclick   = function () {rollDice();};

function rollDice() {

  var diceOne   = Math.floor((Math.random() * 6) + 1);
  var diceTwo   = Math.floor((Math.random() * 6) + 1);
 
  console.log(diceOne + ' ' + diceTwo);

  for (var i = 1; i <= 6; i++) {
    elDiceOne.classList.remove('show-' + i);
    if (diceOne === i) {
      elDiceOne.classList.add('show-' + i);
    }
  }

  for (var k = 1; k <= 6; k++) {
    elDiceTwo.classList.remove('show-' + k);
    if (diceTwo === k) {
      elDiceTwo.classList.add('show-' + k);
    }
  } 
  setTimeout(rollDice(), 1000);
}

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

Enjoy coding!

Categories
#SVG JavaScript Web development

Baggage Scan /SVG & JavaScript Animation

SVG luggage

Scan the luggage!

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

To create the animation you need to have two images of the luggage (closed and open) in SVG/ png format (to practise only you can use mine which I drew in Adobe Illustrator CC) and follow the steps below:

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

Step1.

Add HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
  <rect width="100%" height="auto" fill="#ffb4a2"/>
  <image xmlns:xlink= "http://www.w3.org/1999/xlink" xlink:href="https://lenadesign.org/wp-content/uploads/2020/06/luggage.png?w=640" width="100%" height="100%" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="mask">
      <circle id="scan" cx="50%" cy="50%" r="8%" />
    </clipPath>
  </defs>
  <g clip-path="url(#mask)">
    <rect width="100%" height="100%" fill="#434373"/>
    <image xmlns:xlink= "http://www.w3.org/1999/xlink" xlink:href="https://lenadesign.org/wp-content/uploads/2020/06/luggage-inside.png?w=640" width="100%" height="100%" />
  </g>
</svg>

Step2.

Add CSS

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

svg {
  position: absolute;
  top: 100px;
  left: 15%;
  width: 70%;
  height: 70%;
}

Step3.

Add JavaScript

var svgElement = document.querySelector("svg");
var maskedElement = document.querySelector("#scan");
var svgPoint = svgElement.createSVGPoint();

function cursorPoint(e, svg) {
    svgPoint.x = e.clientX;
    svgPoint.y = e.clientY;
    return svgPoint.matrixTransform(svg.getScreenCTM().inverse());
}

function update(svgCoords) {
    maskedElement.setAttribute('cx', svgCoords.x);
    maskedElement.setAttribute('cy', svgCoords.y);
}

window.addEventListener('mousemove', function(e) {
  update(cursorPoint(e, svgElement));
}, false);

document.addEventListener('touchmove', function(e) {
    e.preventDefault();
    var touch = e.targetTouches[0];
    if (touch) {
        update(cursorPoint(touch, svgElement));
    }
}, false);

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

Enjoy coding!

Categories
JavaScript Web development

Heads or Tails? Coin Flip JS

Heads or tails? Can’t decide? 🙂

Coin tossing JS

Flip coin with JavaScript!

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

What do you need to do?

To create coin flip animation you will need two images of the coin (front and back) in .png format (to practise you can use these below) and follow the steps below:

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

Step1.

Add HTML

<div id="coin"></div>
<div id="button">Toss a coin</div>

Step2.

Add CSS

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

#coin {
   position: relative;
}

#button {
  background-color:#e9c46a;
  color:#fff;
  padding:15px 15px;
  border-radius:30px;
  display:inline-block;
  transition:0.5s;
  cursor:pointer;
}

#button:hover {
    opacity:0.5;
    background-color: #ef233c;
  }

Step3.

Add CSS Animation

.animate-coin {
  animation: flip 2s 1;
}

@keyframes flip {
  0% {
    transform: scale3d(1,1,1) rotateX(0deg);
    
  }
  50% {
    transform: scale3d(1,1,1) rotateX(3600deg);
    
  }
  100% {
    transform: scale3d(1,1,1) rotateX(7200deg);
    
  }
}

Step4.

Add JavaScript

var coin = document.getElementById("coin");
var button = document.getElementById("button");
var heads = 0;
var tails = 0;

/* On click of button spin coin ainamtion */
function coinToss() {
  /* Random number 0 or 1  */
  var x = Math.floor(Math.random() * 2);
  /* If statement */
  if (x === 0) {
    coin.innerHTML = '<img class="heads animate-coin" src="https://lenadesign.org/wp-content/uploads/2020/06/head.png?w=100"/>';   
    heads += 1;
   
  } else {
    coin.innerHTML = '<img class="tails animate-coin" src="https://lenadesign.org/wp-content/uploads/2020/06/tail.png?w=100"/>';
     tails += 1;
  }
}

button.onclick = function() {
  coinToss();
}

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

Enjoy coding!

Categories
JavaScript Web development

JS Typing Effect

Learn how to create a typing effect with JavaScript.

Learn how to create a typing effect with JavaScript

To create the Typing Effect with JavaScript follw the step below:

  1. Add HTML
  2. Add CSS (optional)
  3. Add JavaScript
*animation opened in the Safari browser.
To see the live output of the animation click here.

Step1.

Add HTML

<div class="container">
  <div class="face">
    <div class="smile"></div>
  </div>
<div id="text"></div>
</div>

Step2.

Add CSS

Style the text:

body {
  background-color: #2a9d8f; 
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  
}
.container {
  position: relative;
  top:0;
  left:30%;
  width:100%;
}

#text {
   position: absolute;
   color: #e9c46a;
   font-size: 50px;
   font-family: "Courier New", Courier, monospace;
   letter-spacing: 10px;
   text-shadow: 3px 5px 0px rgba(0, 0, 0, 0.7);
   
}

.face {
  position: absolute; 
  border-radius:50%;
  background-color: #ffe066;
  width:200px;
  height:200px;
  z-index:-5;
  left:270px;
  top:-80px;
  box-shadow: inset 5px 5px #f5cb5c, 5px 5px rgba(0,0,0,0.07);
  
  
}

.face:after {
  content:"";
  position: absolute;
  border-radius:50%;
  background-color: black;
  width:20px;
  height:20px;
  left:70px;
  top:60px;
  -webkit-transform-origin: 50%;
  -webkit-animation: blink 2s infinite;
}

.face:before {
  content:"";
  position: absolute;
  border-radius:50%;
  background-color: black;
  width:20px;
  height:20px;
  left:115px;
  top:60px;
  -webkit-transform-origin: 50%;
  -webkit-animation: blink 2s infinite;
}

.smile {
  position: absolute;
  top: 100px;
  left: 65px;
  width: 80px;
  height: 40px;
  border-radius: 0 0 100px 100px;
  overflow: hidden;
  background:#000;
}
  
.smile:after {
  content:"";
  position: absolute;
  top: 15px;
  left: 12px;
  width: 70%;
  height: 70%;
  border-radius: 100px 100px 0 0;
  background: #e56b6f;
  
}

@-webkit-keyframes blink {
    0%, 100% {
        transform: scale(1, .05);
    }
    5%,
    95% {
        transform: scale(1, 1);
    }
}
JS Typing Effect

Step3.

Add JavaScript

Type your text:

var text = document.getElementById('text');

var typewriter = new Typewriter(text, {
    loop: true
});

typewriter.typeString('Hello!')
    .pauseFor(2500)
    .deleteAll()
    .typeString('How are you today?')
    .pauseFor(2500)
    .deleteAll()
    .typeString('Have a nice day :)')
    .pauseFor(2500)
    .start();

Note: Don’t forget to add the JS library to your code!

<script src="https://cdnjs.cloudflare.com/ajax/libs/TypewriterJS/1.0.0/typewriter.min.js"></script>

To see the live output of the animation go to 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
JavaScript Web development

JavaScript – Time and date

Some time ago, I posted two tutorials where you could create the clock animations (see Digital Clock – CSS & JavaScript Animation and the What time is it? – CSS Clock Animation).

Today I’ll show you how to add just time and date to your website using JavaScript.

Display day and time

I’ll show you two ways. First, how to add only current time, and the second how to add time and the date.

Display time

To display time on your web page follow the steps below:

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

Step1.

Add HTML

<body onload="startTime()">
<div id="time"></div>

Step2.

Add CSS

body {
  background: linear-gradient(0deg, rgba(17,24,101,1) 16%, rgba(13,13,31,1) 99%);
  display: flex;
  height: 100vh;  
  align-items: center;
  justify-content: center;
  overflow: hidden;
 }

#time {
   position: absolute;
   color: white;
   font-size: 100px;
   font-family: Impact, Charcoal, sans-serif;
   letter-spacing: 22px;
   z-index:10;
    text-shadow: 5px 10px 10px rgba(0, 0, 0, 0.7),
                -3px 10px 12px rgba(0, 0, 0, 0.7);

}

Step3.

Add JavaScript

function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('time').innerHTML =
  h + ":" + m + ":" + s;
  var t = setTimeout(startTime, 500);
}
function checkTime(i) {
  if (i < 10) {i = "0" + i};  
  return i;
}
To see the live output of the animation click here.

Display time and date

To display time on your web page follow the steps below:

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

Step1.

Add HTML

<div class="date" id="time"></div>

Step2.

Add CSS

body {
  background: linear-gradient(0deg, rgba(17,24,101,1) 16%, rgba(13,13,31,1) 99%);
  display: flex;
  height: 100vh;  
  align-items: center;
  justify-content: center;
  overflow: hidden;
 }

#time {
   position: absolute;
   color: white;
   font-size: 100px;
   font-family: Impact, Charcoal, sans-serif;
   letter-spacing: 22px;
   z-index:10;
    text-shadow: 5px 10px 10px rgba(0, 0, 0, 0.7),
                -3px 10px 12px rgba(0, 0, 0, 0.7);

}

Step3.

Add JavaScript

function getDateTime() {
        var now     = new Date(); 
        var year    = now.getFullYear();
        var month   = now.getMonth()+1; 
        var day     = now.getDate();
        var hour    = now.getHours();
        var minute  = now.getMinutes();
        var second  = now.getSeconds(); 
        if(month.toString().length == 1) {
             month = '0'+month;
        }
        if(day.toString().length == 1) {
             day = '0'+day;
        }   
        if(hour.toString().length == 1) {
             hour = '0'+hour;
        }
        if(minute.toString().length == 1) {
             minute = '0'+minute;
        }
        if(second.toString().length == 1) {
             second = '0'+second;
        }   
        var dateTime = year+'/'+month+'/'+day+' '+hour+':'+minute+':'+second;   
         return dateTime;
    }

    // example usage: realtime clock
    setInterval(function(){
        currentTime = getDateTime();
        document.getElementById("time").innerHTML = currentTime;
    }, 1000);
To see the live output of the animation click here.

Enjoy coding!

Categories
JavaScript Web development

HTML DOM Style perspective property/ perspectiveOrigin Property

In my previous tutorial, you could learn about the CSS Perspective property and the CSS Perspective-origin property. You can make a step forward and define the 3d shape also using JavaScript by HTML DOM Style perspective property, and perspective-origin property.

HTML DOM Style Perspective property

HTML DOM Style Perspective Property

The perspective property defines how many pixels a 3D element is placed from the view. This property allows you to change the perspective on how 3D elements are viewed.

When defining the perspective property for an element, it is the CHILD elements that get the perspective view, NOT the element itself.

Note: The perspective property only affects 3D transformed elements!

Syntax:

object.style.perspective = "length|none"

Where:

length– how far the element is placed from the view

none- default value. Same as 0. The perspective is not set

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#ex1 {
  position: relative;
  margin: auto;
  height: 150px;
  width: 250px;
  padding: 10px;
  border: 2px solid red;
  perspective: 200px;
}
#ex2 {
  padding: 50px;
  position: absolute;
  border: 2px solid red;
  background-color: lightpink;
  transform: rotateX(45deg);
}
</style>
</head>
<body>
<div id="ex1">Ex1
  <div id="ex2">Look at the text. The perspective of the text has been changed too. </div>
</div>
<script>
function myFunction() {
  document.getElementById("ex1").style.perspective = "100px";
}
</script>
</body>
</html>

Output:

HTML DOM Style PerspectiveOrigin Property

The perspectiveOrigin property defines where a 3D element is based in the x- and the y-axis. This property allows you to change the bottom position of 3D elements.

When defining the perspectiveOrigin property for an element, it is the CHILD elements that are positioned, NOT the element itself.

Syntax:

object.style.perspectiveOrigin = "x-axis y-axis|initial|inherit"

Where:

x-axis– defining where the view is placed at the x-axis (left, center, right, lenght, %). Default value: 50%.

y-axis– defining where the view is placed at the y-axis (top, center, bottom, lenght, %). Default value: 50%.

initial- sets this property to its default value.

inherit- inherits this property from its parent element.

Example:

!DOCTYPE html>
<html>
<head>
<style>
#ex1 {
  position: relative;
  margin: auto;
  height: 150px;
  width: 250px;
  padding: 10px;
  border: 2px solid red;
  perspective: 125px;
}
#ex2 {
  padding: 50px;
  position: absolute;
  border: 2px solid green;
  background-color: lightpink;
  transform: rotateX(45deg);
}
</style>
</head>
<body>
<div id="ex1">Ex1
  <div id="ex2">Look at the text. The perspective of the text has been changed too.</div>
</div>
<script>
function myFunction() {
  document.getElementById("ex1").style.perspectiveOrigin = "10px 50%";
}
</script>
</body>
</html>

Output:

To see more examples of the perspective-property and 3d cube click here, here and here.

Enjoy coding!

Categories
CSS JavaScript JQuery Web development

CSS Perspective Property, CSS Perspective-orgin Property & 3d Cube

I took me some time to prepare the code examples to this tutorial, but definitely, it was worth to go it through. You can learn a lot of useful stuff, and later create an amazing things using CSS Perspective Property. Let’s start from the beginning!

CSS Perspective property

Today we’ll talk about the CSS Perspective property, then we’ll go to the CSS Perspective-origin property and in the end, we’ll create the 3d cube using CSS. Sounds good, is it? 😀

To see the live outputs of the animation click here, here and here.
  1. CSS Perspective property
  2. CSS Perspective-origin property
  3. 3d Cube

CSS Perspective Property

The CSS perspective property is used to give a 3D-positioned element some perspective.

The perspective property defines how far the object is away from the user. So, a lower value will result in a more intensive 3D effect than a higher value.

When defining the perspective property property for an element, it is the CHILD elements that get the perspective view, NOT the element itself.

CSS Syntax:

perspective: length|none;

Where:

length– how far the element is placed from the view

none– default value. Same as 0. The perspective is not set

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#ex1 {
  position: relative;
  height: 150px;
  width: 150px;
  margin-left: 60px;
  border: 2px solid red;
  perspective: 100px;  
}
#ex2, #ex4 {
  padding: 50px;
  position: absolute;
  border: 2px solid blue;
  background-color: lightpink; 
  transform-style: preserve-3d;
  transform: rotateX(45deg);
  opacity:0.5; 
}
#ex3 {
  position: relative;
  height: 150px;
  width: 150px;
  margin-left: 60px;
  border: 2px solid green;
  perspective: none;
}
</style>
</head>
<body>

<h1>The perspective Property:</h1>
<h2>perspective: 100px:</h2>
<div id="ex1">Ex1
  <div id="ex2">Ex2</div>
</div>
<h2>perspective: none:</h2>
<div id="ex3">Ex3
  <div id="ex4">Ex4</div>
</div>
</body>

Output:

CSS Perspective-origin Property

The perspective-origin property property defines at from which position the user is looking at the 3D-positioned element.

When defining the perspective-origin property property for an element, it is the CHILD elements that will get the effect, NOT the element itself.

CSS Syntax:

perspective-origin: x-axis y-axis|initial|inherit;

Where:

x-axis – defining where the view is placed at the x-axis (left, center, right, lenght, %). Default value: 50%.

y-axis – defining where the view is placed at the y-axis (top, center, bottom, lenght, %). Default value: 50%.

initial – sets this property to its default value.

inherit – inherits this property from its parent element.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#ex1 {
  position: relative;
  height: 150px;
  width: 150px;
  margin-left: 60px;
  border: 2px solid red;
  perspective: 100px;
  perspective-origin: left;  
}
#ex2, #ex4, #ex6 {
  padding: 50px;
  position: absolute;
  border: 2px solid red;
  background-color: red;
  background: lightpink; 
  opacity:0.5;
  transform-style: preserve-3d;
  transform: rotateX(45deg);
}
#ex3 {
  position: relative;
  height: 150px;
  width: 150px;
  margin-left: 60px;
  border: 2px solid red;
  perspective: 100px;
  perspective-origin: bottom right;
}
#ex5 {
  position: relative;
  height: 150px;
  width: 150px;
  margin-left: 60px;
  border: 2px solid red;
  perspective: 100px;
  perspective-origin: -90%;  
}
</style>
</head>
<body>
<h1>The perspective-origin Property:</h1>
<h2>perspective-origin: left:</h2>
<div id="ex1">Ex1
  <div id="ex2">Ex2</div>
</div>
<h2>perspective-origin: bottom right:</h2>
<div id="ex3">Ex3
  <div id="ex4">Ex4</div>
</div>
<h2>perspective-origin: -90%:</h2>
<div id="ex5">Ex5
  <div id="ex6">Ex6</div>
</div>
</body>
</html>

Output:

3d Cube

Using all knowledge from above we can create now a 3d cube.

We can create cubes setting different perspectives.

Example1:

Perspective: 150px;

<!DOCTYPE html>
<html>
<head>
<style>

.ex1 {
  perspective: 150px;
}

.cube {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: rotateX(-45deg) rotateY(30deg);
}

.side {
  position: absolute;
  width: 2em;
  height: 2em;
  background: lightpink;
  opacity:0.5;
  border: 1px solid green;
  text-align: center;
  line-height: 2em;
}

.front {transform: translateZ(1em);}
.top {transform: rotateX(90deg) translateZ(1em);}
.right {transform: rotateY(90deg) translateZ(1em);}
.left {transform: rotateY(-90deg) translateZ(1em);}
.bottom {transform: rotateX(-90deg) translateZ(1em);}
.back {transform: rotateY(-180deg) translateZ(1em);}
</style>
</head>
<body>

<div class="ex1">
  <div class="cube">
  <div class="side front">1</div>
  <div class="side back">6</div>
  <div class="side right">4</div>
  <div class="side left">3</div>
  <div class="side top">5</div>
  <div class="side bottom">2</div>
  </div>
</div>

</body>
</html>

Output:

Example2:

Perspective: 800px:

<!DOCTYPE html>
<html>
<head>
<style>
.ex2 {
  perspective: 800px;
}

.cube {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: rotateX(-45deg) rotateY(30deg);
}

.side {
  position: absolute;
  width: 2em;
  height: 2em;
  background: lightpink;
  opacity:0.5;
  border: 1px solid green;
  text-align: center;
  line-height: 2em;
}

.front {transform: translateZ(1em);}
.top {transform: rotateX(90deg) translateZ(1em);}
.right {transform: rotateY(90deg) translateZ(1em);}
.left {transform: rotateY(-90deg) translateZ(1em);}
.bottom {transform: rotateX(-90deg) translateZ(1em);}
.back {transform: rotateY(-180deg) translateZ(1em);}
</style>
</head>
<body>

<div class="ex2">
  <div class="cube">
  <div class="side front">1</div>
  <div class="side back">6</div>
  <div class="side right">4</div>
  <div class="side left">3</div>
  <div class="side top">5</div>
  <div class="side bottom">2</div>
  </div>
</div>
</body>
</html>

Output:

To see how to animate the cube using JavaScript and JQuary click here.

To see more examples of the 3d cubes click here and here.

Enjoy coding!

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!