<div id="fullpage">
  <div class="section">
    <div class="container">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/sd2018-logo-lockup-v2.png" alt="spirit day 2018" />
    </div>
  </div>
  <div class="section">
    <div class="container">
      <div class="box">
        Pledging to “go purple” on Spirit Day is a way for everyone — forward-thinking companies, global leaders, respected celebrities, neighbors, parents, classmates, and friends — to visibly show solidarity with LGBTQ youth and to take part in the largest,
        most visible anti-bullying campaign in the world.
      </div>
    </div>
  </div>
  <div class="section">
    <div class="container">
      <div class="box">
        <p>85.2% of LGBTQ students report being verbally harassed.</p>
        <em>Stats via GLSEN’s 2015 National School Climate Survey</em>
      </div>
    </div>
  </div>
  <div class="section">
    <div class="container">
      <div class="box">
        <p>57.6% of LGBTQ students did not report experiences of bullying because they doubted an intervention.</p>
        <em>Stats via GLSEN’s 2015 National School Climate Survey</em>
      </div>
    </div>
  </div>
  <div class="section">
    <div class="container">
      <div class="box">
        <p>63.5% of LGBTQ students who did report an incident said that school staff did nothing in response or told the student to ignore it.</p>
        <em>Stats via GLSEN’s 2015 National School Climate Survey</em>
      </div>
    </div>
  </div>
  <div class="section">
    <div class="container">
      <a href="https://www.facebook.com/profilepicframes/?selected_overlay_id=809750319205329" target="_blank"><strong>Go purple</strong> on October 18!
      </a>
    </div>
  </div>
</div>
@import url("https://fonts.googleapis.com/css?family=Krub:400,700");

:root {
  --main-white-color: white;
  --main-black-color: black;
}

* {
  padding: 0;
  margin: 0;
  color: var(--main-white-color);
}

body {
  font: 28px/1.5 "Krub", sans-serif;
}

.section {
  background: linear-gradient(to bottom, #7f2a8b 20%, #a336b2 70%, #b43dc4);
}

.section:last-child {
  background: #7b2987
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/spirit.jpg)
    no-repeat fixed center / cover;
  background-blend-mode: luminosity;
}

.section .container {
  max-width: 750px;
  width: 85%;
  padding: 15px;
  margin: 0 auto;
  text-align: center;
}

.section .box {
  padding: 10px;
}

.section img {
  display: block;
  max-width: 80%;
  width: 500px;
  margin: 0 auto;
}

.section em {
  font-size: 0.8rem;
}

.section a {
  font-size: 2.5rem;
  padding: 1px;
  border-bottom: 2px solid;
  text-decoration: none;
}


/* ANIMATIONS
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.section .box {
  opacity: 0;
  transform: scale3d(0, 0, 0) translate3d(0, -100%, 0);
}

.section .box.is-animated {
  animation: fadeIn 0.5s ease-in-out forwards;
}

@keyframes fadeIn {
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  }
}


/* VERTICAL DOTS PAGINATION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#fp-nav ul li {
  margin: 15px 7px;
}

#fp-nav ul li a span {
  background: var(--main-white-color);
  border: 3px solid transparent;
  transition-duration: 0.5s;
}

#fp-nav ul li a span,
#fp-nav ul li:hover a span {
  width: 12px;
  height: 12px;
}

#fp-nav ul li a span,
#fp-nav ul li:hover a span,
#fp-nav ul li a.active span,
#fp-nav ul li:hover a.active span {
  margin: -9px 0 0 -9px;
}

#fp-nav ul li:hover a span,
#fp-nav ul li a.active span {
  background: transparent;
  border-color: var(--main-white-color);
}

.fp-last #fp-nav ul li a span {
  background: var(--main-black-color);
}

.fp-last #fp-nav ul li:hover a span,
.fp-last #fp-nav ul li a.active span {
  background: transparent;
  border-color: var(--main-black-color);
}


/* MQ
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media screen and (max-width: 768px) {
  body {
    font-size: 20px;
  }

  #fp-nav.fp-left {
    left: 7px;
  }
}
const body = document.querySelector("body");
const fullPage = document.getElementById("fullpage");
const boxes = document.querySelectorAll(".box");

new fullpage(fullPage, {
  licenseKey: "OPEN-SOURCE-GPLV3-LICENSE",
  navigation: true,
  navigationPosition: "left",
  css3: false,
  scrollOverflow: true,
  afterLoad: function(origin, destination, direction) {
    const activeSection = destination.item;
    if (activeSection.querySelector(".box")) {
      activeSection.querySelector(".box").classList.add("is-animated");
    }
  },
  onLeave: function(origin, destination, direction) {
    destination.isLast
      ? body.classList.add("fp-last")
      : body.classList.remove("fp-last");

    if (document.querySelector(".box.is-animated")) {
      document
        .querySelector(".box.is-animated")
        .classList.remove("is-animated");
    }
  }
});
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.3/fullpage.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.3/fullpage.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.3/vendors/scrolloverflow.min.js