DEV Community: Igor Zanella

Light Switch canvas responsive background

Igor Zanella — Fri, 02 Oct 2020 00:28:59 +0000

Welcome to this new tutorial. I did it using vanilla JS because it's more simple to adapt it to various framework. I did it previously on Svelte, but obviously is possible also on React, Angular, Vue, etc. with some little modification.

What is the effect?

The effect we want is the light turning on from the place where we have the light switch, it's also responsive.

In this example, switch is only a checkbox, but as you can see below you can use something prettier, like a svg bulb.

Let's start!

I assume you already know basics of HTML, CSS and JS. We are going fast on simple declarations, concentrating on Canvas functions.

HTML

<html>
    <body>
        <canvas id="canvas-bg"></canvas>
        <main id="main">
            <h1 id="title" class="sans-serif">Changing color title</h1>
            <div class="sans-serif"><input type="checkbox" id="switch" onclick="handleClick(event)"/>Switch Bulb</div>
        </main>
    </body>
</html>

HTML code is pretty simple, we are declaring 2 main containers, the canvas (background) and the main with the page content.
We are declaring a checkbox which now will do the light switch, you can also use something else.

CSS

:root {
    --dark-color: #040020;
    --light-color: #fff;
}

body {
    background-color: var(--dark-color);
    margin: 0;
}

main {
    display: flex;
    justify-content: center;
    padding: 10px;
}

#canvas-bg {
    position: fixed;
    z-index: -1;
    width: 100%;
    height: 100%;
}

