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
#SVG Web development

SVG Handwriting Animation

Practising SVG Path drawing I created the SVG Handwriting Animation.

SVG Handwriting Animation

I’ve tried several ways to make this animation, and I found (in my opinion) the easiest way is to create the text in Adobe Illustrator (or any different program which creates SVG’s) by using the path tools like the Pen tool, or the Pencil tool.

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

Step1.

Draw your text

This time I used the Pencil tool, and renamed each path (like on the image below, I drew letter L and I named this path as an L). This will make the animation easier to set up later.

I drew the letters one by one but if you want to draw more letters on the same path that will be okay too.

Draw your text and export it like an SVG.(To see how to create an SVG file click here).

Step2.

Add the HTML and paste your SVG code into it:

<div id="container">
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285.84 73.32"><defs><style>.cls-1{fill:none;stroke:#1d1d1b;stroke-linecap:round;stroke-linejoin:round;stroke-width:3px;}</style></defs><title>lenastanley</title><path id="L" class="cls-1" d="M109.68,101.19c1.09,5.41,6.88,9,12.4,8.87s10.6-3.21,14.52-7.1c1.82-1.81,3.52-3.94,3.92-6.47s-.9-5.5-3.39-6.15a5.31,5.31,0,0,0-4.69,1.34,12.14,12.14,0,0,0-2.83,4.18c-5.73,12.48-4,27.77-11.35,39.37a13.56,13.56,0,0,1-4,4.32,6.65,6.65,0,0,1-5.66.87c-3.45-1.21-4.62-5.89-3.14-9.23s4.79-5.48,8.15-6.93c4.7-2,10-3.1,15-2s9.64,4.64,11.15,9.55-.81,10.95-5.58,12.85" transform="translate(-103.33 -88.71)"/><path id="E" class="cls-1" d="M154,127.24a15.13,15.13,0,0,0,6.2-2.32c1.77-1.34,2.93-3.76,2.13-5.84s-3.48-3.15-5.72-2.65a9.37,9.37,0,0,0-5.36,4,17.26,17.26,0,0,0-3,11.81,7.87,7.87,0,0,0,1.85,4.62,6.47,6.47,0,0,0,5.85,1.6,12.8,12.8,0,0,0,5.55-2.9" transform="translate(-103.33 -88.71)"/><path id="N" class="cls-1" d="M170.47,115.52c1.94,3.42,1.81,7.63,1,11.47s-1.56,7.08-2.12,11c1-3.25,2.28-6,3.4-10.17,1-3.69,2.5-7.54,5.67-9.67,1.28-.87,3.07-1.36,4.32-.45a4.59,4.59,0,0,1,1.45,3.13,43.49,43.49,0,0,1-.68,17.12l.28-.62" transform="translate(-103.33 -88.71)"/><path id="A" class="cls-1" d="M210.05,138.29a16.72,16.72,0,0,1-.49-8.35,74.74,74.74,0,0,0,1.18-8.38,6.47,6.47,0,0,0-1.36-4.8,4.93,4.93,0,0,0-4.8-1.07,10.56,10.56,0,0,0-4.33,2.71c-3.58,3.41-6.19,8.15-5.93,13.08.11,2.12.86,4.37,2.61,5.56a4.69,4.69,0,0,0,7.26-3.18" transform="translate(-103.33 -88.71)"/><path id="S" class="cls-1" d="M263.55,91.6a11.16,11.16,0,0,0-7.92,9,4.59,4.59,0,0,0,1.12,4.2,3.42,3.42,0,0,0,4.72-.76,5,5,0,0,0,.21-5.07,9.18,9.18,0,0,0-3.79-3.67c-3.76-2.15-8.58-2.7-12.46-.77s-6.42,6.59-5.29,10.77c.88,3.26,3.68,5.69,6.7,7.22s6.34,2.35,9.46,3.68,6.14,3.31,7.64,6.34a10.65,10.65,0,0,1-.8,10.26,14.2,14.2,0,0,1-8.68,5.91,21.83,21.83,0,0,1-10.65-.33c-3.31-.87-6.6-2.43-8.59-5.21s-2.24-7,.12-9.44a8.48,8.48,0,0,1,5.13-2.27,14.31,14.31,0,0,1,9.19,26.42" transform="translate(-103.33 -88.71)"/><path id="T" class="cls-1" d="M280.38,107c-2,7.37-4,14.83-4.25,22.46a18,18,0,0,0,.91,7.16c.42,1.09,1.2,2.23,2.37,2.32" transform="translate(-103.33 -88.71)"/><path id="T2" class="cls-1" d="M272.26,116.93a27,27,0,0,1,11.69-.07" transform="translate(-103.33 -88.71)"/><path id="A2" class="cls-1" d="M303.78,139.29a16.77,16.77,0,0,1-.48-8.36,76.78,76.78,0,0,0,1.18-8.38c0-1.71-.17-3.57-1.36-4.8a5,5,0,0,0-4.81-1.07A10.58,10.58,0,0,0,294,119.4c-3.59,3.4-6.2,8.15-5.94,13.08.11,2.12.86,4.36,2.62,5.55a4.75,4.75,0,0,0,4.5.42,4.8,4.8,0,0,0,2.76-3.59" transform="translate(-103.33 -88.71)"/><path id="N2" class="cls-1" d="M315,115.69c1.93,3.41,1.81,7.63,1,11.46s-1.56,7.09-2.12,11c1-3.25,2.28-6,3.4-10.17,1-3.69,2.49-7.54,5.66-9.68,1.28-.86,3.08-1.36,4.33-.45a4.61,4.61,0,0,1,1.44,3.14,43.69,43.69,0,0,1-.67,17.12l.27-.63" transform="translate(-103.33 -88.71)"/><path id="L2" data-name="L" class="cls-1" d="M345.1,96.4c-.3,11.8-4.39,23.33-4.06,35.13a15.66,15.66,0,0,0,1.58,7.26" transform="translate(-103.33 -88.71)"/><path id="E2" class="cls-1" d="M355.85,127.4a15.12,15.12,0,0,0,6.2-2.31c1.77-1.35,2.93-3.77,2.13-5.84s-3.48-3.15-5.72-2.66a9.43,9.43,0,0,0-5.36,4,17.29,17.29,0,0,0-3,11.8,7.92,7.92,0,0,0,1.86,4.62,6.47,6.47,0,0,0,5.85,1.61,12.71,12.71,0,0,0,5.55-2.91" transform="translate(-103.33 -88.71)"/><path id="Y"class="cls-1" d="M373.08,115.75a29.75,29.75,0,0,0-.38,16.7c.52,1.89,1.42,3.94,3.26,4.61a4.61,4.61,0,0,0,4.57-1.22,12,12,0,0,0,2.58-4.21A69.17,69.17,0,0,0,387.62,116l-1.46,13.43a84.83,84.83,0,0,1-2.53,15,28.46,28.46,0,0,1-7.56,13,11.54,11.54,0,0,1-5.4,3,6.09,6.09,0,0,1-5.75-1.72c-1.85-2.17-1.35-5.66.47-7.85s4.63-3.29,7.4-4a16.16,16.16,0,0,1,8.67-.07c2.78.89,5.26,3.18,5.72,6.07l.49-.49" transform="translate(-103.33 -88.71)"/></svg>
</div>

