Categories
CSS HTML JavaScript Web development

Solar System Animation

Planets Solar System Animation

Demo:

*to see the animation on the website click here.

To create the CSS and JavaScript Solar System Animation follow the steps below:

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

Step1.

Add HTML

<div class="milkyWay">
  <div class="sun"></div>
  <div class="planetOne">
    <div id="moveMercury" class="mercury"></div>
  </div>
  <div class="planetTwo">
    <div id="moveVenus" class="venus"></div>
  </div>
  <div class="planetThree">
     <div id="moveEarth" class="earth"></div>
  </div>
  <div class="planetFour">
    <div id="moveMars" class="mars"></div>
  </div>
  <div class="planetFive">
    <div id="moveJupiter" class="jupiter"></div>
  </div>
  <div class="planetSix">
    <div id="moveSaturn" class="saturn"></div>
  </div>
  <div class="planetSeven">
    <div id="moveUranus" class="uranus"></div>
    </div>
  </div>

Step2.

Add CSS

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

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

.milkyWay {
  position: relative;
}

Add the center of the animation:

.sun {
  position: relative;
  width:50px;
  height: 50px;
  border-radius:50%;
  background-color: #ffd100;
}

.sun:before, .sun:after {
  content:"";
  position: absolute;
  background-color: rgba(255,209,0,0.1);
  border-radius:50%;
}

.sun:before {
  width:70px;
  height: 70px;
  top:-10px;
  left:-10px;
}

.sun:after {
  width: 90px;
  height: 90px;
  top:-20px;
  left:-20px;
}

Add the orbits and style planets:

.planetOne {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius:50%;
  border: 1px solid #fff;
  top:-35px;
  left:-35px;
}

.mercury {
  position: absolute;
  width: 15px;
  height:15px;
  border-radius:50%;
  background-color: #c9a227;
  top:20px;
  left:2px;
}

.planetTwo {
  position: absolute;
  width: 170px;
  height: 170px;
  border-radius:50%;
  border: 1px solid #fff;
  top:-60px;
  left:-60px;
}

.venus {
  position: absolute;
  width: 18px;
  height:18px;
  border-radius:50%;
  background-color: #ff9b85;
  top:90px;
  left:-8px;
}

.planetThree {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius:50%;
  border: 1px solid #fff;
  top:-85px;
  left:-85px;
}

.earth {
  position: absolute;
  width: 22px;
  height:22px;
  border-radius:50%;
  background-color: #0496ff;
  left:100px;
  top:-10px;
  overflow:hidden;
}

.earth:before {
  content:"";
  position: absolute;
  width:10px;
  height:5px;
  border-radius:10px;
  background-color: #38b000;
  box-shadow: 5px 5px #38b000, 10px 5px #38b000, -2px 10px #38b000, 15px 10px #38b000,5px 15px #38b000;
}

.planetFour {
  position: absolute;
  width: 270px;
  height: 270px;
  border-radius:50%;
  border: 1px solid #fff;
  top:-110px;
  left:-110px;
}

.mars {
  position: absolute;
  width: 16px;
  height:16px;
  border-radius:50%;
  background-color: #db3a34;
  top:200px;
  left:12px;
}

.planetFive {
  position: absolute;
  width: 330px;
  height: 330px;
  border-radius:50%;
  border: 1px solid #fff;
  top:-140px;
  left:-140px;
}

.jupiter {
  position: absolute;
  border-radius:50%;
  background-color: #ff9100;
  width:28px;
  height:28px;
  overflow: hidden;
}

.jupiter:before {
  content:"";
  position: absolute;
  border-radius:20px;
  width:12px;
  height:5px;
  background-color: rgba(255,255,255,0.3);
  box-shadow: 15px 10px rgba(255,255,255,0.3), 5px 15px rgba(255,255,255,0.3),5px 25px rgba(255,255,255,0.3);
}

