How can I simplify this code also make the logo center?-CodePudding

Thanks to @Temani Afif again, with his guidance I was able to find the answer from my last question, , Now I have two problems and one request: 1- I can not center the logo on the shirt. 2-Also when the browser window is fully enlarged the shirt enlarges to its original size and does not go over 100%. 3-How can I simplify the code?

I would appreciate any help.

const images = document.querySelectorAll('.anim ');



        observer = new IntersectionObserver((entries) => {

            entries.forEach(entry => {
                if(entry.intersectionRatio > 0) {
                    entry.target.style.animation = `square-animation .5s ${entry.target.dataset.delay} forwards ease-out`;
                    
                }
                else {
                    entry.target.style.animation = 'none';
                }
            })

        })

        images.forEach(entry => {
            observer.observe(entry)

                  }) 

const slideup = document.querySelectorAll('.slideup ');

        observer = new IntersectionObserver((entries) => {

            entries.forEach(entry => {
                if(entry.intersectionRatio > 0) {
                    entry.target.style.animation = `slideup 1s ${entry.target.dataset.delay} forwards ease-out`;
                    
                }
                else {
                    entry.target.style.animation = 'none';
                }
            })

        })

         
        slideup.forEach(entry => {
            observer.observe(entry)
        
         })



 const scale = document.querySelectorAll('.scale ');

        observer = new IntersectionObserver((entries) => {

            entries.forEach(entry => {
                if(entry.intersectionRatio > 0) {
                    entry.target.style.animation = `scale 1s ${entry.target.dataset.delay} forwards ease-out`;
                    
                }
                else {
                    entry.target.style.animation = 'none';
                }
            })

        })

         
        scale.forEach(entry => {
            observer.observe(entry)
        
         })


         const sliding = document.querySelectorAll('.sliding ');

        observer = new IntersectionObserver((entries) => {

            entries.forEach(entry => {
                if(entry.intersectionRatio > 0) {
                    entry.target.style.animation = `sliding .5s ${entry.target.dataset.delay} forwards ease-out`;
                    
                }
                else {
                    entry.target.style.animation = 'none';
                }
            })

        })
         
        sliding.forEach(entry => {
            observer.observe(entry)
        
         })

.section {
  height: 100%;
  width: 100%;
  display: block;
  }
  .section.one{
    background-color: rgb(6, 65, 65);
  }
  
 

.title-bar {
  
  display: flex;
  overflow: visible;
  width: 100vw;
  height: 8vh;
  max-width: 70vw;
  min-height: 1vh;
  margin-top: 5vh;
  margin-bottom: 5vh;
  margin-right: auto;
  margin-left: auto;
  justify-content: center;
  align-items: center;
  border-top-style: solid;
  border-top-width: 1vh;
  border-top-color: #28f7e6;
  border-bottom-style: solid;
  border-bottom-width: 1vh;
  border-bottom-color: #28f7e6;
  perspective-origin: 50% 50%;
  transform-origin: 50% 50%;
  }

.title-text {
    text-align: center;
    font-size: 6vh;
    margin: 0px 0px;
    font-family: PT Serif;
    color: #28f7e6;
   }



.grid-container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-column-gap: 1%;
  max-width:70%;
  margin:auto;
}
.grid-container > div  {
  display: grid;
  place-items: center;
}
 
.grid-container > div > .shirt {
  grid-area: 1/1;
  transition: .5s;
}


.grid-container > div > .art {
  grid-area: 1/1;
  transition: .5s;
  transform-origin:bottom;
  
  
}
  
.grid-container > div > .shirt > .slideup {
  max-width: 100%;
  
  /* controls the width of the shirt images */
}

.grid-container > div > .art > .scale {
  max-width: 50%;
  
  
  
  /* controls the width of the art images  */
}
  

.grid-container  div:hover  .shirt {
  transform: scale(0);
}

.grid-container  div:hover .art {
  transform: scale(2);
  transform-origin: bottom;
 
}

.anim {
  opacity: 0;
}

.slideup {
  opacity: 0;
  
}

.scale {
  opacity: 0;
  transform-origin: bottom left;
}

.sliding {
  opacity: 0;
}