Step3.

Add CSS

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

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

#container {
  position: relative;
  cursor:pointer;
  width: 100%;
  max-width: 400px;
  left:-200px;
}

svg {
  width: 100%;
  max-width: 400px;
  padding: 150px; 
  
}

Add your letters(paths):

#L  {
        stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards;
}

To each letter, I added the animation – duration time and animation-delay to make handwriting smoother.

#E {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards .8s;
}

#N {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 1.1s;
}

#A {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 1.3s;
}

#S {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.4s linear forwards 1.8s;
}

#T {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 2.3s;
}

#T2 {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 2.3s;
}

#A2 {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 2.6s;
}

#N2 {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 2.9s;
}

#L2 {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 3.2s;
}

#E2 {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 3.5s;
}

#Y {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 3.8s;
}

Step4.

Add CSS Animation

Add the @keyframes:

@keyframes lena {
	0% {
        stroke-width: 3;
		stroke-dashoffset: 600;
	}
    
    14% {
        stroke-width: 3;
    }
    
    15% {
        stroke-width: 3;
    }
    
	100% {
		stroke-dashoffset: 0;
	}
}

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

Enjoy coding!

Categories
CSS JavaScript JQuery

CSS/jQuery/JS Playing Cube

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

CSS Playing Cube

Click and drag the cube and change its the position!

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

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

and then:

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

Step1.

Add HTML

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

Step2.

Add CSS

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

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

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

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

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

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

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

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

Step3.

Add jQuery/JavaScript

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

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

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

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

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

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

To see the live output go to lenastanley.com.

Enjoy coding!

Categories
CSS JavaScript JQuery Web development

CSS & jQuery 3d Cube

3d Cube

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

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

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

What do you need to do?

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

Step1.

Add HTML

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

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

Step2.

Add CSS

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

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

Step3.

Add JavaScript/jQuery

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

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

Enjoy coding!

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

CSS Coffee Express Animation

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

CSS Coffee Express

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

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

Step1.

Add HTML

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

Step2.

Add CSS

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

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

Style the coffee express:

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

Add the logo:

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

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

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

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

and the buttons:

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

Coffee pod:

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

Coffee and milk:

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

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

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

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

Steam:

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

Step3.

Add CSS Animation

To fill the cup:

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

and add the steam:

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

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

Enjoy coding!

Categories
CSS JavaScript JQuery Web development

Happy Earth Day! /lettering.js

Happy Earth Day!