.planetSix {
  position: absolute;
  width: 390px;
  height: 390px;
  border-radius:50%;
  border: 1px solid #fff;
  top:-170px;
  left:-170px;
}

.saturn {
  position: absolute;
  width:25px;
  height: 25px;
  border-radius:50%;
  background-color: #4281a4;
  transform-style: preserve-3d;
}

.saturn:before {
  content:"";
  position: absolute;
  border: solid 7px #9cafb7;
  border-radius: 50%;
  width: 35px;
  height: 28px;
  transform: rotate3d(1, 0, 0, 75deg); 
  left:-12px;
  top:-8px;
}

.planetSeven {
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius:50%;
  border: 1px solid #fff;
  top:-200px;
  left:-200px;
}

.uranus {
  position: absolute; 
  width:22px;
  height: 22px;
  border-radius:50%;
  background-color: #004e89;
  overflow: hidden;
}

.uranus:before {
  content:"";
  position: absolute;
  background-color: #1a659e;
  width:15px;
  height:3px;
  border-radius:10px;
  box-shadow: 5px 5px #1a659e, -5px 15px #1a659e;
}

Step3.

Add JavaScript

var rotatePlanets = (function() {
    
function getPosition(settings, ellapsedTime) {
        var angle = getAngle(settings, ellapsedTime);
        return {
            x: Math.round(settings.center.x + settings.radius * Math.cos(angle)),
            y: Math.round(settings.center.y + settings.radius * Math.sin(angle))
        };
    }
    
function getAngle(settings, ellapsedTime) {
        return ellapsedTime / settings.interval * 2 * Math.PI * settings.direction - settings.startPositionRad;
    }
    
function start(id, settings) {
        var el = document.getElementById(id),
            startTime = (new Date()).getTime(),
            width = el.offsetWidth,
            height = el.offsetHeight;
        if(el['#rot:pl'] !== null) stop(id);
        el.style.position = settings.cssPosition || 'absolute';
        if(!settings.startPositionRad) settings.startPositionRad = settings.startPositionDeg / 180 * Math.PI;
        el['#rot:pl'] = setInterval(function() {
            var pos = getPosition(settings, (new Date()).getTime() - startTime);
            el.style.left = (pos.x - Math.round(width / 2)) + 'px';
            el.style.top = (pos.y - Math.round(height / 2)) + 'px';
        }, settings.updateInterval);
        if(settings.iterations > -1) setTimeout(function() {
            stop(id);
        }, settings.iterations * settings.interval);
    }
    
    function stop(id) {
        var el = document.getElementById(id);
        if(el['#rot:pl'] === null) return;
        clearInterval(el['#rot:pl']);
        el['#rot:pl'] = null;
    }
    
    return {
        start: start,
        stop: stop
    };
    
})();

Set the parameters to each planet separately:

rotatePlanets.start('moveMercury', {
    radius: 60,
    center: { x: 60, y: 60 },
    interval: 8000,
    direction: 1,
    iterations: -1,
    startPositionDeg: 175,  
    updateInterval: 50
});

rotatePlanets.start('moveVenus', {
    radius: 85,
    center: { x: 85, y: 85 },
    interval: 9000,
    direction: 1,
    iterations: -1,
    startPositionDeg: 350,  
    updateInterval: 50
});

rotatePlanets.start('moveEarth', {
    radius: 110,
    center: { x: 110, y: 110 },
    interval: 10000,
    direction: 1,
    iterations: -1,
    startPositionDeg: 125,  
    updateInterval: 50
});

rotatePlanets.start('moveMars', {
    radius: 135,
    center: { x: 135, y: 135 },
    interval: 11000,
    direction: 1,
    iterations: -1,
    startPositionDeg: 200,  
    updateInterval: 50
});

rotatePlanets.start('moveJupiter', {
    radius: 165,
    center: { x: 165, y: 165 },
    interval: 14000,
    direction: 1,
    iterations: -1,
    startPositionDeg: 305,  
    updateInterval: 50
});