@keyframes square-animation {
  0%{
    transform: scale(0, 1);
    opacity: 0;
  }

  100%{
    transform: scale(1, 1);
    opacity: 1;
  }
}

@keyframes slideup {
  0%{
    transform: translate(0px,50%);
    opacity: 0;
  }

  
  100%{
    transform: translate(0px,0px);
    opacity: 1;
  }

}


@keyframes scale {
  0%{
    transform-origin: bottom left;
    transform: scale(0,0);
    opacity: 0;
  }

  
  100%{
    transform-origin: bottom left;
    transform: scale(1,1);
    opacity: 1;
  }
}

@keyframes rotate {
  0%{
    transform: rotate(90deg);
    opacity: 0;
  }

  
  100%{
    transform: rotate(0deg);
    opacity: 1;
  }
}


@keyframes sliding {

0%{
  transform: translate(50px,10px);
  opacity: 0;
}


100%{
  transform: translate(0px,0px);
  opacity: 1;
}
}

<!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>HOME</title>
    <link rel="stylesheet" href="stylesheet.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.11/fullpage.min.css"
        integrity="sha512-NGRhMiWY9pf5z8PLens7/u LLwIPAu1dhJ7u9sHRWIo8TKrVbKiWlRdYRH3pVDCZA10zmobo PBLGeLOREklBw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
    <div id="fullpage">
        <div >
            
            <div >

                <div  data-delay=".1s">
                    <p > First Banner </p>
                </div>

                <div >                        
                    <div>
                        <div >
                            <img src="https://i.imgur.com/oS8QWPI.png"  data-delay=".4s">
                        </div>

                        <div >
                            <img src="https://i.imgur.com/jeNzULX.png"     data-delay="1s">
                        </div>

                    </div>

                    <div>
                        <div >
                            <img src="https://i.imgur.com/oS8QWPI.png"  data-delay=".6s">
                        </div>
                        <div >
                            <img src="https://i.imgur.com/jeNzULX.png"     data-delay="1.2s">
                        </div>

                    </div>

                    <div>
                        <div >
                            <img src="https://i.imgur.com/oS8QWPI.png"  data-delay=".8s">
                        </div>
                        <div >
                            <img src="https://i.imgur.com/jeNzULX.png"     data-delay="1.4s">
                        </div>

                    </div>
                    
                </div>

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

        <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.11/fullpage.min.js"
            integrity="sha512-ojnoeSkK5NDwnuW5S0ZnddobHez8Bx1yVa3RE Cd0fGEuY/NEd4sgVF/CJ6eDtnOeLZLbTJpNFrCkUYbHS2hRA=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>"
        <script src="script.js"></script>
        <script>
            new fullpage('#fullpage', {
                //options here
                autoScrolling: true,
                scrollHorizontally: true
            });
        </script>
</body>

</html>

CodePudding user response：

The only change I made is to the .grid-container > div > .art in the css where I added a display: grid; justify-items: center;. Results in this:

new fullpage('#fullpage', {
  //options here
  autoScrolling: true,
  scrollHorizontally: true
});
const images = document.querySelectorAll('.anim ');



observer = new IntersectionObserver((entries) => {

  entries.forEach(entry => {
    if (entry.intersectionRatio > 0) {
      entry.target.style.animation = `square-animation .5s ${entry.target.dataset.delay} forwards ease-out`;

    } else {
      entry.target.style.animation = 'none';
    }
  })

})

images.forEach(entry => {
  observer.observe(entry)

})

const slideup = document.querySelectorAll('.slideup ');

observer = new IntersectionObserver((entries) => {

  entries.forEach(entry => {
    if (entry.intersectionRatio > 0) {
      entry.target.style.animation = `slideup 1s ${entry.target.dataset.delay} forwards ease-out`;

    } else {
      entry.target.style.animation = 'none';
    }
  })

})


slideup.forEach(entry => {
  observer.observe(entry)

})



const scale = document.querySelectorAll('.scale ');

observer = new IntersectionObserver((entries) => {

  entries.forEach(entry => {
    if (entry.intersectionRatio > 0) {
      entry.target.style.animation = `scale 1s ${entry.target.dataset.delay} forwards ease-out`;

    } else {
      entry.target.style.animation = 'none';
    }
  })

})