.sans-serif {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

h1 {
    transition: all .5s;
}

.dark *{
    color: var(--dark-color);
}

.light *{
    color: var(--light-color);
}

CSS is simple, too. Let's concentrate on colors, I created dark and light classes, which give the color to all the children.

The #canvas-bg which is the canvas object, is positioned fixed, which is relative to viewport, so it will remain there also if scrolling. Z-index is used to put the background behind the other elements.

Javascript

Ok, now we are seeing Javascript in pieces, to explain what I did and why.

const dark_color =  "#040020", light_color = "#fff";
let animationCount = 0;
const speed = 10;
const clickPosition = {x: 0, y: 0};

const switchBulb = document.getElementById("switch");
let lightOn = switchBulb.checked;

let canvas = document.getElementById("canvas-bg");
let ctx = canvas.getContext("2d");

We are declaring some variables, starting from colors. Then we will find out what are animationCount, speed and clickPosition variables.

We are binding switchBulb element with the checkbox and lightOn will be the value which is telling us if the light is on or off.

After that we declare the canvas and we get the context from it.
Now let's go to functions.

handleClick(e)

function handleClick(e) {
    lightOn = switchBulb.checked;
    clickPosition.x = e.x;
    clickPosition.y = e.y;
    if(lightOn) turnOn();
    else turnOff();
    changeContent();
}

What do we do here? We are handling the click. So first we are assigning to lightOn the value of checkbox.

Then we get from the event what is the click position based on the document, so we set it in the object we created before. That will be the starting point of the animation.

Then we call one of the two functions, if lights is set to on we obviously call turnOn and viceversa.

After that we call the changeContent function, which is explained below.

resizeCanvas()

function resizeCanvas(){
    ctx.canvas.width  = window.innerWidth;
    ctx.canvas.height = window.innerHeight;
    ctx.fillStyle = lightOn ? light_color : dark_color;
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
};
window.addEventListener("resize", resizeCanvas);
resizeCanvas();

What are we doing here? This is the function dedicated to responsive design.

We are resizing the width and height of canvas and filling it with a rect with the same size for background with the correct color, based on light state.

Then we call the function to adapt at first time the canvas and adding the listener on windows resize.

changeContent()

function changeContent(){
    let main = document.getElementById("main");
    main.classList.add(lightOn ? "dark" : "light");
    main.classList.remove(lightOn ? "light" : "dark");
}
changeContent();

This is simple, we are adding the class we created before, to change the content color, based on light state.

We are also calling it for the first time to adapt the content color.

In frameworks, this and other functions are useless, because you can set class directly on html based on js vars.

turnOn()

Ok, this is the start of "difficult" part. Let's see the functions which turn on the lights divided into parts.

What do we need? We need to create a circle, starting from zero pixels, till the maximum size. What will be the maximum size? It's calculated, we will see how.

function turnOn() {
    if(animationCount === 0) switchBulb.disabled = true;
    let pixelRadius = animationCount * speed;

If we are at the start of animation, we are disabling the switch, to prevent some bugs on turning on and off.

Then we are calculating the radius of the circle in pixels, which will be the animationCount (starting from zero) multiplied by speed, which is a default multiplier specified at the start.

    ctx.fillStyle = dark_color;
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.beginPath();
    ctx.arc(clickPosition.x, clickPosition.y, pixelRadius, 0, 2 * Math.PI, true);
    ctx.fillStyle = light_color;
    ctx.fill();

What are we doing here? We are drawing. Starting with filling with dark background color the canvas.

Then we are drawing the circle, starting from click position, with the pixel radius declared before, we fill it and we confirm the drawing. This is the first step of the animation, then?

    animationCount++;
    if(pixelRadius < (Math.sqrt(Math.pow(ctx.canvas.width,2) + Math.pow(ctx.canvas.height,2))+ 200)){
        setTimeout(turnOn, 1);
    } else {
        animationCount = 0;
        switchBulb.disabled = false;
    }
}

This part is important, we are raising animationCount value by one.

Then we are checking if pixelRadius is at the size we want the animation ends. What is it? That is Pythagorean theorem to calculate the diagonal between screen width and height. Then we add 200px to be sure the circle is out of the screen.

So, if the circle reached the end, the animationCount returns to zero and switch is enabled, otherwise, this function will be relaunched asynchronously in 1 ms.

turnOff()

Ok, this is the last important function.

What do we need for the turnOff function? We need that the light circle, starts from maximum size and goes to zero, to switch off the light.

function turnOff() {
    let pixelRadius = animationCount * speed;
    if(animationCount === 0) {
        switchBulb.disabled = true;
        pixelRadius = (Math.sqrt(Math.pow(ctx.canvas.width,2) + Math.pow(ctx.canvas.height,2))+ 200);
        animationCount = Math.ceil(pixelRadius / speed);
    }

We are declaring the pixelRadius, like before. Obviously it can't works with animationCount to zero, so we check it.

If animationCount is zero, we are disabling the switch and we are calculating the maximum size of the circle like on the function above. After the calculation we divide it by speed to get the starting animationCount value.

    ctx.fillStyle = dark_color;
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.beginPath();
    ctx.arc(clickPosition.x, clickPosition.y, pixelRadius, 0, 2 * Math.PI, true);
    ctx.fillStyle = light_color;
    ctx.fill();

Like on the turnOn function, we are setting the background in dark color, and we are creating the circle with pixelRadius size.

    animationCount--;
    if(animationCount > 0) setTimeout(turnOff, 1);
    else {
        ctx.fillStyle = dark_color;
        ctx.fillRect(0, 0, ctx.canvas.width, canvas.height);
        switchBulb.disabled = false;
    }

So we are lowering animationCount value, then we check, if it is greater than zero, we relaunch the function asynchronously in 1 ms.
If animationCount is zero or less, we are filling the background just to be sure, and then we are enabling the switch checkbox.

Conclusion

I hope this could be useful for you. I know I could put turnOn and turnOff together in some way, but now it's easier to explain.
If you are using it in some project let me know.

You can find the complete code here:
CodePen

You can find me on:
igorzanella.dev
hello@igorzanella.dev
Twitter
Github

Simple 3D CSS Buttons

Igor Zanella — Thu, 17 Sep 2020 18:53:28 +0000

Hi, this is my first article and I will do a CSS tutorial for noobs.

HTML

The HTML is really simple here, we are putting 3 links using tag in the body.



<body>
    <a href="#" class="btn b-1">
        Button 1 (.b-1)
    </a>
    <a href="#" class="btn b-2">
        Button 2 (.b-2)
    </a>
    <a href="#" class="btn b-3">
        Button 3 (.b-3)
    </a>
</body>

We declared 3 buttons with 2 classes: btn for the basic CSS properties and b-x for three different behaviors.

CSS

Basic CSS properties

Ok, let's go to CSS part. I will jump to buttons part, I'm not explaining the body properties, because it's useless now.



.btn {
  color: #e5dc15;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  margin: 1rem;
  padding: 0.5rem;
  border: 2px solid #e5dc15;
  border-radius: 0.5rem;
}

.btn:hover {
  background: #e5dc15;
  color: #0e79b2;
}

We declared some basic properties to give buttons colors and borders.

"3D" property

Ok I like to call it "3D" because it adds a shadow in the third dimension. Let's add this property to .btn class.
box-shadow: 0 0.6em #c2bb11, 0 0.9em rgba(0, 0, 0, 0.4);
What does it do? We are declaring two shadows, the first value is the horizontal offset (which is obviously zero), the second is the vertical offset, then there is the color.
We are setting a shadow using darker yellow to do the "3D" shape, then we are adding the "real" gray shadow to button.

Transitions properties and related

Now we are adding 3 properties to .btn class, these are the base of the transition, the starting point.



  position: relative;
  top: 0;
  transition: all 300ms ease-in-out;

We are setting the position: relative, to set then the top property to zero, the base.
Then we set the transition on all the elements (in this case background, text, position and box-shadow) with a duration of 300ms and the timing function which give a smoother transition.

Button transitions

Ok let's set three different :hover and three :active declarations for the three buttons.

b-1

The first button will lower on hover and get even lower on click.
So we will set top: 0.2em to lower button of 0.2em and then we are lowering also the box shadow for same values.
Then we will set top: 0.4em and box-shadows in the same way as before.



.btn.b-1:hover {
  top: 0.2em;
  box-shadow: 0 0.4em #c2bb11, 0 0.7em rgba(0, 0, 0, 0.4);
}

.btn.b-1:active {
  top: 0.4em;
  box-shadow: 0 0.2em #c2bb11, 0 0.5em rgba(0, 0, 0, 0.4);
}

b-2

In the second button we don't do nothing on hover, but we lower it all on the click.
So we put top: 0.6em to lower the button for the maximum value of initial yellow box shadows, but we leave a little gray shadow to leave the "3d effect".



 .btn.b-2:active {
  top: 0.6em;
  box-shadow: 0 0.2em rgba(0, 0, 0, 0.4);
}

b-3

In the third button we are lifting the button on hover and doing the same thing as first button on click.
So how can we lift the button? You could use bottom properties, but you should also set it to zero for the initial classes.
Here, for simplicity, we are using a negative top value, which it works in the same way.
So we set the negative top value and an higher gray shadow, because element is now higher.



.btn.b-3:hover {
  top: -0.5em;
  box-shadow: 0 0.6em #c2bb11, 0 1.3em rgba(0, 0, 0, 0.4);
}

.btn.b-3:active {
  top: 0.4em;
  box-shadow: 0 0.2em #c2bb11, 0 0.5em rgba(0, 0, 0, 0.4);
}

Conclusion

Ok, we finished this simple CSS tutorial. Maybe the next will be on a Canvas animation i would like to use in my new portfolio website.

Thank you.

Demo & code: CodeSandbox