rotatePlanets.start('moveSaturn', {
    radius: 195,
    center: { x: 195, y: 195 },
    interval: 15000,
    direction: 1,
    iterations: -1,
    startPositionDeg: 150,  
    updateInterval: 50
});

rotatePlanets.start('moveUranus', {
    radius: 225,
    center: { x: 225, y: 225 },
    interval: 16000,
    direction: 1,
    iterations: -1,
    startPositionDeg: 325,  
    updateInterval: 50
});

Enjoy coding!

Categories
CSS HTML Web development

CSS Saturn/ Planet Rings

CSS Planet with Rings

Demo:

*to see the code on the website click here.

To create the CSS Saturn/ Planet Rings follow the steps below and watch the video tutorial:

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

<div class="saturn">
  <div class="clouds"></div>
  <div class="planet"></div>
  <div class="ring"></div>
    <div class="up"></div>
</div>

Step2.

Add CSS

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

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

.saturn {
  position: relative;
}

Add clouds and stars:

.clouds {
  position: absolute;
  background-color: #283845;
  width:200px;
  height: 35px;
  border-radius:30px;
  left:-50px;
  top:-50px;
  box-shadow: -120px 35px #202c39, 100px 35px #202c39, 30px 35px #283845, -90px 70px #283845, 80px 70px #283845, -220px 105px #202c39, -80px 105px #283845, -90px 140px #283845, 170px 140px #283845, 270px 175px #202c39, 170px 175px #283845, 150px 210px #283845, -20px 210px #283845, -110px 245px #202c39,120px 245px #202c39, 30px 245px #283845, 50px 280px #283845;
}

.clouds:before {
  position: absolute;
  content:"";
  background-color: #f2d492;
  border-radius:50%;
  width:7px;
  height: 7px;
  left:-10px;
  box-shadow: -75px 110px #f2d492,-25px 220px #f2d492, 230px -10px #f2d492, 200px 260px #f2d492;
}

.clouds:after {
  position: absolute;
  content:"";
  background-color: #f2d492;
  border-radius:50%;
  width:4px;
  height: 4px;
  left:30px;
  top:20px;
  box-shadow: 100px 300px #f2d492, 300px 100px #f2d492;
}

Style the planet:

.planet {
  position: relative;
  width:200px;
  height: 200px;
  border-radius:50%;
  background-color: #cc5803;
  overflow: hidden;
}

.planet:before {
  content:"";
  position: absolute;
  width: 100px;
  height: 25px;
  border-radius:20px;
  top:100px;
  background-color: #f29559;
  left:30px;
  box-shadow: 60px 0 #f29559, -75px 25px #cc5803, 45px 25px #cc5803,-20px 25px #f29559, 0 50px #f29559,60px 50px #f29559, -40px 75px #cc5803,80px 75px #cc5803, 30px 75px #f29559;
}

.planet:after {
  content:"";
  position: absolute;
  width:200px;
  height: 200px;
  border-radius:50%;
  box-shadow: inset -10px 10px rgba(0,0,0,0.2);
}
.up {
  position: absolute;
  width:200px;
  height: 100px;
  border-radius:100px 100px 0 0;
  background-color: #cc5803;
  top:0;
  overflow: hidden;
}

.up:before {
  content:"";
  position: absolute;
  width: 100px;
  height: 25px;
  border-radius:20px;
  left:70px;
  background-color: #f29559;
  box-shadow: -75px 25px #cc5803, 45px 25px #cc5803,-20px 25px #f29559, 0 50px #f29559, -80px 50px #f29559, -110px 75px #cc5803,30px 75px #cc5803, -50px 75px #f29559;
}

.up:after {
  content:"";
  position: absolute;
  width:200px;
  height: 100px;
  border-radius:100px 100px 0 0;
  box-shadow: inset -10px 10px rgba(0,0,0,0.2);
}

