Creating a Bouncing Logo with JavaScript ⛹🏽‍♀️

Max Mykhalchuk — Fri, 07 Aug 2020 07:05:53 +0000

So, recently I've seen a YouTube video about DVD bouncing logo and thought, why not create one using JavaScript and write a small tutorial about it? 🤔

And here's the result:

Recipe

First of all, let's deal with our HTML. We're not gonna go with a <canvas> today (sorry) but we have an awesome CodePen logo, so why not using it?

<svg xmlns="http://www.w3.org/2000/svg" id="label" viewBox="0 0 138 26" fill="none" stroke="#26de81" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round">
  <path d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"/>
</svg>

And that's it for HTML! This SVG image is the only thing we're going to operate with.

CSS

Now we spice it up a little bit by using CSS:

body {
  width: 100vw;
  height: 100vh;
  background-color: #0f0f13;
  overflow: hidden;
  position: relative;
}

#label {
  position: absolute;
  left: calc(50vw - 150px);
  top: calc(50vh - 28px);
  width: 300px;
  height: 56px;
}

So now, that we have finally completed the warmup, we're ready for the hardest part!

JavaScript

Let's start by defining variables:

const body = document.querySelector('body')
const label = document.querySelector('#label')

let colors = [ '#26de81', '#fc5c65', '#fd9644', '#fed330', '#2bcbba', '#45aaf2', '#4b7bec', '#a55eea', '#ffc1f3', '#76ead7', '#ff9c71', '#32e0c4', '#d291bc', '#fa744f' ]

let FPS = 60

let width
  , height
  , velocityX = 1
  , velocityY = 1
  , pause = true
  , previousColor = 0
;

Velocity is needed for the bounce movement:

The absolute number defines the speed (minimum is 1)
The sign defines the direction
- For X-axis - positive number moves the logo right, negative - left
- For Y-axis - positive number moves the logo down, negative - up

For storing our window size we use width and height.

Now we need a function that will keep our width & height variables up to date and pause the animation if the window is smaller than an image.

const reset = () => {
  width =
    window.innerWidth ||
    document.documentElement.clientWidth ||
    document.body.clientWidth;

  height =
    window.innerHeight ||
    document.documentElement.clientHeight ||
    document.body.clientHeight;

  pause =
    width <= label.getBoundingClientRect().width ||
    height <= label.getBoundingClientRect().height;

  label.style.left = 'calc(50vw - 150px)'
  label.style.top = 'calc(50vh - 28px)'
  label.style.stroke = colors[0]
}

reset()

It needs to be fired on initialization and each time window size changes, so let's create an event listener:

window.addEventListener('resize', reset, true)

Have you seen how the CodePen logo is changing colors? There is a separate function for doing that.

const getRandomColor = () => {
  let currentColor = -1

  do {
    currentColor = Math.floor(Math.random() * colors.length);
  } while (previousColor == currentColor);

  previousColor = currentColor

  return colors[currentColor]
}

Ok, it's time for the main function that will make our image bounce. For that purpose let's create an interval function:

setInterval(() => {
  if (pause) return;

  let rect = label.getBoundingClientRect()

  let left = rect.x
  let top = rect.y

  if (left + rect.width >= width || left <= 0) {
    velocityX = -velocityX
    let randomColor = getRandomColor()
    label.style.stroke = randomColor

    if (left + 150 <= width / 2) {
      body.style.boxShadow = `inset 4px 0px 0px 0px ${randomColor}`
    } else {
      body.style.boxShadow = `inset -4px 0px 0px 0px ${randomColor}`
    }
  }

  if (top + rect.height >= height || top <= 0) {
    velocityY = -velocityY
    let randomColor = getRandomColor()
    label.style.stroke = randomColor

    if (top + 28 <= height / 2) {
      body.style.boxShadow = `inset 0px 4px 0px 0px ${randomColor}`
    } else {
      body.style.boxShadow = `inset 0px -4px 0px 0px ${randomColor}`
    }
  }

  label.style.left = rect.x + velocityX + 'px'
  label.style.top = rect.y + velocityY + 'px'
}, 1000 / FPS)

Ta-da 🎉! We have just created Bouncing Logo Screensaver!

But, let's take a closer look at the collision detection.

if (left + rect.width >= width || left <= 0) {

The condition above gives true if:

the position of the right side of the logo (left + rect.width) is greater or equal than the position of the right side of the window (width) on the X-axis
the position of the left side of the logo (left) is less or equal than the position of the left side of the window (0) on the X-axis

So, if the condition fires true, the following things happen:

The direction of the movement is being inverted: velocityX = -velocityX
Color Randomizer chooses a random color, saves it to the variable and updates image color
If-statement determines which side of the window is closer to the central coordinate of the logo and, depending on this, creates an inset box-shadow for one of the sides

Vertical collisions are being processed the same way.

So, I hope you enjoyed this article. Feel free to check me on:

📷 I created an infinite photo grid using only HTML & CSS

Max Mykhalchuk — Tue, 16 Jun 2020 18:32:34 +0000

Recently, I decided to create an infinite photo grid.

There were 2 options to go with: creating an actual CSS grid with img tags all around or using a "collage" with photos (which is easier but doesn't really change the implementation).

I can't remember which option I decided to choose though...

So, anyway, here's the result:

Implementation

The implementation is pretty much simple.

We have a single HTML element:



<main class="infinite-photo-grid"></main>

And a bit of CSS:



.infinite-photo-grid {
  width: 100%;
  height: 100%;
  max-height: 750px;
  background-image: url(https://raw.githubusercontent.com/s1mpson/-/master/codepen/infinite-photo-grid/photo-grid.jpg);
  background-size: calc(4.84 * min(100vh, 750px)) min(100vh, 750px);
  background-repeat: repeat-x;
  animation: scroll 50s linear infinite;
}

@keyframes scroll {
  from {
    background-position: left calc(4.84 * min(100vh, 750px)) top 0px;
  }
  to {
    background-position: left 0px top 0px;
  }
}

So, the basic idea - is having a repeated background image on the X-axis that is being scrolled by our @keyframe function. In order not to trim the top and bottom sides of the picture, we need to know image resolution so we could calculate the ratio (in our case it's 3630×750px = 4.84 ratio).

Then, we lock our background-size to window/image height and calculate the unknown parameter (width) by using a pre-calculated ratio.

For the scroll animation, we change the background-position property from the image width to 0px, so it would create a motion effect.

I hope you enjoyed this article. Feel free to check me on: