how to know if an element is visible to the user?

Question

example I'm trying to make web like this. and I can't figure out how to make effects that when user scroll down the page. And backgrounds of the sections are became longer. How to know if user scroll down and element is visible to the user. And my problem is a lot like this.

where's your code attempt thus far? – treyBake Jan 08 '19 at 09:34 — treyBake, Jan 08 '19 at 09:34

Andy Hoffman · Accepted Answer · 2019-01-08T09:48:05.283

Before using a 3rd party library, I would take a look at Intersection Observer.

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

Support is pretty good outside of Safari, though there is a polyfill. I don't typically advocate using polyfills unless the feature being polyfilled drastically simplifies web development. In this case, I think Intersection Observer is worth the polyfill. Before Observer, the hoops one needed to jump through to create a complex application with many scroll point intersection events is a huge bummer.

Here's a demo taken from here.

var statusBox = document.getElementById("statusBox");
var statusText = document.getElementById("statusText");

function handler(entries, observer) {
  for (entry of entries) {
    statusText.textContent = entry.isIntersecting;

    if (entry.isIntersecting) {
      statusBox.className = "yes";
    } else {
      statusBox.className = "no";
    }
  }
}

/* By default, invokes the handler whenever:
   1. Any part of the target enters the viewport
   2. The last part of the target leaves the viewport */

let observer = new IntersectionObserver(handler);
observer.observe(document.getElementById("target"));

html {
  height: 200%;
  min-height: 400px;
  text-align: center;
  font-family: sans-serif;
  padding-top: 3.5em;
}

#viewport {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  color: #aaa;
  font-weight: bold;
  font-size: 20vh;
  border: 8px dashed #aaa;
  padding-top: 40vh;
  margin: 0;
  user-select: none;
  cursor: default;
}

#target {
  background-color: #08f;
  display: inline-block;
  margin: 100vh auto 100vh;
  color: white;
  padding: 4em 3em;
  position: relative;
}

#statusBox {
  position: fixed;
  top: 0;
  left: 1em;
  right: 1em;
  font-family: monospace;
  padding: 0.5em;
  background-color: #ff8;
  border: 3px solid #cc5;
  opacity: .9;
}

#statusBox.yes {
  background: #8f8;
  border-color: #5c5;
}

#statusBox.no {
  background: #f88;
  border-color: #c55;
}

<p id="viewport">Viewport</p>

<p>Scroll down...<p>

<div id="target">Target</div>

<p id="statusBox">
  isIntersecting ===
  <span id="statusText">unknown</span>
</p>

score 0 · Answer 2 · answered Jan 08 '19 at 09:35

0

Try http://scrollmagic.io/ or https://michalsnik.github.io/aos/. Both are animate on scroll libraries. They basically fire the animation event on page elements whenever these elements are in the viewport of the user.

answered Jan 08 '19 at 09:35

westdabestdb

3,123
13
27

score 0 · Answer 3 · answered Jan 08 '19 at 09:38

If you want to make a website like the example you mentioned. You don't really need to create that effects from scratch. There is a very popular library that has been used by most of the websites like your sample which called aos and you can find it here: https://michalsnik.github.io/aos/

how to know if an element is visible to the user?

3 Answers3