Categories
#SVG Web development

SVG Draw on Scroll

SVG Draw on Scroll

Using SVG and JavaScript to draw a heart on scroll. Note that it has to be a <path> element:

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

Step1.

Add HTML

Get a SVG path

To make this animation working it has to be a path (any other of SVG elements won’t work).

To create an animation I drew a path (heart) in Adobe Illustrator. To read more about SVG and learn how to create a SVG file click here and here.

<div class="container">
<div class="text"><h1>Scroll to draw</h1></div>
  
  
<svg id="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348.43 311.23"><defs><style>.heart{fill:none;stroke:#be1622;stroke-miterlimit:10; }</style></defs><title>heart</title><path id="heart1" class="heart" d="M340.67,131.25c18.71-30.63,56.59-48.3,92.07-43s66.5,33.36,75.38,68.13c6.22,24.37,2.19,50.32-5.52,74.26-3.88,12.06-8.72,23.89-15.53,34.57s-15.51,20.05-24.35,29.15a861.3,861.3,0,0,1-120.45,103c-32.42-26.2-66.67-45.07-97.36-71.12-14.78-12.55-27.69-27.18-39.75-42.36-15.45-19.44-29.86-40.37-36.88-64.19-8.22-27.87-5.39-59.21,9.37-84.24C194.56,106.85,227,88,260.28,87.45s63.31,15.29,81.13,43.43Z" transform="translate(-163.24 -86.84)"/></svg>
  
</div>

Step2.

Add CSS

body {
  background: linear-gradient(141deg, #f0f3bd 0%, #02c39a 51%, #00a896 75%);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5000px;
  
}

.container {
  position: relative; 
}

svg {
  stroke-width: 2px;
  position: fixed;
  width: 200px;
  height: auto;
  margin:0;
  top: 30%;
  left: 45%;
}

.text {
  position: absolute;
  top:-2500px;
  display: block;
  color: white;
  width:400px;
  left:-100px;
  text-shadow: 1px 1px 1px black;
}

Step3.

Add JavaScript

const svg = document.getElementById("heart1");
const length = svg.getTotalLength();


svg.style.strokeDasharray = length;

svg.style.strokeDashoffset = length;

window.addEventListener("scroll", function () {
  const scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);

  const draw = length * scrollpercent;

  svg.style.strokeDashoffset = length - draw;

});

To see the live output check my Codepen.

Enjoy coding!

Categories
JavaScript Web development

JS Typing Effect

Learn how to create a typing effect with JavaScript.

Learn how to create a typing effect with JavaScript

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

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

Step1.

Add HTML

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

Step2.

Add CSS

Style the text:

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

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

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

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

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

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

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

Step3.

Add JavaScript

Type your text:

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

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

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

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

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

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

Watch also the video tutorial:

Enjoy coding!

Categories
CSS HTML Web development

CSS Windsurfing

I love water sports – can’t wait to Windsurf again!

CSS Windsurfing Animation

Thinking about the wind and the waves I created the Windsurfing animation using just pure CSS.

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

To create the animation you’ll need 2 images of the waves in .png format. For your training, you can use mine pictures below which I created in Adobe Photoshop, and then follow the steps below:

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

Step1.

Add HTML

<div class="container">
  <div class="windserfing">
    <div class="sail">
      <div class="boom"></div>
      <div class="mast"></div>
    </div>
    <div class="board"></div>
    <div class="surfer">
      <div class="head"></div>
      <div class="hair"></div>
      <div class="sunglasses"></div>
      <div class="top"></div>
      <div class="shorts"></div>
      <div class="leg"></div>
      <div class="leg2"></div>
      <div class="arm"></div>
      <div class="arm2"></div>
    </div>
    </div>
   <div class="wave1"></div>
   <div class="wave2"></div>
</div>

Step2.

Add CSS

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

body {
  background-color: #9bf6ff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  
}
.container {
  position: relative;
  
}

Style the Sail:

.windsurfing {
  position:relative; 
  animation: surf 2s ease infinite;
}

.sail{
  position: relative;
  width: 0;
  height: 0;
  border-top: 280px solid transparent;
  border-right: 110px solid rgba(237, 246, 125, 0.95);
  border-bottom: 50px solid transparent;
  transform-style: preserve-3d;
  left:30px;
  top:-40px;
  z-index:5;
}
.sail:before {
  position: absolute;
  content:"";
  width:65px;
  height:5px;
  background-color: #F896D8;
  border-radius:100px;
  top:-130px;
  left:50px;
  transform: rotate(25deg);
}
.sail:after {
  position: absolute;
  content:"";
  width:123px;
  height:5px;
  background-color: #F896D8;
  border-radius:100px;
  top:20px;
  left:-7px;
  transform: rotate(25deg);
}

.boom {
  width: 145px;
  height: 150px;
  border: solid 10px black;
  border-radius: 50%;
  top: -125px; 
  left: -20px; 
  position: absolute;
  transform: rotate3d(0.4, 0.2, 0, 75deg); 
  box-sizing: border-box;
}
.mast {
  position: absolute;
  width:5px;
  height:360px;
  background-color: black;
  left:110px;
  top:-280px;
  border-radius:100px;
  z-index:1;
}
.mast:before {
  position: absolute;
  content:"";
  background-color:black;
  width:25px;
  height:10px;
  top:350px;
  left:-10px;
  border-radius:30px 30px 0 0;
}
CSS Sail

Style the Board:

.board {
  width:300px;
  height: 50px;
  position:absolute;
  background-color: #724CF9;
  border-radius:50%;
  left:-60px;
  top:300px;
  box-shadow: inset 15px -10px 0 #564592;
}
.board:after {
  content:"";
  position: absolute;
  border-radius:0 0 100% 50%;
  width:20px;
  height:40px;
  background-color: #564592;
  left:40px;
  top:40px;
  transform: skew(-25deg);
}
CSS Windsurfing

Add the Windsurfer:

.surfer {
  position:absolute;
  top:0;
  left:0;
}
.head {
  position:absolute;
  background-color: #ffcb69;
  border-radius:50%; 
  width:45px;
  height:50px;
  top:110px;
  left:-55px;
  box-shadow: inset 3px 8px 0 black;
}
.head:before {
  position:absolute;
  content:"";
  width:15px;
  height:15px;
  background-color: #ffcb69;
  left:35px;
  top:20px;
  border-radius: 0 40px;
  
}
.head:after {
  content:"";
  position: absolute;
  border-radius:50%;
  box-shadow: inset 2px 2px 0 black;
  width:15px;
  height:15px;
  top:15px;
  left:10px;
}

.sunglasses {
  position: absolute;
  width: 8px;
  height:15px;
  border-radius:50%;
  background-color: brown;
  top:120px;
  z-index:5; 
  left:-15px;
  box-shadow: inset 2px 2px 0 black;
  
}
.sunglasses:before {
  content:"";
  position:absolute;
  width:25px;
  height:3px;
  background-color:black;
  top:5px;
  left:-22px;
}

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

.top {
  position:absolute;
  width:20px;
  height:50px;
  border-top: 25px solid #41ead4;
  border-left: 35px solid #41ead4;
  border-bottom: 30px solid transparent;
  border-right: 20px solid transparent;
  border-radius:50%;
  top:150px;
  left:-70px;
}

.shorts {
  z-index:5;
  position:absolute;
  width:45px;
  height:40px;
  background-color: #CC444B;
  top:225px;
  left:-60px;
  transform: skew(10deg) rotate(-40deg);
  border-radius: 30px 0 0 0;
}
.shorts:before {
  content:"";
  position:absolute;
  width:36px;
  height:40px;
  background-color: #DA5552;
  top:7px;
  left:8px;
  border-radius: 30px 0 0 0;
  transform: skew(5deg) rotate(-30deg);
}

.shorts:after {
  content:"";
  position: absolute;
  width:38px;
  height:10px;
  left:10px;
  background-color: #CC444B;
}

.leg {
  position:absolute;
  width:5px;
  height:70px;
  background-color: #ffcb69;
  top:250px;
  left:5px;
  transform: rotate(-35deg);
}

.leg:before {
  content:"";
  position:absolute;
  background-color: #ffcb69;
  width:30px;
  height:10px;
  border-radius: 0 30px 0 0;
  top:70px;
}

.leg2 {
  position:absolute;
  background-color: #ffcb69;
  width:5px;
  height:40px;
  top:250px;
  left:-31px;
  transform: rotate(-35deg);
}

.leg2:before {
  content:"";
  position: absolute; 
  width:5px;
  height:40px;
  background-color: #ffcb69;
  transform: rotate(35deg);
  top:35px;
  left:-11px;
}

.leg2:after {
  content:"";
  position:absolute;
  background-color: #ffcb69;
  width:30px;
  height:10px;
  border-radius: 0 30px 0 0;
  top:70px;
  left:-22px;
}

.arm { 
  position: absolute; 
  background-color: #ffcb69;
  width:5px;
  height:35px;
  top:168px;
  left:-5px;
  transform: rotate(-45deg);
  z-index:-1;
}
.arm:before {
  content:"";
  position:absolute;
  background-color: #ffcb69;
  width:5px;
  height:35px;
  top:5px;
  left:11px;
  transform: rotate(45deg);
}

.arm:after {
  content:"";
  position: absolute;
  background-color: #ffcb69;
  width:15px;
  height:15px;
  transform: rotate(-45deg);
  top:2px;
  left:25px;
  border-radius: 0 30px 30px 30px;
}

.arm2 {
  position:absolute;
  background-color: #ffcb69;
  width:35px;
  height:5px;
  top:155px;
  left:-21px;
  z-index:-1;
  
}
.arm2:after {
  content:"";
  position: absolute;
  background-color: #ffcb69;
  width:15px;
  height:15px;
  transform: rotate(-45deg);
  top:-7px;
  left:40px;
  border-radius: 0 30px 30px 30px;
}

.hair {
  position:absolute;
  background-color: black;
  border-radius:50%;
  width:15px;
  height:15px;
  top:97px;
  left:-40px;
}
.hair:before {
  content:"";
  position:absolute;
  background-color: black;
  border-radius:50%;
  width:12px;
  height:12px;
  left:12px;
  top:6px;
}

and add the Waves:

.wave1, .wave2 {
  height: 300px;
  position: absolute;
  width: 1000px;
  z-index: 99;
  left: -400px;
  top:280px;
  opacity:0.6;
}

.wave1 {
  background: url('https://lenadesign.org/wp-content/uploads/2020/05/vawe3-1.png?w=1024') repeat-x;
  -webkit-animation: wave-animation1 8.7s infinite linear; 
  -moz-animation:    wave-animation1 8.7s infinite linear; 
  -o-animation:      wave-animation1 8.7s infinite linear; 
   animation:        wave-animation1 8.7s infinite linear; 
}

.wave2 {
  background: url('https://lenadesign.org/wp-content/uploads/2020/05/vawe1.png?w=1024') repeat-x;
  -webkit-animation: wave-animation1 6.3s infinite linear;
  -moz-animation:    wave-animation1 6.3s infinite linear; 
  -o-animation:      wave-animation1 6.3s infinite linear; 
  animation:         wave-animation1 6.3s infinite linear; 
}
CSS Waves

Step3.

Add CSS Animation

To Surf:

@keyframes surf {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px) rotate(-7deg);}
	60% {transform: translateY(-15px) rotate(3deg);}
}