To wrap letters with lettering() follow the steps below:

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

Step1.

Add HTML

<div class="container">
  <div class="earth">
    <div class="continent"></div>
    <div class="continent2"></div>
  </div>
  <div class="eye1"></div>  
  <div class="eye2"></div>  
  <div class="smile"></div>
  <div class="shadow">
    <div class="circle"><h1>Happy Earth Day!</h1></div>
  </div>
    </div>

Step2.

Add JQuery

Add first these in the <head> section:

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

and then a script block with the .lettering() method:

<script>
	$(function() {
        $("h1").lettering();
    });
	</script>

Note: The resulting code will churn our .h1 and output the following:

<h1>
  <span class="char1">H</span>
  <span class="char2">a</span>
  <span class="char3">p</span>
  <span class="char4">p</span>
  <span class="char5">y</span>
  <span class="char6"></span>
  <span class="char7">E</span>
  <span class="char8">a</span>
  <span class="char9">r</span>
  <span class="char10">t</span>
  <span class="char11">h</span>
  <span class="char12"></span>
  <span class="char13">D</span>
  <span class="char14">a</span>
  <span class="char15">y</span>
  <span class="char16">!</span>
</h1>

Step3.

Add CSS

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

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

Style the Earth and add continents:

.earth {
  position: relative;
  background-color: #3498DB;
  border-radius: 50%;
  width: 250px;
  height: 250px;
  overflow: hidden;
  left:25px;
  top: 25px;
  box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
  animation: earth alternate infinite 400ms 40ms ease-in-out;
}
.continent {
  position: absolute;
  display: block;
  background-color: #2ECC71;
  width: 120px;
  height: 90px;
  border-radius: 50%; 
  left: 45px;
  
}
  
.continent:after {
  content:"";
  position: absolute;
  display: block;
  background-color: #2ECC71;
  width: 80px;
  height: 110px;
  border-radius: 50%; 
  top:50px;
  left:35px;
  
}
.continent:before {
  content:"";
  position: absolute;
  display: block;
  background-color: #2ECC71;
  width: 20px;
  height: 40px;
  border-radius: 50%; 
  top:120px;
  left:115px;
  transform: rotate(40deg);
  

}
.continent2 {
  position: absolute;
  background-color: #2ECC71;
  width: 120px;
  height: 140px;
  border-radius: 50%; 
  top: 150px;
  left: 180px;
}
.continent2:after {
  content:"";
  position: absolute;
  background-color: #2ECC71;
  width: 60px;
  height: 70px;
  border-radius: 50%; 
  left:-30px;
  top:50px;
}
.continent2:before {
  content:"";
  position: absolute;
  background-color: #2ECC71;
  width: 40px;
  height: 70px;
  border-radius: 50%; 
  left:-120px;
  top:10px;
  transform: rotate(-40deg);
}

Make the Earth smile:

.eye1 {
  position: absolute;
  display: block;
  background-color:black;
  z-index: 10;
  border-radius:50%;
  width: 30px;
  height: 30px;
  top:130px;
  left: 95px;
  -webkit-transform-origin: 50%;
  -webkit-animation: blink 2s infinite;
}
.eye1:after {
  content:"";
  position: absolute;
  background-color: white;
  width: 10px;
  height: 10px;
  border-radius:50%;
  top: 10px;
  left: 5px;
}
.eye2 {
  position: absolute;
  display: block;
  background-color:black;
  z-index: 10;
  border-radius:50%;
  width: 30px;
  height: 30px;
  top:130px;
  left: 175px;
  -webkit-transform-origin: 50%;
  -webkit-animation: blink 2s infinite;
}
.eye2:after {
  content:"";
  position: absolute;
  background-color: white;
  width: 10px;
  height: 10px;
  border-radius:50%;
  top: 10px;
  left: 5px;
}
.smile {
  position: absolute;
  top: 160px;
  left: 130px;
  width: 40px;
  height: 20px;
  opacity:0.5;
  border-radius: 0 0 100px 100px;
  overflow: hidden;
  background:#000;
}
.smile:after {
  content:"";
  position: absolute;
  top: 8px;
  left: 5px;
  width: 80%;
  height: 70%;
  border-radius: 100px 100px 0 0;
  background: #5DADE2;
  opacity: 1;
}

Add an extra background to the Earth:

.shadow {
  position: absolute;
  border-radius: 50%;
  top:-50px;
  left:-50px;
  background-color: #FCF3CF;
  width: 400px;
  height: 400px;
  z-index:-10;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}

The text is easy to manipulate in your CSS using an ordinal .char# pattern. 

.circle {
  position: relative;
  width: 400px;
  border-radius: 50%;
  transform: rotate(-50deg);
}

h1 span {
  font: 30px "Comic Sans MS", cursive, sans-serif;
  height: 200px;
  position: absolute;
  width: 20px;
  left: 35px;
  top: -65px;
  transform-origin: bottom center;
  
}