Add the ring/ orbit:

.ring {
  width: 305px;
  height: 305px;
  border: solid 50px #b8b08d;
  border-radius: 50%;
  top: -95px; 
  left: -100px; 
  position: absolute;
  transform: rotate3d(1, 0, 0, 75deg); 
}

Watch also the video tutorial:

Enjoy coding!

Categories
CSS HTML JavaScript Web development

CSS/JS Eye Follows Mouse Cursor + Blink on Hover

CSS/JS Eye Animation

Demo:

*to see the CSS/JavaScript Eye Animation on the website click here.

To create the CSS/JavaScript Eye Animation follow the steps below and watch the video tutorial:

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

Step1.

Add HTML

Create the container with the eyeball, iris, and eyelid:

<div class="container">
  <div class="eyeBall">
    <div class="iris"></div>
  </div>
  <div class="eyeLid"></div>
  <div class="lid"></div>
</div>

Step2.

Add CSS

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

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

.container {
  position: relative;
  cursor: pointer;
}

Style the eye:

.iris {
  position: absolute;
  width: 70px;
  height: 70px;
  border: 5px solid #333;
  background-color: #0077b6;
  border-radius:50%;
  left:40px;  
  top:30px;
}

.iris:before {
  content:"";
  position: absolute;
  background-color: #333;
  border-radius:50%;
  width:40px;
  height: 40px;
  top:22%;
  left:22%;
}

.iris:after {
  content:"";
  position: absolute;
  background-color: rgba(255,255,255,0.4);
  border-radius: 50%;
  width:15px;
  height:15px;
  top:35%;
  left:65%;
  box-shadow: -35px 20px rgba(255,255,255,0.4);
}

.eyeBall {
  position: relative;
  width: 150px;
  height: 150px;
  background-color: transparent;
  border: 5px solid #333;
  border-radius:100% 0;
  box-shadow: inset 5px 5px 5px rgba(0,0,0,0.3);
  transform: rotate(45deg);
  top:-10px;
  z-index:1;
  overflow: hidden;
}

.eyeLid {
  position: absolute;
  border-top: 5px solid #333;
  border-left: 5px solid #333;
  border-radius:100% 0;
  width: 150px;
  height: 150px;
  top:-30px;
  left:3px;
  transform: rotate(45deg);
  transition: .2s;
  z-index:10;
}

.lid {
  position: absolute;
  z-index:9;
  background-color: #fff;
  width: 295px;
  height: 270px;
  border-radius:50%;
  top:-248px;
  left:-68px;
  transition: .2s;
}

To make the eye blink add transition on hover:

.container:hover .eyeLid {
  transform: rotate(-45deg) rotateX(160deg);
}

.container:hover .lid {
  transform: translateY(90px);
}

Step3.

Add JavaScript

const eye = document.querySelector('.iris');
window.addEventListener('mousemove', (event) => {
const x = -(window.innerWidth / 2 - event.pageX) / 35;
const y = -(window.innerHeight / 2 - event.pageY) / 35;
eye.style.transform = `rotate(-45deg) translateY(${y}px)  translateX(${x}px)`;         
        }); 

Watch also the video tutorial:

Enjoy coding!

Categories
CSS HTML Web development

How to change the CSS Gradient Background On Scroll?

CSS Gradient Background

Demo:

To create the CSS Gradient Background On Scroll follow the steps below and watch the video tutorial:

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

<h2 style="position:fixed;">Scroll to see the effect.</h2>

Step2.

Add CSS

body {
  height: 5000px;
  justify-content: center;
  display: flex;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);   
}

h2 {
  color: white;
  text-shadow: 1px 1px 1px black;
  left:45%;
}

Enjoy coding!

Categories
CSS HTML Web development

How to create a custom checkbox and radio button with CSS?

CSS Custom Checkbox

Demo:

*to see the CSS Custom Checkbox demo on the website click here.

CUSTOM CHECKBOX

Step1.

Add HTML

<h3>Custom Checkbox:</h3>
<label class="customContainer">One
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>
<label class="customContainer">Two
  <input type="checkbox">
  <span class="checkmark"></span>
</label>
<label class="customContainer">Three
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

Step2.

Add CSS

.customContainer {
    display: block;
    position: relative;
    color: #333;
    padding-left:40px;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 25px;
    user-select: none; 
}

.customContainer input {
  	position: absolute;
	  opacity: 0;
    cursor: pointer;}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #ffe8d6;
}

.customContainer:hover input ~ .checkmark {
    background-color: #b7b7a4;
}

.customContainer input:checked ~ .checkmark {
    background-color: #6b705c;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.customContainer input:checked ~ .checkmark:after {
    display: block;
}

.customContainer .checkmark:after {
    left: 10px;
    top: 6px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

Output:

Custom Checkboxes

CUSTOM RADIO BUTTON

Step1.

Add HTML

<h3>Custom Radio Button:</h3>
<label class="customContainer">One
  <input type="radio" checked="checked" name="radio">
  <span class="radioButton"></span>
</label>
<label class="customContainer">Two
  <input type="radio" name="radio">
  <span class="radioButton"></span>
</label>
<label class="customContainer">Three
  <input type="radio" name="radio">
  <span class="radioButton"></span>
</label>

Step2.

Add CSS

.customContainer {
    display: block;
    position: relative;
    color: #333;
    padding-left:40px;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 25px;
    user-select: none; 
}

.customContainer input {
  	position: absolute;
	  opacity: 0;
    cursor: pointer;}

.radioButton {
  position: absolute;
  background-color: #ffe8d6;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  border-radius: 50%;
}

.customContainer:hover input ~ .radioButton{
  background-color: #b7b7a4;
}

.customContainer input:checked ~ .radioButton{
  background-color: #6b705c;
}

.radioButton:after {
  content: "";
  position: absolute;
  display: none;
}

.customContainer input:checked ~ .radioButton:after {
  display: block;
}

.customContainer .radioButton:after {
  background-color: #fff;
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

Output:

Custom Radio Button:

Enjoy coding!

Categories
HTML Web development

HTML Checkbox

The checkbox is shown as a square box that is ticked (checked) when activated. Using checkboxes is a good option when you want to give your website visitors the option to choose one or more options of a limited number of choices.

HTML Checkbox

The <input type="checkbox"> defines a checkbox.

Syntax:

<input type="checkbox">

Example:

<!DOCTYPE html>
<html>
<body>
<div><h3>How many cats do you have?</h3><br>
  <input type="checkbox" id="one" name="one" value="one">
  <label for="one"> One</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> Two</label><br>
  <input type="checkbox" id="two" name="three" value="three">
  <label for="three"> Three</label><br>
  <input type="checkbox" id="other" name="other" value="other">
  <label for="other"> Other</label><br>
 
</div>
</body>
</html>

Note: Always add the <label> tag.

Output:

How many cats do you have?






Click here to see how to stye HTML Checkbox using CSS.

Enjoy coding!

Categories
CSS HTML Web development

CSS Border Property

The CSS border properties define the width, line style, and colour of the border of a box.

CSS Border Property

Syntax:

border: border-width border-style border-color

where:

border-width – specifies the width of the border.

border-style – specifies style of the border.

border-color – specifies color of the border.

Example:

.square {
  border: 5px solid blue;
  height: 200px;
  width: 200px;
}

Output:

The border-style property specifies what kind of border to display:

dotted – defines a dotted border:

p.dotted {border-style: dotted;}

dashed – defines a dashed border:

p.dashed {border-style: dashed;}

solid – defines a solid border:

p.solid {border-style: solid;}

groove – defines a 3D grooved border. The effect depends on the border-color value:

p.groove {border-style: groove;}

ridge – defines a 3D ridged border. The effect depends on the border-color value:

p.ridge {border-style: ridge;}

inset – a 3D inset border. The effect depends on the border-color value:

p.inset {border-style: inset;}

outset – defines a 3D outset border. The effect depends on the border-color value:

p.outset {border-style: outset;}

rounded – the border-radius property is used to add rounded borders to an element:

p.round {border: 2px solid blue;border-radius: 12px;}

mixed – you can specify a different border for each side.

p.mix {border-style: dotted dashed solid double;}

multicolored-border – can have from one to four values (for the top border, right border, bottom border, and the left border).

p.color {border-style: solid;border-color: #ff0000;}

Enjoy coding!

Categories
CSS HTML JavaScript JQuery Web development

CSS& JavaScript Sketch board

css sketchboard

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

Demo:

What do you need to do?

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

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

Step1.

Add HTML

<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 colour and the position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
#canvas-wrap {
  position: relative;
  top:-200px;
}

And the canvas with mouse cursor:

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

Style the sketch board:

.sketch-board {
  position: absolute;
  width: 600px;
  height: 440px;
  background-color: #c19875;
  z-index:-5;
  border-radius: 30px;
  left: -80px;
  box-shadow:inset 5px -5px 0 #846c5b;
}

.sketch-board:before {
  background-color: #fff;
  position: absolute;
  width: 50px;
  height: 170px;
  border-radius: 30px;
  content:"";
  left: 30px;
  top: 140px;
  box-shadow:inset 5px -5px 0 #846c5b;
}

.paper {
  background-color: #e6e3dc;
  width: 400px;
  height: 320px;
  position: absolute;
  top: 50px;
  left: 140px;
}

.paperclip {
  position: absolute;
  width: 150px;
  height: 40px;
  border: 7px solid #c0c0c0;
  border-radius: 20px;
  left: 180px;
  top: 15px;
  z-index:999;
}

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

Style buttons:

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

.button:hover {
  background-color: #cea07e;
}
sketch board

Step3.

Add JavaScript/ jQuery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

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);

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?

roll the dice

Try to roll double six!

Demo:

To see the dice animation on the website 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:

 <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 and the position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #70c1b3;
}
.game {
  position: relative;
  width: auto;
  height: 100%; 
}

