Forem: Ahtsham Ajus

Today I learned about constant variables

Ahtsham Ajus — Fri, 14 Jun 2024 04:40:34 +0000

<?php
$a = 100
$b = 550

echo "$a + $b";
?>

Today I learned about Variables in PHP

Ahtsham Ajus — Tue, 11 Jun 2024 11:56:00 +0000

The main way to store information in the middle of a PHP program is by using a variable.

Here are the most important things to know about variables in PHP.
All variables in PHP are denoted with a leading dollar sign ($).
The value of a variable is the value of its most recent assignment.
Variables are assigned with the = operator, with the variable on the left-hand side and
the expression to be evaluated on the right.
Variables can, but do not need, to be declared before assignment.
Variables in PHP do not have intrinsic types - a variable does not know in advance
whether it will be used to store a number or a string of characters.
Variables used before they are assigned have default values.
PHP does a good job of automatically converting types from one to another when
necessary.
PHP variables are Perl-lik
PHP has a total of eight data types which we use to construct our variables:
Integers: are whole numbers, without a decimal point, like 4195.
Doubles: are floating-point numbers, like 3.14159 or 49.1.
Booleans: have only two possible values either true or false.
NULL: is a special type that only has one value: NULL.
Strings: are sequences of characters, like 'PHP supports string operations.'
Arrays: are named and indexed collections of other values.
Objects: are instances of programmer-defined classes, which can package up both other kinds of values and functions that are specific to the class.
Resources: are special variables that hold references to resources external to PHP
(such as database connections).
The first five are simple types, and the next two (arrays and objects) are compound - the
compound types can package up other arbitrary values of arbitrary type, whereas simple
types cannot.

Here's My PHP code

<?php
$x = 4;
function assignx () {$x = 0;
print "\$x inside function is $x.
";
}
assignx();
print "\$x outside of function is $x.
";
?>

This will produce the following result.

<?php
$x inside function is 0.
$x outside of a function is 4.
?>

[Deepgram x DEV Hackathon Submission Post Placeholder Title]

Ahtsham Ajus — Tue, 22 Mar 2022 13:01:52 +0000

—

Overview of My Submission

Submission Category:

Link to Code on GitHub

Additional Resources / Info

—

My Deepgram Use-Case

Dive into Details

Conclusion

—

[Azure Trial Hackathon Submission Post Placeholder Title]

Ahtsham Ajus — Tue, 01 Mar 2022 07:57:57 +0000

Overview of My Submission

Submission Category:

Link to Code on GitHub

Additional Resources / Info

[Note:] # Screenshots/demo videos are encouraged!

Today I learned to Create a Animation Navigation

Ahtsham Ajus — Tue, 29 Jun 2021 12:40:23 +0000

Today I have learned to make animated navigation in "50 projects in 50 Days" of Udemy using HTML CSS and JavaScript.

This is a great way to handle a responsive menu. With just a little JavaScript, you’ll get a menu that stacks items into a dropdown when they overflow.

Here's My Html code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Animated Navigation</title>
</head>
<body>
    <nav class="active" id="nav">
        <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Works</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    <button class="icon" id="toggle">
        <div class="line line1"></div>
        <div class="line line2"></div>
    </button>
    </nav>
    <script src="./script.js"></script>
</body>
</html>

Here's my CSS code

@import url('https://fonts.googleapis.com/css?family=Ubuntu');


*{
    box-sizing: border-box;
}