.char1 {
  transform: rotate(4deg);
}

.char2 {
  transform: rotate(12deg);
}

.char3 {
  transform: rotate(18deg);
}

.char4 {
  transform: rotate(24deg);
}

.char5 {
  transform: rotate(30deg);
}

.char6 {
  transform: rotate(36deg);
}

.char7 {
  transform: rotate(42deg);
}

.char8 {
  transform: rotate(48deg);
}

.char9 {
  transform: rotate(54deg);
}

.char10 {
  transform: rotate(60deg);
}

.char11 {
  transform: rotate(66deg);
}

.char12 {
  transform: rotate(72deg);
}

.char13 {
  transform: rotate(78deg);
}

.char14 {
  transform: rotate(84deg);
}
.char15 {
  transform: rotate(90deg);
}

.char16 {
  transform: rotate(96deg);
}

Step4.

Add CSS Animation

For the Earth’s eyes:

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

and the globe:

@keyframes earth { 
  to { transform: scaleX(1.03) scaleY(0.97); } 
}

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

Enjoy coding!

Categories
CSS HTML Web development

Thinking about traveling? CSS Plane Animation

Paper plane gif

Thinking about travelling? Me…yes. Unfortunately, we need to wait to travel again.

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

To create CSS Plane Animation follow the steps below:

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

Step1.

Add HTML

<div class="container">
  <div class="clouds">
    <div class="cloud"></div>
    <div class="cloud1"></div>
    <div class="cloud2"></div>
    <div class="cloud3"></div>
  </div>
  <div class="plane">
    <div class="body">
      <div class="pollution"></div>
      </div>
    <div class="window">
      <div class="window1"></div>
  </div>
</div>
  <div class="mountains">
    <div class="mountain1"></div>
    <div class="mountain2"></div>
    <div class="mountain3"></div>
    <div class="mountain4"></div>
    <div class="mountain5"></div>
    <div class="mountain6"></div>
    <div class="mountain7"></div>
    <div class="mountain8"></div>
  </div>
</div> 

Step2.

Add CSS

Set the colour of the background:

body {
  background-color: #bae6f5;
  background-size: 100vh;
}

Style the container and the plane:

.container {
  position: relative;
  
}
.plane {
  position: relative;
  left: 40%;
  top: 200px;
  animation: move 9s linear infinite;
}
.body {
  position: absolute;
  background-color: #fff;
  width: 250px;
  height: 50px;
  border-radius: 20px 50px 50px 50px;
  box-shadow:inset -15px -15px 1px #157ea1;
}
.body:after {
  content:"";
  position: absolute;
  width: 60px;
  height: 150px;
  border-radius: 30px 30px 30px 30px;
  background-color: #fff;
  transform: skew(50deg);
  border-racius: 30px;
  top:-50px;
  left: 110px;
  
}
.body:before {
  position: absolute;
  content:"";
  background-color:#fff;
  width: 25px;
  height: 40px;
  top:-20px;
  left: 0;
  border-radius: 20px;
  
}

.window {
  position: absolute;
  background-color: #3bbfeb;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid #d2d5d6;
  z-index:1;
  top: 5px;
  left: 170px;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
}
.window:after {
  position: absolute; 
  content:"";
  background-color: #3bbfeb;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid #d2d5d6;
  z-index:1;
  left: -50px;
  top:-4px;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
  
}
.window:before {
  content:"";
  position:absolute; 
  background-color: #3bbfeb;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid #d2d5d6;
  z-index:1;
  left: -95px;
  top:-4px;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
}
.window1 {
  position:absolute; 
  background-color: #3bbfeb;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid #d2d5d6;
  z-index:1;
  left: -140px;
  top:-4px;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
}
.window1:after { 
  content:"";
  position: absolute;
  background-color: #3bbfeb;
  width: 25px;
  height: 20px;
  border: 4px solid #d2d5d6;
  left: 180px;
  top: -5px;
  transform:skew(20deg); 
  border-radius: 20px;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
 }

Add coluds:

.clouds {
  position: absolute;
  left: 175px;
}
 .cloud {
  position: absolute;
  top: 120px;
  left: 200px;
  background-color: white;
  height: 20px;
  width: 40px;
  z-index: 7;
  border-radius: 40px 40px 0 0;
  opacity: 0.8;
  animation: cloud 12s linear alternate infinite;   
  }
.cloud::before {
    content: "";
    position: absolute;
    background-color: white;
    height: 60px;
    width: 120px;
    border-radius: 60px 60px 0 0;
    bottom: 0;
    right: 20px;
  }

.cloud1 {
  position: absolute;
  top: 200px;
  left: 300px;
  background-color: white;
  height: 20px;
  width: 40px;
  z-index: 8;
  border-radius: 40px 40px 0 0;
  opacity: 0.8;
  animation: cloud 10s linear alternate-reverse infinite;
}
.cloud1::before {
    content: "";
    position: absolute;
    background-color: white;
    height: 60px;
    width: 120px;
    border-radius: 60px 60px 0 0;
    bottom: 0;
    right: 25px;
  }
.cloud2 {
  position: absolute;
  top: 120px;
  left: 1000px;
  background-color: white;
  height: 20px;
  width: 40px;
  z-index: 7;
  border-radius: 40px 40px 0 0;
  opacity: 0.8;
  animation: cloud 12s linear alternate infinite;   
  }
.cloud2::before {
    content: "";
    position: absolute;
    background-color: white;
    height: 60px;
    width: 120px;
    border-radius: 60px 60px 0 0;
    bottom: 0;
    right: 20px;
  }

.cloud3 {
  position: absolute;
  top: 200px;
  left: 1300px;
  background-color: white;
  height: 20px;
  width: 40px;
  z-index: 8;
  border-radius: 40px 40px 0 0;
  opacity: 0.8;
  animation: cloud 10s linear alternate-reverse infinite;
}
.cloud3::before {
    content: "";
    position: absolute;
    background-color: white;
    height: 60px;
    width: 120px;
    border-radius: 60px 60px 0 0;
    bottom: 0;
    right: 25px;
  }

Add mountains:

.mountains {
  position: absolute;
}
.mountain1 {
  position: absolute;
  left: 90px;
  top: 340px;
  bottom: 0;
  border-left: 160px solid transparent;
  border-right: 160px solid transparent;
  border-bottom: 190px solid #32a852;
  z-index: 1;
  opacity: 0.6;
}
.mountain1:after {
  content:"";
  position: absolute;
  border-bottom: 100px solid #edfeff;
  border-left: 85px solid transparent;
  border-right: 85px solid transparent;
  z-index:2;
  left: -85px; 
}
.mountain1:before {
  content:"";
  position: absolute;
  border-top: 70px solid #edfeff;
  border-left: 35px solid transparent;
  border-right: 45px solid transparent;
  z-index:3;
  top: 50px;
  left:-40px; 
}
.mountain2 {
  position: absolute;
  top: 350px;
  bottom: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 180px solid #32a852;
  z-index: 1;
}
.mountain2:after {
  content:"";
  position: absolute;
  border-bottom: 90px solid #edfeff;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  z-index:2;
  left: -75px; 
}
.mountain2:before {
  content:"";
  position: absolute;
  border-top: 70px solid #edfeff;
  border-left: 35px solid transparent;
  border-right: 45px solid transparent;
  z-index:3;
  top: 50px;
  left:-40px; 
}
.mountain3 {
  position: absolute;
  left: 490px;
  top: 340px;
  bottom: 0;
  border-left: 160px solid transparent;
  border-right: 160px solid transparent;
  border-bottom: 190px solid #32a852;
  z-index: 1;
  opacity: 0.6;
}
.mountain3:after {
  content:"";
  position: absolute;
  border-bottom: 100px solid #edfeff;
  border-left: 85px solid transparent;
  border-right: 85px solid transparent;
  z-index:2;
  left: -85px; 
}
.mountain3:before {
  content:"";
  position: absolute;
  border-top: 70px solid #edfeff;
  border-left: 35px solid transparent;
  border-right: 45px solid transparent;
  z-index:3;
  top: 50px;
  left:-40px; 
}
.mountain4 {
  position: absolute;
  top: 350px;
  left: 650px;
  bottom: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 180px solid #32a852;
  z-index: 1;
}
.mountain4:after {
  content:"";
  position: absolute;
  border-bottom: 90px solid #edfeff;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  z-index:2;
  left: -75px; 
}
.mountain4:before {
  content:"";
  position: absolute;
  border-top: 70px solid #edfeff;
  border-left: 35px solid transparent;
  border-right: 45px solid transparent;
  z-index:3;
  top: 50px;
  left:-40px; 
}
.mountain5 {
  position: absolute;
  left: 790px;
  top: 340px;
  bottom: 0;
  border-left: 160px solid transparent;
  border-right: 160px solid transparent;
  border-bottom: 190px solid #918c76;
  z-index: -1;
  opacity: 0.6;
}
.mountain5:after {
  content:"";
  position: absolute;
  border-bottom: 100px solid #edfeff;
  border-left: 85px solid transparent;
  border-right: 85px solid transparent;
  z-index:2;
  left: -85px; 
}
.mountain5:before {
  content:"";
  position: absolute;
  border-top: 70px solid #edfeff;
  border-left: 35px solid transparent;
  border-right: 45px solid transparent;
  z-index:2;
  top: 50px;
  left:-40px; 
}
.mountain6 {
  position: absolute;
  top: 350px;
  left: 1250px;
  bottom: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 180px solid #32a852;
  z-index: 1;
}
.mountain6:after {
  content:"";
  position: absolute;
  border-bottom: 90px solid #edfeff;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  z-index:2;
  left: -75px; 
}
.mountain6:before {
  content:"";
  position: absolute;
  border-top: 70px solid #edfeff;
  border-left: 35px solid transparent;
  border-right: 45px solid transparent;
  z-index:3;
  top: 50px;
  left:-40px; 
}
.mountain7 {
  position: absolute;
  left: 1790px;
  top: 340px;
  bottom: 0;
  border-left: 160px solid transparent;
  border-right: 160px solid transparent;
  border-bottom: 190px solid #918c76;
  z-index: -1;
  opacity: 0.6;
}
.mountain7:after {
  content:"";
  position: absolute;
  border-bottom: 100px solid #edfeff;
  border-left: 85px solid transparent;
  border-right: 85px solid transparent;
  z-index:2;
  left: -85px; 
}
.mountain7:before {
  content:"";
  position: absolute;
  border-top: 70px solid #edfeff;
  border-left: 35px solid transparent;
  border-right: 45px solid transparent;
  z-index:2;
  top: 50px;
  left:-40px; 
}
.mountain8 {
  position: absolute;
  top: 350px;
  left: 1550px;
  bottom: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 180px solid #32a852;
  z-index: 1;
}
.mountain8:after {
  content:"";
  position: absolute;
  border-bottom: 90px solid #edfeff;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  z-index:2;
  left: -75px; 
}
.mountain8:before {
  content:"";
  position: absolute;
  border-top: 70px solid #edfeff;
  border-left: 35px solid transparent;
  border-right: 45px solid transparent;
  z-index:3;
  top: 50px;
  left:-40px; 
}

