Forem: Muhammad Ali

Partial Routing in React

Muhammad Ali — Fri, 19 Jul 2024 13:33:16 +0000

React Router allows for partial matching of paths, which can sometimes lead to unexpected behavior if not managed correctly.

What is Partial Matching?
Partial matching means that a route will match any path that starts with the specified path.
Example: a route defined for /about will match both /about and /about/team.

How to Control Partial Matching
To prevent partial matching, use the exact prop:

<Route exact path="/about" component={About} />

On-Scroll Animation

Muhammad Ali — Wed, 05 Jun 2024 21:30:47 +0000

Hey everyone!

I recently worked on a cool feature: on-scroll animations.
These animations make your site more engaging and interactive. I used the Intersection Observer API to achieve this effect, and it was surprisingly easy. Here’s a quick rundown of how I did it.

HTML
First, I set up the HTML structure. I created several sections that would animate into view as the user scrolls. Here’s the code:

<body>
  <section class="hidden">
    <h1>Hello Folks!</h1>
    <p>On scroll code snippet</p>
  </section>
  <section class="hidden">
    <h2>Tech Stack</h2>
    <div class="logos">
      <div class="logo hidden">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYk594AhSKw5Eb3iHkPHs_XmpCqaRVgu0mvg&s" alt="logo">
      </div>
      <div class="logo hidden">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_9-dX6ofdk9qorLSVu4R02VV2StVoC1rboA&s" alt="logo">
      </div>
      <div class="logo hidden">
        <img src="https://logodownload.org/wp-content/uploads/2022/04/javascript-logo-1.png" alt="logo">
      </div>
      <div class="logo hidden">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcThGyyY4OZ3bk3rFDaYtAbHR8htxrLHnjw2nxRL_80Xs7F0KG8-4dgIxP-wtQKFhdyXyvQ&usqp=CAU" alt="logo">
      </div>
    </div>
  </section>
  <section class="hidden">
    <h2>Front End Engineering</h2>
    <p>The things you own end up owning you! It's only after you lose everything that you're free to do anything</p>
  </section>
</body>

CSS
Next, I wrote some CSS to style the sections. The key was to start with the elements hidden and then animate them into view. Here’s what the CSS looks like:

body {
  background-color: #131316;
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  padding: 0;
  margin: 0;
}

section {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 100vh;
}

.hidden {
  opacity: 0;
  filter: blur(5px);
  transform: translateX(-100%);
  transition: all 1s;
}

.show {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}

.logos {
  display: flex;
}

.logo {
  margin-left: 2px;
  margin-right: 2px;
}

.logo img {
  height: 100px;
}

.logo:nth-child(2) {
  transition-delay: 200ms;
}

.logo:nth-child(3) {
  transition-delay: 400ms;
}

.logo:nth-child(4) {
  transition-delay: 600ms;
}

JavaScript for Intersection Observer
The real magic happens with JavaScript. I used the Intersection Observer API to detect when each section comes into view and apply the animation. Here’s the script:

document.addEventListener('DOMContentLoaded', () => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('show');
      } else {
        entry.target.classList.remove('show');
      }
    });
  });

  const hiddenElements = document.querySelectorAll('.hidden');
  hiddenElements.forEach((el) => observer.observe(el));
});

How It Works

HTML

I created sections with the class hidden which will be animated into view.

CSS

The .hidden class hides the elements initially using opacity, blur, and transform properties.
The .show class makes the elements visible by resetting these properties.

JavaScript

An IntersectionObserver checks if elements are in the viewport.
When elements come into view, the show class is added to make them visible.

And that’s it! With this setup, as you scroll down the page, the hidden sections will smoothly animate into view. This little touch can really enhance the user experience on your site. I had a lot of fun implementing it, and I hope you do too.
Happy coding!

Also, Check out this Pen I made!

Background Animation with Pure CSS

Muhammad Ali — Mon, 03 Jun 2024 11:15:40 +0000

If you're looking to add some life to your website, a background animation can do wonders. Today, I'll show you how to create a beautiful, animated bubble background using just HTML and CSS. This simple effect can add a modern and dynamic touch to your site. Let's dive into the code!

HTML Structure

<body>
  <div class='container'>
    <div class='bubbles'>

<span style='--i:11;'></span>
<span style='--i:12;'></span>
<span style='--i:14;'></span>
 <span style='--i:16;'></span>
<span style='--i:13;'></span>
<span style='--i:15;'></span>
<span style='--i:20;'></span>
<span style='--i:24;'></span>
<span style='--i:23;'></span>
<span style='--i:22;'></span>
<span style='--i:20;'></span>
<span style='--i:11;'></span>
<span style='--i:12;'></span>
<span style='--i:14;'></span>
 <span style='--i:16;'></span>
<span style='--i:13;'></span>
<span style='--i:15;'></span>
<span style='--i:20;'></span>
<span style='--i:24;'></span>
<span style='--i:23;'></span>
<span style='--i:22;'></span>
<span style='--i:20;'></span>
<span style='--i:11;'></span>
<span style='--i:12;'></span>
<span style='--i:14;'></span>
 <span style='--i:16;'></span>