body {
    background-color: #d8fcc9;
    background-image: linear-gradient(to bottom, #f1d558 0%, #d8fcc9 50%, #f734dd 50%, #0287af 100% );
    font-family:'Ubuntu', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}

nav {
    background-color: #fff;
    padding: 20px;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    box-shadow:0 2px 5px rgba(0, 0, 0, 0.3);
    transition: width 0.6s linear;
}

nav.active {
    width: 350px;
}

nav ul {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 0;
    transition: width 0.6s linear;
}

nav.active ul {
    width: 100%;
}

nav ul li {
    transform: rotate(0deg);
    opacity: 0;
    transition: transform 0.6s linear, opacity 0.6s linear;
}

nav.active ul li {
    opacity: 1;
    transform: rotateY(360deg);
}

nav ul a {
    position: relative;
    color: #000;
    text-decoration: none;
    margin: 0 10px;
}

.icon {
    background-color: #fff;
    border: 0;
    cursor: pointer;
    padding: 0;
    position: relative;
    height: 30px;
    width: 30px;
}

.icon:focus {
    outline: 0;
}

.icon .line {
    background-color: #5290f9;
    height: 2px;
    width: 20px;
    position: absolute;
    top: 10px;
    left: 5px;
    transition: transform 0.6s linear;
}

.icon .line2 {
    top: auto;
    bottom: 10px;
}

nav.active .icon .line1 {
    transform: rotate(-765deg) translateY(5.5px);
}

nav.active .icon .line2 {
    transform: rotate(765deg) translateY(-5.5px);
}

Here's My JAVASCRIPT code

const toggle = document.getElementById('toggle')
const nav= document.getElementById('nav')

toggle.addEventListener('click', () => nav.classList.toggle('active'))

Here's Ouput

Today I learned To Creat a FAQ Collapse

Ahtsham Ajus — Sat, 26 Jun 2021 13:47:29 +0000

All right, so now we want to style these buttons, these icon buttons, position them.

We want to give functionality to them so we can expand and contract these fake cues.

So we have a class of fake cue dash toggle on the button.

And obviously, we don't want to show the Chevron if it's expanded and we don't want to show the X if

it's if it's not expanded.

So we're going to have to deal with that.

But let's just do some basic stuff here first.

Like the background color I'm going to set to transparent and take away the border set.

Here's HTML code

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="./style.css">
  <title>FAQ Collapse</title>
</head>

<body>
  <h1>Frequently Asked Questions</h1>
  <div class="faq-container">
    <div class="faq active">
      <h3 class="faq-title">
        Why shouldn't we trust atoms?
      </h3>

      <p class="faq-text">
        They make up everything
      </p>

      <button class="faq-toggle">
        <i class="fas fa-chevron-down"></i>
        <i class="fas fa-times"></i>
      </button>
    </div>

    <div class="faq">
      <h3 class="faq-title">
        What do you call someone with no body and no nose?
      </h3>
      <p class="faq-text">
        Nobody knows.
      </p>
      <button class="faq-toggle">
        <i class="fas fa-chevron-down"></i>
        <i class="fas fa-times"></i>
      </button>
    </div>

    <div class="faq">
      <h3 class="faq-title">
        What's the object-oriented way to become wealthy?
      </h3>
      <p class="faq-text">
        Inheritance.
      </p>
      <button class="faq-toggle">
        <i class="fas fa-chevron-down"></i>
        <i class="fas fa-times"></i>
      </button>
    </div>

    <div class="faq">
      <h3 class="faq-title">
        How many tickles does it take to tickle an octopus?
      </h3>
      <p class="faq-text">
        Ten-tickles!
      </p>
      <button class="faq-toggle">
        <i class="fas fa-chevron-down"></i>
        <i class="fas fa-times"></i>
      </button>
    </div>

    <div class="faq">
      <h3 class="faq-title">
        What is: 1 + 1?
      </h3>
      <p class="faq-text">
        Depends on who are you asking.
      </p>
      <button class="faq-toggle">
        <i class="fas fa-chevron-down"></i>
        <i class="fas fa-times"></i>
      </button>
    </div>
  </div>
  <script src="./script.js"></script>
</body>

</html>

Here's My Css code

@import url("https://fonts.googleapis.com/css?family=Ubuntu&display=swap");

* {
  box-sizing: border-box;
}

body {
  font-family: "Ubuntu", sans-serif;
  background-color: #f0f0f0;
}

h1 {
  margin: 50px 0 30px;
  text-align: center;
}

.faq-container {
  max-width: 600px;
  margin: 0 auto;
}

.faq {
  background-color: transparent;
  border: 1px solid #9fa4a8;
  border-radius: 10px;
  margin: 20px 0;
  padding: 30px;
  position: relative;
  overflow: hidden;
  transition: 0.3s ease;
}

.faq.active {
  background-color: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1);
}

.faq.active::before,
.faq.active::after {
  content: "\f075";
  font-family: "Font Awesome 5 Free";
  color: #2ecc71;
  font-size: 7rem;
  position: absolute;
  opacity: 0.2;
  top: 20px;
  left: 20px;
  z-index: 0;
}

.faq.active::before {
  color: #3498db;
  top: -10px;
  left: -30px;
  transform: rotateY(180deg);
}

.faq-title {
  margin: 0 35px 0 0;
}

.faq-text {
  display: none;
  margin: 30px 0 0;
}