.container {
  position: relative;
  display: inline-block;
  top: 200px;
}

Style the button:

button {
  position: relative;
  top:80px;
  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;
  transform: translateY(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%; 
}
roll the dice

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);
}

Enjoy coding!

Categories
CSS HTML Web development

CSS Plane Animation

CSS Plane

Demo:

*to see the CSS Plane Animation on the website click here.

To create the CSS Plane Animation follow the steps below:

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

Step1.

Add HTML

<div class="airplaneAnimation">
  <div class="plane">
  <div class="main"></div>
  <div class="wingOne"></div>
  <div class="wingTwo"></div>
  <div class="pollution"></div>
  </div>
  <div class="clouds">
    <div class="cloudOne"></div>
    <div class="cloudTwo"></div>
    <div class="cloudThree"></div>
  </div>
</div>

Step2.

Add CSS

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

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

.airplaneAnimation {
  position: relative; 
  width:400px;
  height:400px;
  border-radius:50%;
  background-color: #caf0f8;
  overflow: hidden;
}

Style the plane:

.plane {
  position: relative;
  left:0;
  top:75px;
  animation: fly 2s linear infinite;
}

.main {
  position: absolute;
  width: 220px;
  height: 40px;
  background-color: #0077b6;
  top:100px;
  left:100px;
  border-radius: 0 100px 30px 100px; 
  overflow:hidden;
  box-shadow: inset -10px -10px rgba(0,0,0,0.2);
  z-index:2;
}

.main:before, .main:after {
  content:"";
  position: absolute;
  background-color: #fdc921;
  top:10px;
}