scale.forEach(entry => {
  observer.observe(entry)

})


const sliding = document.querySelectorAll('.sliding ');

observer = new IntersectionObserver((entries) => {

  entries.forEach(entry => {
    if (entry.intersectionRatio > 0) {
      entry.target.style.animation = `sliding .5s ${entry.target.dataset.delay} forwards ease-out`;

    } else {
      entry.target.style.animation = 'none';
    }
  })

})

sliding.forEach(entry => {
  observer.observe(entry)

})

.section {
  height: 100%;
  width: 100%;
  display: block;
}

.section.one {
  background-color: rgb(6, 65, 65);
}



.title-bar {

  display: flex;
  overflow: visible;
  width: 100vw;
  height: 8vh;
  max-width: 70vw;
  min-height: 1vh;
  margin-top: 5vh;
  margin-bottom: 5vh;
  margin-right: auto;
  margin-left: auto;
  justify-content: center;
  align-items: center;
  border-top-style: solid;
  border-top-width: 1vh;
  border-top-color: #28f7e6;
  border-bottom-style: solid;
  border-bottom-width: 1vh;
  border-bottom-color: #28f7e6;
  perspective-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.title-text {
  text-align: center;
  font-size: 6vh;
  margin: 0px 0px;
  font-family: PT Serif;
  color: #28f7e6;
}



.grid-container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-column-gap: 1%;
  max-width: 70%;
  margin: auto;
}

.grid-container>div {
  display: grid;
  place-items: center;
}

.grid-container>div>.shirt {
  grid-area: 1/1;
  transition: .5s;
}


.grid-container>div>.art {
  display: grid;
  grid-area: 1/1;
  transition: .5s;
  justify-items: center;
  transform-origin: bottom;


}

.grid-container>div>.shirt>.slideup {
  max-width: 100%;

  /* controls the width of the shirt images */
}

.grid-container>div>.art>.scale {
  max-width: 50%;



  /* controls the width of the art images  */
}


.grid-container div:hover .shirt {
  transform: scale(0);
}

.grid-container div:hover .art {
  transform: scale(2);
  transform-origin: bottom;

}

.anim {
  opacity: 0;
}

.slideup {
  opacity: 0;

}

.scale {
  opacity: 0;
  transform-origin: bottom left;
}

.sliding {
  opacity: 0;
}

@keyframes square-animation {
  0% {
    transform: scale(0, 1);
    opacity: 0;
  }

  100% {
    transform: scale(1, 1);
    opacity: 1;
  }
}

@keyframes slideup {
  0% {
    transform: translate(0px, 50%);
    opacity: 0;
  }


  100% {
    transform: translate(0px, 0px);
    opacity: 1;
  }

}


@keyframes scale {
  0% {
    transform-origin: bottom left;
    transform: scale(0, 0);
    opacity: 0;
  }


  100% {
    transform-origin: bottom left;
    transform: scale(1, 1);
    opacity: 1;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(90deg);
    opacity: 0;
  }


  100% {
    transform: rotate(0deg);
    opacity: 1;
  }
}


@keyframes sliding {

  0% {
    transform: translate(50px, 10px);
    opacity: 0;
  }


  100% {
    transform: translate(0px, 0px);
    opacity: 1;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.11/fullpage.min.js"></script>
<div id="fullpage">
  <div >

    <div >

      <div  data-delay=".1s">
        <p > First Banner </p>
      </div>

      <div >
        <div>
          <div >
            <img src="https://i.imgur.com/oS8QWPI.png"  data-delay=".4s">
          </div>

          <div >
            <img src="https://i.imgur.com/jeNzULX.png"  data-delay="1s">
          </div>

        </div>

        <div>
          <div >
            <img src="https://i.imgur.com/oS8QWPI.png"  data-delay=".6s">
          </div>
          <div >
            <img src="https://i.imgur.com/jeNzULX.png"  data-delay="1.2s">
          </div>

        </div>

        <div>
          <div >
            <img src="https://i.imgur.com/oS8QWPI.png"  data-delay=".8s">
          </div>
          <div >
            <img src="https://i.imgur.com/jeNzULX.png"  data-delay="1.4s">
          </div>

        </div>

      </div>

    </div>
  </div>

</div>