.faq.active .faq-text {
  display: block;
}

.faq-toggle {
  background-color: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  padding: 0;
  position: absolute;
  top: 30px;
  right: 30px;
  height: 30px;
  width: 30px;
}

.faq-toggle:focus {
  outline: 0;
}

.faq-toggle .fa-times {
  display: none;
}

.faq.active .faq-toggle .fa-times {
  color: #fff;
  display: block;
}

.faq.active .faq-toggle .fa-chevron-down {
  display: none;
}

.faq.active .faq-toggle {
  background-color: #9fa4a8;
}

Here's My JavaScript code

const toggles = document.querySelectorAll(".faq-toggle");

toggles.forEach((toggle) => {
  toggle.addEventListener("click", () => {
    toggle.parentNode.classList.toggle("active");
  });
});

Here's ouput

Today I Learned to creat a Event Key Codes

Ahtsham Ajus — Fri, 25 Jun 2021 12:47:35 +0000

We now know how to handle different types of input from the mouse, but let's not forget about the keyboard. We can handle input from the keyboard similiarly to how we handled input from the mouse. We use special event methods that take a callback function!

For example, the code returned is "KeyQ" for the Q key on a QWERTY layout keyboard, but the same code value also represents the ' key on Dvorak keyboards and the A key on AZERTY keyboards. That makes it impossible to use the value of code to determine what the name of the key is to users if they're not using an anticipated keyboard layout.

Here's HTML code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Event KeyCodes</title>
</head>
<body>
  <div id="insert">
        <div class="key">
            Press any key to get the keyCode
        </div>
  </div>   

    <script src="./script.js"></script>
</body>
</html>

Here's My CSS code



@import url('https://fonts.googleapis.com/css?family=Ubuntu&display=swap');


*{
    box-sizing: border-box;
}

body {
    background-color: #e1e1e1;
    font-family:'Ubuntu', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    height: 100vh;
    margin: 0;
}

.key {
    border: 1px solid #999;
    background-color: #eee;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    display: inline-flex;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    padding: 20px;
    flex-direction: column;
    margin: 10px;
    min-width: 150px;
    position: relative;
}

.key small {
    position: absolute;
    top: -24px;
    left: 0;
    text-align: center;
    width: 100%;
    color: #555;
    font-size: 14px;
}

Here's My JavaScript code

const insert = document.getElementById('insert')

window.addEventListener('keydown', (event) => {
   insert.innerHTML = `
   <div class="key">
   ${event.key === ' ' ? 'Space' : event.key}
   <small>event.key</small>
</div>

<div class="key">
   ${event.keyCode}
   <small>event.keyCode</small>
</div>

<div class="key">
   ${event.code}
   <small>event. code</small>
 </div>`
})

Here's a ouput

Design a BMI Calculator using JavaScript

Ahtsham Ajus — Wed, 23 Jun 2021 05:45:51 +0000

The Body Mass Index (BMI) Calculator can be used to calculate BMI values based on their height and weight. BMI is a fairly reliable indicator of body fatness for most people.

Formula:

BMI = (weight) / (height * height)

Here's JavaScript code

 function BMI(weight, height) {
     return(weight / (height * height));
 }

 let bmiResult = BMI(57, 1.73736);
 console.log(bmiResult);

Today I have learned to Creat a Sound Board

Ahtsham Ajus — Wed, 23 Jun 2021 05:21:52 +0000

In this tutorial, I have learned how to make a sound board today. I have used Html, CSS , and JavaScript.i used javascript to create the Sound Board effect.when buttons is clicked. It is very amazing. So check this code.

Click on this link to pick up these songs
https://github.com/ahtshamhassan1/sound-board

Here's My HTML code

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sound Board</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <audio id="applause" src="./sounds/applause.mp3"></audio>
  <audio id="boo" src="./sounds/boo.mp3"></audio>
  <audio id="gasp" src="./sounds/gasp.mp3"></audio>
  <audio id="tada" src="./sounds/tada.mp3"></audio>
  <audio id="victory" src="./sounds/victory.mp3"></audio>
  <audio id="wrong" src="./sounds/wrong.mp3"></audio>
  <div id="buttons"></div>

  <script src="./script.js"></script>
</body>

</html>

Here's My CSS Code

@import url("https://fonts.googleapis.com/css?family=Ubuntu&display=swap");

* {
  box-sizing: border-box;
}