and for the Waves:

@-webkit-keyframes wave-animation1 {
  0%   { background-position: 0 0; }
  100% { background-position: 1601px 0; }
}
@-moz-keyframes wave-animation1 {
  0%   { background-position: 0 0; }
  100% { background-position: 1601px 0; }
}
@-o-keyframes wave-animation1 {
  0%   { background-position: 0 0; }
  100% { background-position: 1601px 0; }
}
@keyframes wave-animation1 {
  0%   { background-position: 0 0; }
  100% {background-position: 1601px 0;}
}

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

Enjoy coding!

Categories
CSS JQuery Web development

Bitten Doughnut Animation

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

CSS Bitten Doughnut

The doughnut has been bitten πŸ™‚

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

What do you need to do?

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

Step1.

Add HTML

Draw your Doughnut:

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

Step2.

Add CSS

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

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

.content {
  position: relative;
}

Style the doughnut:

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

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

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

Add some sprinkles:

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

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

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

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

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

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

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

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

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

Shadow and crumbs:

.crumbs {
  position: absolute;
  
}

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

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

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

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

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

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

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

Create the bites:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Step3.

Add jQuery /JS

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

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

Enjoy coding!

Categories
CSS JavaScript JQuery Web development

jQuery mouseover() Method/ Escaping Dots Animation

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

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