.main:before {
  width:40px;
  height:10px;
  border-radius: 0 0 0 30px;
  left: 190px;
}

.main:after {
  width: 5px;
  height: 10px;
  border-radius:20px;
  left:160px;
  box-shadow: -10px 0 #fdc921,-20px 0 #fdc921, -30px 0 #fdc921, -40px 0 #fdc921, -50px 0 #fdc921, -60px 0 #fdc921, -70px 0 #fdc921, -80px 0 #fdc921, -90px 0 #fdc921, -100px 0 #fdc921, -110px 0 #fdc921, -120px 0 #fdc921;
}

.wingOne {
  position: absolute;
  width:20px;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  border-top: 80px solid #0077b6;
  height:0;
  top:115px;
  left:160px;
  transform: skew(-45deg) rotateX(30deg);
  z-index:4;
}

.wingTwo {
  position: absolute;
  width:20px;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  border-bottom: 80px solid #023e8a;
  height:0;
  top:55px;
  left:160px;
  transform: skew(45deg) rotateX(30deg);
}

.wingTwo:after {
  content:"";
  position: absolute; 
  width:20px;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-bottom: 35px solid #0077b6;
  height:0;
  left:-100px;
  top:29px;
}

.wingOne:after {
  content:"";
  position: absolute; 
  width:20px;
  height:25px;
  background-color: #0077b6;
  top:-105px;
  left:-140px;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}

.wingTwo:before {
  content:"";
  position: absolute; 
  width:20px;
  height:25px;
  background-color: #023e8a;
  left:-80px;
  top:35px;
  transform: skew(-55deg);
}
CSS Plane

Add clouds:

.clouds {
  position: absolute;
  top:50px;
  left:100px;
}

.cloudOne, .cloudTwo, .cloudThree {
  position: absolute;
  width: 50px;
  height: 25px;
  background-color: #fff;
  border-radius:100px 100px 0 0;
}

.cloudOne {
  top:0;
  left:0;
  animation: cloud 3s linear infinite reverse;
}

.cloudTwo {
  top:50px;
  left:100px;
  animation: cloud 2.5s linear infinite reverse;
}

.cloudThree {
  top:250px;
  left:50px;
  animation: cloud 2.8s linear infinite reverse;
}

.cloudOne:before, .cloudTwo:before, .cloudThree:before {
  content:"";
  position: absolute;
  width: 25px;
  height: 12.5px;
  background-color: #fff;
  border-radius:100px 100px 0 0;
  left:-20px;
  top:12.5px;
  box-shadow: 65px 0 #fff;
}
CSS Plane Animation

Add airplane pollutions:

.pollution {
  position: absolute;
  background-color: #fff;
  top: 130px;
  left: 65px;
  width: 30px;
  height: 10px;
  border-radius: 20px;
  opacity: 0;
  animation: up 1s linear infinite;
}

.pollution:before, .pollution:after {
  content:"";
  position: absolute;
  background-color: #fff;
  border-radius:20px;
  opacity:0;
  width:30px;
  height:10px;
}
.pollution:after {
  top: 10px;
  left: -25px;
  animation: up 2s linear infinite;
}
.pollution:before {
  top: -10px;
  left: -35px;
  animation: up 3s linear infinite;
 
}

Step3.

Add CSS Animation

To make the plane move up and down:

@keyframes fly {
  0% {transform: translateY(0);}
  25% {transform: translateY(-10px);}
  50% {transform: translateY(0);}
  75% {transform: translateY(10px);}
  100% {transform: translateY(0);}
}

For clouds:

@keyframes cloud {  
  from{ 
    left:-150px; 
  }
  to{ 
    left: 400px; 
  }
}

For airplane pollution:

@keyframes up { 
    20% {opacity: 0.7;}
    35% {left: 100px opacity: 0.7;}
    70% {left: 70px  opacity: 0;} 
  }

Enjoy coding!