Launch Countdown done with NextJS (TS) and animation with pure css

Community feedback

• 

  P

  Kim Fransson•300

  @kim-franssonPosted about 1 month ago

  Hi! Nice work, really like the overall structure and look and feel. Here is some quick feedback.

  Tips

  Insted of creating two divs for the background images, you could stack images using the background property.

  html {
      background: url("./assets/images/pattern-hills.svg") bottom / contain
          no-repeat,
        url("./assets/images/bg-stars.svg") repeat, var(--very-dark-blue);
    }
  

  First background layer:

  url("./assets/images/pattern-hills.svg") → Sets an image as the background.

  bottom / contain → Positions the image at the bottom and scales it to fit while maintaining its aspect ratio.

  no-repeat → Ensures the image appears only once.

  Second background layer:

  url("./assets/images/bg-stars.svg") repeat → Uses another image that repeats across the entire background.

  Third background layer: var(--very-dark-blue) → Sets a solid color (--very-dark-blue) as the base layer.

  Since CSS backgrounds stack, the solid color appears underneath, the stars repeat over it, and the hill pattern is placed on top at the bottom of the viewport.

  Animation

  This one may be a bit trickier and would probably break the current css. But you need to play around with perspective, transform-style: preserve-3d; and backface-visibility: hidden;.

  Here are an example of 3D like rotation. 100days CSS and the codepen. You may also need to play around with perspective-origin.

  Fun personal touches

  • Try to add sound effects for the countdown, and maybe even some background music? When adding sound you will probably need to add a on/off toggle (a lot of browsers suppress sound before interacting with the site).

  • Try and animate the background stars, maybe add a small rotation, making it look like the "earth is rotating".

  All the best, // Kim

  Marked as helpful

  1

  ---

  

  Anto Joy Nellissery•80

  @antojoy23Posted about 1 month ago

  @kim-fransson Thanks! Good to know about the background trick. Yes I haven't done much animations previously but that's something I want to get good at :) Thanks for the links, I'll check those out :D

  Cheers

  1