Airplane pollution:

.pollution {
  position: absolute;
  background-color: #fff;
  top: 30px;
  left: -55px;
  width: 50px;
  height: 20px;
  border-radius: 20px;
  opacity: 0;
  animation: steam 1s linear infinite;
  z-index:4; 
}
.pollution:after {
  content:"";
  position: absolute;
  background-color: #fff;
  top: 10px;
  left: -65px;
  width: 50px;
  height: 20px;
  border-radius: 20px;
  opacity: 0;
  animation: steam 2s linear infinite;
  z-index:4; 
}
.pollution:before {
  content:"";
  position: absolute;
  background-color: #fff;
  top: -15px;
  left: -85px;
  width: 50px;
  height: 20px;
  border-radius: 20px;
  opacity: 0;
  animation: steam 3s linear infinite;
  z-index:4; 
}

Step3.

Add CSS Animation

To make the plane move:

@keyframes move{  
  from{ 
    left:-200px; 
  }
  to{ 
    left:130%; 
  }
}

For clouds:

@keyframes cloud {
  100% {
    transform: translateX(95px);
  }
}

For airplane pollution:

@keyframes steam { 
    20% {opacity: 0.6;}
    35% {left: 100px opacity: 0.6;}
    70% {left: 70px  opacity: 0;} 
  }

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

Enjoy coding!

Categories
CSS HTML Web development

CSS Background Change Animation – Day & Night

CSS Night & Day

Hello! To change the element/ background colour we can use the CSS Animation.

The following example will change the background-color of the <div> element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: green;
  animation-name: example;
  animation-duration: 5s;
  border-radius: 50%;
}

