The animation in the HTML, CSS, and JavaScript code is not functioning properly

Question

The animation in the HTML, CSS, and JavaScript code is not functioning properly

Recently, I came across an interesting YouTube video. Here is the link:

https://www.youtube.com/watch?v=2ak37WrbSDg

The video featured a captivating animation at the beginning, utilizing span text. Intrigued, I attempted to modify it by incorporating images instead. However, my efforts were unsuccessful when I tried to use images in place of text. Below is the HTML code snippet that I was working on:

<!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">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
</head>
<body>
    <div class="intro">
        <div class="image-slider">
            <div class="left leftright" >
                <div class="leftmain" style="background-image: url(images/left.jpg);"></div>
            </div>
            <div class="right leftright">
                <div class="main" style="background-image: url(images/right-bike.jpg);"></div>
            </div>
        </div>

        
    </div>

    <header>
        <h4>hello world</h4>
    </header>
    

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

This is the CSS code associated with the HTML structure outlined above:

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

header 
{
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

header h4 
{
    position: absolute;
    left: 10%;
    bottom: 1rem;

}

.intro
{
    position: fixed;
    z-index: 1;
    left: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    transition: 1s;

}

[right - sections for styling and animations omitted for brevity]

Furthermore, there is a JavaScript script included to handle interactions and animations within the webpage:

// JavaScript function to control animations on page load

let intro = document.querySelector('.intro');
let image = document.querySelectorAll('.leftright')

window.addEventListener('DOMContentLoaded', ()=>
{
    [JavaScript functionality and timing functions continued...]
})

In conclusion, despite designing the webpage to have a dynamic introduction where split images slide in from both sides and rise together, the live server displays a blank screen. Seeking assistance to troubleshoot this issue. Any help would be greatly appreciated.

javascript html css

Answer 1

Answer №1

It appears that the browser is handling all UI changes simultaneously. The transition effect involves the left and right div elements with background images moving in, followed by the .intro element shifting to a -100vh position. These changes are executed together by the browser, resulting in a complete refresh/repaint of the client area within the browser window.

To achieve the desired outcome, here's a combination of JavaScript/CSS/HTML code: the images converge from both sides before the entire intro element ascends out of view.

const intro = document.querySelector('.intro');
const leftRightContainers = document.querySelectorAll('.leftright');
const leftContainer = document.querySelector('.leftright.left');

window.addEventListener('DOMContentLoaded', () => {
  // 'transitionend' event handler function
  const transitionendHandler = () => {
    intro.classList.add("move-up");
    leftContainer.removeEventListener("transitionend", transitionendHandler);
  };
  // Add 'transitionend' event handler
  leftContainer.addEventListener("transitionend", transitionendHandler);
  // Trigger transition
  setTimeout(() => {
    leftRightContainers.forEach((elem, index) => {
      elem.classList.add('active', 'fade');
    });
  }, 100);
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

header {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

header h4 {
  position: absolute;
  left: 10%;
  bottom: 1rem;
}

.intro {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  transition: top ease-in-out 1s;
  transition-delay: 0.5s;
}

.intro.move-up {
  top: -100%;
}

.leftright {
  height: 100%;
  width: 50%;
  position: absolute;
  top: 0;
  opacity: 0;
}

.leftright.left {
  left: -100%;
}

.leftright.right {
  left: 100%;
}

.leftright.active {
  right: 0;
  opacity: 1;
  transition: ease-in-out 0.5s;
}

.leftright.left.active {
  left: 0;
}

.leftright.right.active {
  transform: translateX(-100%);
}

.leftright .img-container {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 100%;
  width: 100%;
}

.image-slider.fade {
  bottom: 150px;
  opacity: 0;
  transition: ease-in-out 0.5s;
}

<div class="intro">
  <div class="image-slider">
    <div class="leftright left">
      <div class="img-container" style="background-image: url(https://mdn.github.io/learning-area/javascript/building-blocks/gallery/images/pic3.jpg);"></div>
    </div>
    <div class="leftright right">
      <div class="img-container" style="background-image: url(https://mdn.github.io/learning-area/javascript/building-blocks/gallery/images/pic2.jpg);"></div>
    </div>
  </div>
</div>


<h4>hello world</h4>

Note: Initially, there might be a slight delay when running the code snippet due to the browser downloading images into the background of the .image-container elements. Subsequent runs will perform as expected since the images are cached. To address this issue, consider initiating the left-right-move-up intro animation after the images have fully loaded into the image container elements by setting up an 'onLoad' event listener for each image container before starting the intro animation.

Answer 2

It appears that the browser is handling all UI changes simultaneously. The transition effect involves the left and right div elements with background images moving in, followed by the .intro element shifting to a -100vh position. These changes are executed together by the browser, resulting in a complete refresh/repaint of the client area within the browser window.

To achieve the desired outcome, here's a combination of JavaScript/CSS/HTML code: the images converge from both sides before the entire intro element ascends out of view.

const intro = document.querySelector('.intro');
const leftRightContainers = document.querySelectorAll('.leftright');
const leftContainer = document.querySelector('.leftright.left');

window.addEventListener('DOMContentLoaded', () => {
  // 'transitionend' event handler function
  const transitionendHandler = () => {
    intro.classList.add("move-up");
    leftContainer.removeEventListener("transitionend", transitionendHandler);
  };
  // Add 'transitionend' event handler
  leftContainer.addEventListener("transitionend", transitionendHandler);
  // Trigger transition
  setTimeout(() => {
    leftRightContainers.forEach((elem, index) => {
      elem.classList.add('active', 'fade');
    });
  }, 100);
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

header {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

header h4 {
  position: absolute;
  left: 10%;
  bottom: 1rem;
}

.intro {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  transition: top ease-in-out 1s;
  transition-delay: 0.5s;
}

.intro.move-up {
  top: -100%;
}

.leftright {
  height: 100%;
  width: 50%;
  position: absolute;
  top: 0;
  opacity: 0;
}

.leftright.left {
  left: -100%;
}

.leftright.right {
  left: 100%;
}

.leftright.active {
  right: 0;
  opacity: 1;
  transition: ease-in-out 0.5s;
}

.leftright.left.active {
  left: 0;
}

.leftright.right.active {
  transform: translateX(-100%);
}

.leftright .img-container {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 100%;
  width: 100%;
}

.image-slider.fade {
  bottom: 150px;
  opacity: 0;
  transition: ease-in-out 0.5s;
}

<div class="intro">
  <div class="image-slider">
    <div class="leftright left">
      <div class="img-container" style="background-image: url(https://mdn.github.io/learning-area/javascript/building-blocks/gallery/images/pic3.jpg);"></div>
    </div>
    <div class="leftright right">
      <div class="img-container" style="background-image: url(https://mdn.github.io/learning-area/javascript/building-blocks/gallery/images/pic2.jpg);"></div>
    </div>
  </div>
</div>


<h4>hello world</h4>

Note: Initially, there might be a slight delay when running the code snippet due to the browser downloading images into the background of the .image-container elements. Subsequent runs will perform as expected since the images are cached. To address this issue, consider initiating the left-right-move-up intro animation after the images have fully loaded into the image container elements by setting up an 'onLoad' event listener for each image container before starting the intro animation.

The animation in the HTML, CSS, and JavaScript code is not functioning properly

Answer №1

Similar questions

Arranging HTML Lists in Perfect Order

What is the best way to extend an image to fill the width of a webpage?

Leveraging 2-dimensional indexes in collaboration with the $geoNear operator

How can I create a design that adjusts to show 5 columns on larger screens and 2 columns on smaller screens using Bootstrap 4?

What could be the reason for bootstrap failing to recognize and apply my variables?

One way to include query parameters before initiating navigation in Angular

Popup modal is obstructed by carousel indicator

Using jQuery to insert a new string into the .css file

Error message "getSystemErrorName is not a function" is received while using the Google Data Studio community connector local development tool

Exchange one HTML element with a different HTML element

Utilizing jQuery to add elements to a webpage

Using Javascript to target elements with identical attributes

Vue warning: You are trying to access a property or method that is not defined on the instance but is being referenced during

How can I incorporate Vue draggable feature in my project using cards?

The JavascriptExecutor in Selenium WebDriver using C# consistently returns null objects

Designing borders for tables

Tips for Building Common Controller Logic in CakePHP

The issue of HTML buttons malfunctioning within a label renderer in three.js

When utilizing the AWS JavaScript SDK, the request header is missing the HTTP_X_CSRF_TOKEN

elasticsearch query for deletion only returns documents that are not found