body {
  background-color: rgb(205, 223, 100);
  font-family: "Ubuntu", sans-serif;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}
.btn {
  background-color: rgb(230, 24, 151);
  border-radius: 5px;
  border: none;
  color: #fff;
  margin: 1rem;
  padding: 1.5rem 3rem;
  font-size: 1.2rem;
  font-family: inherit;
  cursor: pointer;
}

.btn:hover {
  opacity: 0.9;
}

.btn:focus {
  outline: none;
}

Here's My JavaScript code



const sounds = ["applause", "boo", "gasp", "tada", "victory", "wrong"];

sounds.forEach((sound) => {
  const btn = document.createElement("button");
  btn.classList.add("btn");

  btn.innerText = sound;

  btn.addEventListener("click", () => {
    stopSongs();

    document.getElementById(sound).play();
  });
  document.getElementById("buttons").appendChild(btn);
});

function stopSongs() {
  sounds.forEach((sound) => {
    const song = document.getElementById(sound);

    song.pause();
    song.currentTime = 0;
  });
}

Here's output on Code pen lets see..

Today I have learned to wave the form Input

Ahtsham Ajus — Mon, 21 Jun 2021 11:37:07 +0000

This tutorial will mainly focus on how to use transitions in CSS to create a form input label wave.i used javascript to create the wave effect input label.when input is focused. Let's dive into the world of transition!

Today I have learned to wave the form input, in this I have done HTML CSS and JavaScript, also with the help of CSS, I have given the transition of the label in the input.

Here's My HTML code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Form Input Wave</title>
</head>
<body>
   <div class="container">
       <h1>PLease Login</h1>
       <form>
           <div class="form-control">
            <input type="text" required>
            <label>Email</label>
           </div>

           <div class="form-control">
            <input type="password" required>
            <label>Password</label>
           </div>

           <button class="btn">Login</button>

           <p class="text">Don't have an account?</p>
           <a href="#">Register</a>
       </form>
   </div>

    <script src="./script.js"></script>
</body>
</html>

Here's My CSS code

@import url("https://fonts.googleapis.com/css?family=Ubuntu");

* {
  box-sizing: border-box;
}

body {
  background-color: steelblue;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Ubuntu", sans-serif;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.container {
  background-color: rgba(0, 0, 0, 0.4);
  padding: 20px 40px;
  border-radius: 5px;
}
.container h1 {
  text-align: center;
  margin-bottom: 30px;
}

.container a {
  text-decoration: none;
  color: lightblue;
}

.btn {
  cursor: pointer;
  display: inline-block;
  width: 100%;
  background: lightblue;
  padding: 15px;
  font-family: inherit;
  font-size: 16px;
  border: 0;
  border-radius: 5px;
}

.btn:focus {
  outline: 0;
}

.form-control {
  position: relative;
  margin: 20px 0 40px;
  width: 300px;
}

.btn:hover {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.4);
}

.btn:active {
  transform: scale(0.98);
}

.text {
  margin-top: 30px;
}

.form-control input {
  background-color: transparent;
  border: 0;
  border-bottom: 2px #fff solid;
  display: block;
  width: 100%;
  padding: 15px 0;
  font-size: 18px;
  color: #fff;
}

.form-control input:focus,
.form-control input:valid {
  outline: 0;
  border-bottom-color: lightblue;
}

.form-control label {
  position: absolute;
  top: 15px;
  left: 0;
}

