JSFiddle - React, Tailwind, and code Playground

by jacob_truax

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Erin Grant</title>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TimelineMax.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>

<body>
<main>
<div class="Loop js-loop">

<section>
  <img src="img/Junglepussy_Somebody.jpg" alt="">

  <div class="info">
    <h2>Hello</h2>
    <p>Hello</p>
  </div>
</section>

<section>
  <!-- <img src="img/ErinGrant_TheHeartMustBecomeaBurialGround.jpg" alt=""> -->

  <div class="info">
    <h2>Hello</h2>
    <p>Hello</p>
  </div>
</section>

<section>
  <!-- <img src="img/Junglepussy_DearDiary.jpg" alt=""> -->

  <div class="info">
    <h2>Hello</h2>
    <p>Hello</p>
  </div>
</section>

<section>
  <!-- <img src="img/ErinGrant_ZeroattheBone.jpg" alt=""> -->

  <div class="info">
    <h2>Hello</h2>
    <p>Hello</p>
  </div>
</section>

<section>
  <!-- <img src="img/BaliBaby_Backseat.jpg" alt=""> -->

  <div class="info">
    <h2>Hello</h2>
    <p>Hello</p>
  </div>
</section>

<section>
  <!-- <img src="img/ErinGrant_CratersoftheMoon.jpg" alt=""> -->

  <div class="info">
    <h2>Hello</h2>
    <p>Hello</p>
  </div>
</section>

<section>
  <!-- <img src="img/IanIsiah_FreakUDown.jpg" alt=""> -->

  <div class="info">
    <h2>Hello</h2>
    <p>Hello</p>
  </div>
</section>

<section>
  <!-- <img src="img/MHYSA_Bb.jpg" alt=""> -->

  <div class="info">
    <h2>Hello</h2>
    <p>Hello</p>
  </div>
</section>

<!--
  These blocks are the same as the first blocks to get that looping illusion going.
  You need to add clones to fill out a full viewport height.
  -->

  <section class="is-clone">
    <!-- <img...

CSS

html,
body {
  height: 100%;
  /* overflow: hidden; */
}

body {
  color: #000;
}

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

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 1;
}

.Loop {
  position: absolute;
  height: 100%;
  overflow: auto;
}

section {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

::scrollbar {
  display: none;
}

section div {
  position: absolute;
  z-index: 2;
  text-align: center;
  width: 50%;
  background-color: #ff0000;
}

section img {
  position: relative;
  width: 50%;
  background-color: #000;
}

JavaScript

const sections = document.querySelectorAll("section")

const addMovement = function() {
  const topViewport = window.pageYOffset
  const midViewport = topViewport + (window.innerHeight / 2)

  sections.forEach(section => {
    const topSection = section.offsetTop
    const midSection = topSection + (section.offsetHeight / 2)

    const distanceToSection = (midViewport - midSection)
    console.log(distanceToSection)

    const image = section.querySelector(".info")

    image.style.transform = `rotate(${distanceToSection}deg)`
  })
}

addMovement()

document.addEventListener("scroll", function() {
  addMovement()
})

window.addEventListener("resize", function() {
  addMovement()
})