CODEWITHSUNDEEP
javascripthtmlcssanimationcss-animations
oussama ghrib
oussama ghrib

Reputation: 99

how to animate css element only when it appears on a window?

i know that there is parallax but i want something else like in this website joinhandshake.com

for example i have this code
html

<div class="black-div"></div>
   <div class="animated-div">
       <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit temporibus fuga sit quam fugit! Dignissimos quis qui, praesentium id nihil, aspernatur nostrum, dolores dolor molestiae error molestias ipsum ipsam at.</h1>
   </div>

css


.black-div {
    background-color: black;
    height: 130vh;
}
 @keyframes rotate-scale-up {
    0% {
      transform: scale(1) rotateZ(0);
    }
    50% {
      transform: scale(2) rotateZ(180deg);
    }
    100% {
      transform: scale(1) rotateZ(360deg);
    }
  }
  .animated-div {
    animation: rotate-scale-up 0.65s linear both;
}

the problem is that when i load the page, the text gets animated, so how can i prevent that?

Upvotes: 1

Views: 5736

Answers (3)

LuisArmando-TestCoder
LuisArmando-TestCoder

Reputation: 29

This is not what you asked for, this is better

When the center of the viewport touches the inside of the element, it snaps to 1, otherwise, it tends to 0

So, you can do magic with css properties, and transitions

    const viewportHeight = window.innerHeight;
    const scrollY = window.scrollY;
    const {top, height} = element.getBoundingClientRect();

    const bottom = top + height;
    const viewportCenter = viewportHeight / 2;
    const scrollCenterPosition = scrollY + viewportCenter;
    const elementTopAbsolutePosition = top + scrollY;
    const elementBottomAbsolutePosition = bottom + scrollY;

    const bodyProximityToCenter = (
      Math.min(scrollCenterPosition, elementTopAbsolutePosition) / elementTopAbsolutePosition
    ) / (
      Math.max(scrollCenterPosition, elementBottomAbsolutePosition) / elementBottomAbsolutePosition
    );

    console.table([
      ["bodyProximityToCenter", bodyProximityToCenter]
    ]);

Upvotes: 0

Emiel Zuurbier
Emiel Zuurbier

Reputation: 20944

To check if an element is in view, use the Intersection Observer API. This API is built for this exact purpose and requires little to no calculations, only a check with the isIntersecting value, to see if an element has entered the view.

The IntersectionObserverIn uses a callback function to do something whenever an element has entered or left the view. In this function you can specify what should happen when that does.

I've made a snippet with an example on how it works and how you can implement it. 

/**
 * What to do when an item enters the screen
 * If it is in the screen, isIntersecting will be true.
 * Add a class when it is.
 */
const intersectionCallback = (entries) => {
  for (const entry of entries) { // Loop over all elements that either enter or exit the view.
    if (entry.isIntersecting) { // This is true when the element is in view.
      entry.target.classList.add('show'); // Add a class.
    }
  }
}

/**
 * Create a observer and use the instersectionCallback as 
 * the instructions for what to do when an element enters
 * or leaves the view
 */
const observer = new IntersectionObserver(intersectionCallback);

/**
 * Get all .item elements and loop over them.
 * Observe each individual item.
 */
const items = document.querySelectorAll('.item');
for (const item of items) {
  observer.observe(item);
}
.item {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  height: 200px;
  width: 100%;
  margin-bottom: 20px;
  opacity: 0;
  transition: opacity 1s ease-out;
}

.item:nth-of-type(odd) {
  background-color: #333;
}

.item:nth-of-type(even) {
  background-color: #111;
}

.item.show {
  opacity: 1;
}
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>

Upvotes: 6

Badfox
Badfox

Reputation: 17

Then page fully loaded delay element use jQuery instead.

  setTimeout(function () {
  $("div").addClass("black-div").delay(2000).fadeIn(); 
  });

Upvotes: -2

Related Questions