<span style='--i:13;'></span>
<span style='--i:15;'></span>
<span style='--i:20;'></span>
<span style='--i:24;'></span>
<span style='--i:23;'></span>
<span style='--i:22;'></span>
<span style='--i:20;'></span>
<span style='--i:11;'></span>
<span style='--i:12;'></span>
<span style='--i:14;'></span>
 <span style='--i:16;'>

  </div>
</div>
</body>

In the HTML, we have a container div that holds another div with the class bubbles. Inside the bubbles div, there are multiple span elements representing each bubble. The --i variable will be used to control the animation speed of each bubble.

CSS Styling

*
{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  min-height:100vh;
  background: #0c192c;

}
.container{
  position:relative;
  width:100%;
    height:100vh;
  overflow:hidden;
}
.bubbles{
  position:relative;
  display:flex;

}
.bubbles span{
  position:relative;
width:30px;
  height:30px;
  background:#4fc3dc;
  margin:0 4px;
  border-radius:50%;
  box-shadow:0 0 0 10px #4fc3dc44,0 0 50px #4fc3dc,
    0 0 100px #4fc3dc;
  animation:animate 15s linear infinite;
animation-duration:calc(60s/var(--i))

}
.bubbles span:nth-child(even){
  background:#ff2d75;
  box-shadow:0 0 0 10px #4fc3dc44,
    0 0 50px #ff2d7544,
    0 0 100px #ff2d75;
}
@keyframes animate{
  0%{
   transform: translateY(100vh) scale(0);
  }
 100%{
   transform: translateY(-10vh) scale(1);
  }
}

Let's break down the CSS:

Global Styles: We start by resetting the margin, padding, and setting box-sizing to border-box for all elements to ensure consistent styling.
Body and Container: The body has a dark blue background (#0c192c) and a minimum height of 100vh to cover the entire viewport. The .container takes up the full viewport height and width and hides any overflow content.
Bubbles: The .bubbles div is set to display: flex to arrange the bubble spans horizontally. Each span (bubble) is styled with a specific size, color, and box-shadow to give it a glowing effect. The animation property animates each bubble with a duration dependent on the --i variable.
Even Bubbles: Bubbles at even positions are given a different color (#ff2d75) and matching shadows for a more dynamic effect.
Keyframes: The @keyframes rule defines the animation. Bubbles start at the bottom (translateY(100vh)) and scale from 0 to their full size, moving upward out of the viewport (translateY(-10vh)).

With just a few lines of HTML and CSS, you've created an eye-catching bubble animation for your website's background. This effect can be easily customized by adjusting the bubble colors, sizes, and animation speeds. Feel free to experiment and make it your own!

Adding such dynamic visuals can greatly enhance the user experience and make your site stand out.
Happy coding!

Interactive Loading Animation with CSS

Muhammad Ali — Mon, 27 May 2024 15:57:04 +0000

This project demonstrates how to create an engaging loading animation using pure CSS.
The animation features a rotating background color and a loader composed of** 20 spinning dots **that pulsate sequentially. The background hue shifts continuously, creating a dynamic visual effect. Each dot is positioned using CSS variables and animated with keyframes to scale up and down in a rhythmic pattern.

Key Features:

Rotating Background: Smooth color transitions using hue-rotate.
Pulsating Dots: Sequential animation delays for a wave effect.
Pure CSS: No JavaScript required, ensuring lightweight performance.

Usage

Embed the HTML in your webpage.
Add the CSS to your stylesheet.
Adjust the number of spans and their styles as needed for different visual effects. This loader is perfect for adding a modern, visually appealing touch to your web projects.

HTML

<section>
  <div class="loader">
    <span style="--i:1;"></span>
    <span style="--i:2;"></span>
    <span style="--i:3;"></span>
    <span style="--i:4;"></span>
    <span style="--i:5;"></span>
    <span style="--i:6;"></span>
    <span style="--i:7;"></span>
    <span style="--i:8;"></span>
    <span style="--i:9;"></span>
    <span style="--i:10;"></span>
    <span style="--i:11;"></span>
    <span style="--i:12;"></span>
    <span style="--i:13;"></span>
    <span style="--i:14;"></span>
    <span style="--i:15;"></span>
    <span style="--i:16;"></span>
    <span style="--i:17;"></span>
    <span style="--i:18;"></span>
    <span style="--i:19;"></span>
    <span style="--i:20;"></span>
  </div>
</section>

CSS

body, html {
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
width:100%;
  background: #042104;
  animation: animateBg 10s linear infinite;
}

@keyframes animateBg {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

section .loader {
  position: relative;
  width: 120px;
  height: 120px;
}
section .loader:hover {
  position: relative;
  width: 140px;
  height: 140px;
}
section .loader span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(calc(18deg * var(--i)));
}

section .loader span::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 15px;
  height: 15px;
  background: #00ff0a;
  border-radius: 50%;
  box-shadow: 0 0 10px #00ff0a, 
              0 0 20px #00ff0a, 
              0 0 40px #00ff0a, 
              0 0 60px #00ff0a, 
              0 0 80px #00ff0a, 
              0 0 100px #00ff0a;
  animation: animate 2s linear infinite;
  animation-delay: calc(0.1s * var(--i));
}

@keyframes animate {
  0% {
    transform: scale(1);
  }
  80%, 100% {
    transform: scale(0);
  }
}