.form-control label span {
  display: inline-block;
  font-size: 18px;
  min-width: 5px;
  transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.form-control input:focus + label span,
.form-control input:valid + label span {
  color: lightblue;
  transform: translateY(-30px);
}

Here's My JAVASCRIPT code

const labels = document.querySelectorAll(".form-control label");

labels.forEach((label) => {
  label.innerHTML = label.innerText
    .split("")
    .map(
      (letter, idx) =>
        `<span style="transition-delay:${idx * 50}ms">${letter}</span>`
    )
    .join("");
});

Here's output on Code pen lets see..

Today I learred About Split Landing Page

Ahtsham Ajus — Fri, 18 Jun 2021 13:15:47 +0000

This tutorial will mainly focus on how to use transitions in CSS and make a split landing page for light as well as land mode using little JavaScript. Let's dive into the world of transitions!

Today I learned the split landing page and it changes the image. It has html css and javascript.This Is So Amzaing page.
In this Project I am making the width of the container increas and dicreas with the help of a css.

Here's My HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Split Landing Page</title>
</head>
<body>
    <div class="container">
        <div class="split left">
            <h1>Playstation 5</h1>
            <a href="http:#" class="btn">Buy Now</a>
        </div>
        <div class="split right">
            <h1>Xbox Series X</h1>
            <a href="http:#" class="btn">Buy Now</a>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Here's My CSS Code


@import url('https://fonts.googleapis.com/css?family=Ubuntu');

:root {
    --left-bg-color: rgba(87, 84, 236, 0.7);
    --right-bg-color: rgba(43, 43, 43, 0.8);
    --left-btn-hover-color: rgba(87, 84, 236, 1);
    --right-btn-hover-color: rgba(28, 122, 28, 1);
    --hover-width:75%;
    --other-width:25%;
    --speed:1000ms;

}

*{
    box-sizing: border-box;
}

body {
    font-family:'Ubuntu', sans-serif;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

h1 {
    font-size:  4rem;
    color: #fff;
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 50%;
    top: 40%;
    transform: translateX(-50%);
    text-decoration: none;
    color: #fff;
    border: #fff solid 0.2rem;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    width: 15rem;
    padding: 1.5rem;
}

.split.left .btn:hover {
    background-color: var(--left-btn-hover-color);
    border-color: var(--left-btn-hover-color);
}
.split.right .btn:hover {
    background-color: var(--right-btn-hover-color);
    border-color: var(--right-btn-hover-color);
}

.container {
    position: relative;
    width: 100%;
    height: 100%;
    background: #333;
}

.split {
    position: absolute;
    width: 50%;
    height: 100%;
    overflow: hidden;
}
.split.left {
    left: 0;
    background: url(./ps.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.split.left::before {
    content:'';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--left-bg-color);
}

.split.right {
    right: 0;
    background: url(./xbox.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.split.right::before {
    content:'';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--right-bg-color);
}

.split.right, .split.left, .split.right::before, .split.left::before{
    transition: all var(--speed) ease-in-out;
}

.hover-left .left {
    width:var(--hover-width) ;
}
.hover-left .right {
    width:var(--other-width) ;
}
.hover-right .right {
    width:var(--hover-width) ;
}
.hover-right .left {
    width:var(--other-width) ;
}

@media(max-width: 800px) {
    h1 {
        font-size: 2rem;
        top: 30%;
    }
    .btn {
        padding: 1.2rem;
        width: 12rem;

    }
}

Here's My JAVASCRIPT code

const left = document.querySelector('.left')
const right = document.querySelector('.right')
const container = document.querySelector('.container')

left.addEventListener('mouseenter', () => container.classList.add('hover-left'))
left.addEventListener('mouseleave', () => container.classList.remove('hover-left'))

right.addEventListener('mouseenter', () => container.classList.add('hover-right'))
right.addEventListener('mouseleave', () => container.classList.remove('hover-right'))

Here's Output On Codepen

Today I learned about Scroll Animation

Ahtsham Ajus — Wed, 16 Jun 2021 08:28:59 +0000

Here's my HTML code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="./style.css">
    <title>Scroll Animation</title>
</head>
<body>
    <h1>Scroll to see the animation</h1>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>

    <script src="script.js"></script>
</body>
</html>

Here's My Css Code

@import url('https://fonts.googleapis.com/css?family=Ubuntu');


*{
    box-sizing: border-box;
}

body {
    background-color: #efedd6;
    font-family:'Ubuntu', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    overflow-x: hidden;
}
h1 {
    margin: 10px;
}

.box {
    background-color: steelblue;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 400px;
    height: 200px;
    margin: 10px;
    border-radius: 10px;
    box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);
    transform: translateX(200%);
    transition: transform 0.4s ease;
}

.box:nth-of-type(even) {
    transform: translateX(-200%);  
}
.box.show {
    transform: translateX(0);
}

.box h2 {
    font-size: 45px;
}

Here's JavaScript

const boxes = document.querySelectorAll('.box')

window.addEventListener('scroll', checkBoxes)

checkBoxes()

function checkBoxes() {
   const triggerBottom = window.innerHeight / 5 * 4 

   boxes.forEach(box => { 
       const boxTop = box.getBoundingClientRect().top

       if(boxTop < triggerBottom) {
           box.classList.add('show')
       } else {
           box.classList.remove('show')
       }
   })
}

And Check this Post

Here's the output