@keyframes example {
  0%   {background-color: green;}
  25%  {background-color: blue;}
  50%  {background-color: yellow;}
  100% {background-color: red;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

Output:

Now when you know the base of the background change animation we can go further.

In the animation below I used exactly the same rule of the changing background.

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

What do you need to do?

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

Step1.

Add HTML

<div class="container">
  <div class="window">
    <div class="frame"></div>
    <div class="windowsill"></div>
    <div class="holder"></div>
    <div class="curtain"></div>
  </div>
  <div class="cat">
    <div class="tail"></div>
    <div class="ears"></div>
  </div>
  <div class="sun"></div>
  <div class="moon"></div>
  </div>

Step2.

Add CSS

Set the size and the color of the background:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #53CABD;
  animation: background 10s linear infinite alternate;
}

Set the position of the container and the window:

.container {
  top:-200px;
  left:-150px;
  position: relative;
}
.window {
  position: relative;
}

Style the frame, window sill, and curtains:

.frame {
  position: absolute; 
  width: 450px;
  height: 250px;
  background-color: #41BEDD;
  border: 10px solid #311C1C;
  border-radius: 5px;
  box-shadow:inset -15px -15px 0 rgba(0,0,0,0.07);
  left:-80px;
  animation: frame 10s linear infinite alternate;
  
}
.frame:after {
  content:"";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #BDBDBD;
  top: -50px;
  left: 515px;
}
.windowsill {
  position: absolute;
  width: 580px;
  height: 30px;
  background-color: #311C1C;
  top: 265px;
  left:-125px;
  border-radius: 50px;
  box-shadow: 15px 15px rgba(0,0,0,0.07);
  
}
.windowsill:after {
  content:"";
  position: absolute;
  width: 600px;
  height: 10px;
  background-color: #BDBDBD;
  top:-300px;
  left: -20px;
  
}
.windowsill:before {
  content:"";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #BDBDBD;
  top: -305px;
  left: -35px;
  
}
.holder {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 300px solid #962c48;
  border-right: 200px solid transparent;
  left: -120px;
  top:-25px;

}
.holder:after {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 100px solid #962c48;
  border-right: 50px solid transparent;
}
.holder:before {
  content:"";
  position: absolute;
  background-color: #962c48;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  left:-5px;
  top:-5px;
}
.curtain {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 300px solid #962c48;
  border-left: 200px solid transparent;
  top:-25px;
  left:240px;
}
.curtain:after {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 100px solid #962c48;
  border-left: 50px solid transparent;
  left:-50px;
}
.curtain:before {
  content:"";
  position: absolute;
  background-color: #962c48;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  left:-10px;
  top:-5px;
}

Style a cat:

.cat {
  position: absolute;
  z-index:10;
}
.tail {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius:50%;
  box-shadow:inset 10px -5px 0 black;
  top: 210px;
  left:80px;
  transform: rotate(5deg);
}
.tail:after {
  content:"";
  position: absolute;
  background-color: black;
  width: 70px;
  height: 80px;
  top: -20px;
  left:20px;
  border-radius:50%;
  box-shadow: 10px -15px 0 rgba(0,0,0,0.07);
}
.tail:before {
  content:"";
  position: absolute;
  background-color: black;
  box-shadow: 5px -15px 0 rgba(0,0,0,0.07);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  top:-50px;
  left: 30px;
}
.ears {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid black; 
  top:152px;
  left:145px;
  transform: rotate(20deg);
  
}
.ears:after {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid black; 
  top:12px;
  left:-40px;
  transform: rotate(-40deg);
}

Add Sun and Moon:

.sun {
  position: absolute;
  border-radius: 50%;
  background-color: #FBF799;
  width: 50px;
  height:50px;
  left:130px;  
  top: 70px;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  animation: sun 10s alternate infinite;
  
}
.sun:after {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #FBF799;
  width: 100px;
  height:100px;
  opacity:0.5;
  top: -23px;
  left:-25px;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  
}
.sun:before {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #FBF799;
  width: 150px;
  height:150px;
  opacity:0.3;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left:-50px;
  top:-50px;
}
.moon {
  position: absolute;
  border-radius: 50%;
  width: 50px;
  height:50px;
  left:130px;  
  top: 70px;
  box-shadow:inset -15px -15px 0 #c7ebde;
  animation: fade-in 10s infinite alternate;
}
.moon:after {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #ceede2;
  width: 100px;
  height:100px;
  opacity:0.5;
  top: -23px;
  left:-25px;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  animation-delay: 10s;
  animation: moon 10s alternate infinite;
  
}
.moon:before {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #ceede2;
  width: 150px;
  height:150px;
  opacity:0.3;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left:-50px;
  top:-50px;
  animation-delay: 10s;
  animation: moon 10s alternate infinite;
}

Step3.

Add CSS Animation

For the background:

@keyframes background {
  0% {
    background: #53CABD;
  }
  100% {
    background: rgba(3, 43, 62, .94);
  }
}

For the window:

@keyframes frame {
  0% {
    background: #41BEDD;
  }
  100% {
    background: #23355e;
  }
}

For Sun:

@keyframes sun {
  0 {transform: scale(0.8) rotate(360deg);opacity:1;}
  50% {opacity:1;}
  100% {transform: scale(1.1) rotate(360deg);opacity:0;}
}

and for the Moon:

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
    50% {
    opacity: 0.3;
    transform: translateY(0);
  }
  100% {
    opacity: 0.9;
    transform: translateY(0);
  }
}

@keyframes moon {
  0 {transform: scale(0.3) rotate(360deg);opacity:0;}
  50% {opacity:0.2;}
  100% {transform: scale(1.1) rotate(360deg);opacity:0.1;}
}

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

Enjoy coding!

Categories
CSS Web development

Happy Easter! /CSS Easter Animation

Happy Easter everyone. Stay safe, and keep well!

Happy Easter Gif

To create the Easter animation follow the steps below.

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

Step1.

Add HTML

<div class="container">
  <div class="bunny">
    <div class="face"></div>
    <div class="smile"></div>
    <div class="nose"></div>
    <div class="teeth"></div>
    <div class="ears"></div>
    
  </div>
  <div class="bunny2">
    <div class="face2"></div>
    <div class="smile"></div>
    <div class="nose"></div>
    <div class="teeth"></div>
     <div class="ears2"></div>
</div>
  <div class="shadow"></div>
</div>

Step2.

Add CSS

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

body {
  background-color: #DAF7A6;
}

.container {
  position: relative;
  left: 40%;  
  top: 150px;
}

Style bunnies:

body {
  background-color: #DAF7A6;
}

