JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<html lang="en-GB">
  <head>
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta charset="utf-8">
    <title>Pooch Pen Parallax</title>
    <meta name="description" content="Poochy Pen Parallax"css></i>
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css?v=1.0">
</head>

<body class='pooch'>
<section id="poochy-parallax" class="poochy-parallax">

  <div class="art">
    <div id="art-0" class="art--layer"></div>
    <div id="art-1" class="art--layer"></div>
    <div id="art-2" class="art--layer"></div>
    <div id="art-3" class="art--layer"></div>
    <div id="art-4" class="art--layer"></div>
    <div id="art-5" class="art--layer"></div>
    <div id="art-6" class="art--layer"></div>
    <div id="art-7" class="art--layer"></div>
    <div id="art-8" class="art--layer"></div>
    <div id="art-9" class="art--layer"></div>

    <div class="art--layer project-slide__logo" id="art-logo">
      <span>Logo Here</span>
    </div>
  </div>

</section>

<section class="filler">
      <img src="http://jeffreeve.co.uk/images/art/pawprints.svg" alt="">
</section>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
    <script src="js/scripts-min.js"></script>
</body>
</html>

CSS

body {
  width: 100%;
  margin: 0;
  padding: 0; }

#art-0 {
  background-image: url("http://jeffreeve.co.uk/images/art/0.svg");
  z-index: 0; }

#art-1 {
  background-image: url("http://jeffreeve.co.uk/images/art/1.svg");
  z-index: 1; }

#art-2 {
  background-image: url("http://jeffreeve.co.uk/images/art/2.svg");
  z-index: 2; }

#art-3 {
  background-image: url("http://jeffreeve.co.uk/images/art/3.svg");
  z-index: 3; }

#art-4 {
  background-image: url("http://jeffreeve.co.uk/images/art/4.svg");
  z-index: 4; }

#art-5 {
  background-image: url("http://jeffreeve.co.uk/images/art/5.svg");
  z-index: 5; }

#art-6 {
  background-image: url("http://jeffreeve.co.uk/images/art/6.svg");
  z-index: 6; }

#art-7 {
  background-image: url("http://jeffreeve.co.uk/images/art/7.svg");
  z-index: 7; }

#art-8 {
  background-image: url("http://jeffreeve.co.uk/images/art/8.svg");
  z-index: 8; }

#art-9 {
  background-image: url("http://jeffreeve.co.uk/images/art/9.svg");
  z-index: 9; }

#art-10 {
  background-image: url("http://jeffreeve.co.uk/images/art/10.svg");
  z-index: 10; }

.art {
  background-color: #F4EFEB;
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  z-index: -1; }

.art--layer {
  background-position: center;
  background-size: cover;
  width: 100%;
  position: absolute;
  height: 100vh;
  width: 100vw;
  position: fixed; }

#art-logo {
  font-family: 'Indie Flower', cursive;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  height: 100%;
  z-index: 5; }
  #art-logo span {
    z-index: 100;
    font-size: 80px;
    margin-bottom: 95px; }

.filler {
  height: 100vh;
  background-color: white;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center; }
  .filler img {
    max-width: 50px; }

JavaScript

var app = {
    controller: null,
  
    init: function() {
      this.initParallaxScene();
    },
  
    initParallaxScene: function() {
  
      this.controller = new ScrollMagic.Controller();
      var tween = new TimelineMax ().add([
        TweenMax.fromTo("#art-0", 0.5, {y:0, ease: Linear.easeNone}, {y: -20, ease: Linear.easeNone}),
        TweenMax.fromTo("#art-1", 0.5, {y:0, ease: Linear.easeNone}, {y: -20, ease: Linear.easeNone}),
        TweenMax.fromTo("#art-2", 0.5, {y:0, ease: Linear.easeNone}, {y: -56, ease: Linear.easeNone}),
        TweenMax.fromTo("#art-3", 0.5, {y:0, ease: Linear.easeNone}, {y: -140, ease: Linear.easeNone}),
        TweenMax.fromTo("#art-4", 0.5, {y:0, ease: Linear.easeNone}, {y: -308, ease: Linear.easeNone}),
        TweenMax.fromTo("#art-5", 0.5, {y:0, ease: Linear.easeNone}, {y: -448, ease: Linear.easeNone}),
        TweenMax.fromTo("#art-6", 0.5, {y:0, ease: Linear.easeNone}, {y: -728, ease: Linear.easeNone}),
        TweenMax.fromTo("#art-7", 0.5, {y:0, ease: Linear.easeNone}, {y: -1008, ease: Linear.easeNone}),
        TweenMax.fromTo("#art-8", 0.5, {y:0, ease: Linear.easeNone}, {y: -1372, ease: Linear.easeNone}),
        TweenMax.fromTo("#art-9", 0.5, {y:0, ease: Linear.easeNone}, {y: -1933, ease: Linear.easeNone}),
        TweenMax.fromTo("#art-10", 0.5, {y:0, ease: Linear.easeNone}, {y: -1933, ease: Linear.easeNone}),
        TweenMax.fromTo("#art-logo", 0.1, {opacity:1.0, ease: Linear.easeNone}, {opacity: 0, ease: Linear.easeNone}),
      ]);
  
      // build scene
      var scene = new ScrollMagic.Scene({triggerElement: "#art", duration: 2000, offset: 450})
      .setTween(tween)
      .setPin("#art")
      .triggerHook(0.5)
      .offset(10)
      .addTo(this.controller);
    },
  }
  
  $(document).ready(function() {
    app.init();
  })