jQuery mouseover() Method

Syntax:

$(selector).mouseover()

Attach a function to the mouseover event (optional):

$(selector).mouseover(function)

Example:

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

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

</body>
</html>

Output:

Let’s go to the animation:

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

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

What you need to do?

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

Step1.

Add HTML

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

Step2.

Add CSS

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

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

Style dots:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Step3.

Add CSS Animation

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

Step4.

Add jQuery

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

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

Enjoy coding!

Categories
CSS JavaScript JQuery Web development

Coraline/ Other Mother – Walking Animation

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

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

CSS Other Mother

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

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

What do you need to do?

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

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

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

Step1.

Add HTML

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

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

Step2.

Add CSS

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

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

.container {
  position: relative;
}

Style the door:

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

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

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


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

Add the Other Mother:

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

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

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

Step3.

Add JavaScript/jQuery

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

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

Enjoy coding!

Categories
JavaScript Web development

JavaScript – Time and date

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

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

Display day and time

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

Display time

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

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

Step1.

Add HTML

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

Step2.

Add CSS

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

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

}

Step3.

Add JavaScript

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

Display time and date

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

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

Step1.

Add HTML

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

Step2.

Add CSS

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

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

}

Step3.

Add JavaScript

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

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

Enjoy coding!

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

HTML DOM Style perspective property/ perspectiveOrigin Property

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

HTML DOM Style Perspective property

HTML DOM Style Perspective Property

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

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

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

Syntax:

object.style.perspective = "length|none"

Where:

length– how far the element is placed from the view

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

Example:

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

Output:

HTML DOM Style PerspectiveOrigin Property

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

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

Syntax:

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

Where:

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

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

initial- sets this property to its default value.

inherit- inherits this property from its parent element.

Example:

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

Output:

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

Enjoy coding!

Categories
CSS JavaScript JQuery Web development

CSS & 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!