.container {
  position: relative;
  left: 40%;  
  top: 150px;
}

.bunny {
  position: relative; 
  animation: jump 2s ease infinite;
}
.face {
      position: absolute;
      display: block;
      width: 160px;
      height: 220px;
      background-color: #F1948A;
      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
      box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  z-index:1;
    }

.face:after {
  position: absolute;
  content:"";
  background-color: #000;
  border-radius:50%;
  width: 15px;
  height: 20px;
  top: 35px;
  left: 50px;
}
.face:before {
  position: absolute;
  content:"";
  background-color: #000;
  border-radius:50%;
  width: 15px;
  height: 20px;
  top: 35px;
  left: 90px;
}



.bunny2 {
  position: relative;
  left: 170px;
  animation: jump 2.5s ease infinite;
}
.face2 {
      position: absolute;
      display: block;
      width: 160px;
      height: 220px;
      background-color: #1ABC9C;
      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
      box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
    }

.face2:after {
  position: absolute;
  content:"";
  background-color: #000;
  border-radius:50%;
  width: 15px;
  height: 20px;
  top: 35px;
  left: 50px;
}
.face2:before {
  position: absolute;
  content:"";
  background-color: #000;
  border-radius:50%;
  width: 15px;
  height: 20px;
  top: 35px;
  left: 90px;
}

.smile {
  position: absolute;
  background-color: transparent;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  box-shadow:inset 3px -3px 0 #000;
  transform: rotate(-40deg);
  top:50px;
  left: 53px;
  z-index:3;
}
.smile:after {
  content:"";
  position: absolute;
  width:10px;
  height:3px;
  background-color: #000;
  left:2px;
  top:5px;
  
}
.smile:before {
  content:"";
  position: absolute;
  width:10px;
  height:3px;
  background-color: #000;
  left:39px;
  top:40px;
  transform: rotate(90deg);
  
}
.nose {
  position: absolute;
  width: 3px;
  height: 25px;
  background-color: #000;
  top: 72px;
  left: 75px;
  z-index:5;
}
.nose:after {
  content:"";
  position: absolute;
  width: 25px;
  height: 15px;
  background-color: #C0392B;
  border-radius: 40px;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
  left:-10px;
  
}
.teeth {
  position: absolute;
  background-color: #fff;
  width: 10px;
  height: 15px;
  border-radius: 5px 5px 20px 20px;
  top:96px;
  left: 70px;
  z-index:2;
  
}
.teeth:after {
  content:"";
  position: absolute;
  background-color: #fff;
  width: 10px;
  height: 15px;
  border-radius: 5px 5px 20px 20px;  
  left: 8px;
  z-index:2;
  
}
.ears {
  position: absolute;
  width: 40px;
  height: 120px;
  background-color: #F1948A;
  top:-105px;
  border-radius: 60% 60% 40% 40% / 50% 50% 60% 50% ;
  transform: rotate(20deg);
  left: 100px;
  opacity:0.7;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
}
.ears:after {
  content:"";
  position: absolute;
  width: 40px;
  height: 120px;
  background-color: #F1948A;
  top:-105px;
  border-radius: 60% 60% 40% 40% / 50% 50% 60% 50% ;
  transform: rotate(-40deg);
  left: -70px;
  top:25px;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
  
}
.ears2 {
  position: absolute;
  box-shadow:inset 5px 5px 0 rgba(0,0,0,0.07);
  width: 40px;
  height: 120px;
  background-color: #1ABC9C;
  border-radius: 60% 60% 40% 40% / 50% 50% 60% 50% ;
  opacity:0.7;
  z-index:-1;
  top:-100px;
  left:20px;
  transform: rotate(-20deg);
  
}
.ears2:after {
  content:"";
  position: absolute;
  width: 38px;
  height: 90px;
  background-color: #1ABC9C;
  left: 65px;
  transform: rotate(40deg);
  top: 60px;
  border-radius: 50%;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
  
}
.ears2:before {
  content:"";
  position: absolute;
  width: 38px;
  height: 90px;
  background-color: #1ABC9C;
  left: 92px;
  transform: rotate(-40deg);
  top: 70px;
  border-radius: 50%;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
  z-index:1;
  transform-origin: top center;
	animation: swing 2s ease infinite;
}

Add shadow:

.shadow {
  position: absolute;
  width: 350px;
  height: 50px;
  background-color:#000;
  top: 200px;
  border-radius: 50%;
  opacity: 0.5;
  left:-5px;
  z-index:-2;
  animation: scale 1.5s infinite;
}

Step3.

Add CSS Animation

For the shadow:

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

For the bunny’s ear:

@keyframes swing {
	20% { transform: rotate(15deg); }	
	40% { transform: rotate(-10deg); }
	60% { transform: rotate(5deg); }	
	80% { transform: rotate(-5deg); }	
	100% { transform: rotate(0deg); }
}

To make bunnies jump:

@keyframes jump {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}

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

Enjoy coding!