JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

<section class="visual">
  <div class="earth parallax">지구</div>
  <div class="bat-1 parallax">박쥐 1</div>
  <div class="bat-2 parallax">박쥐 2</div>
  <h1>
      <em>블라블라블라</em>
      <strong>타이틀1</strong>
      <strong>타이틀2</strong>
  </h1>
</section>

<section class="omg">
  <p>aslkdfjalsdkjfalsdkfjasldkfjasdlkfjasdlkfjasdlfkjasdflkasjdflkasjdfaslkdfjalsdkjfalsdkfjasldkfjasdlkfjasdlkfjasdlfkjasdflkasjdflkasjdfaslkdfjalsdkjfalsdkfjasldkfjasdlkfjasdlkfjasdlfkjasdflkasjdflkasjdfaslkdfjalsdkjfalsdkfjasldkfjasdlkfjasdlkfjasdlfkjasdflkasjdflkasjdfaslkdfjalsdkjfalsdkfjasldkfjasdlkfjasdlkfjasdlfkjasdflkasjdflkasjdfaslkdfjalsdkjfalsdkfjasldkfjasdlkfjasdlkfjasdlfkjasdflkasjdflkasjdf</p>
  <p>aslkdfjalsdkjfalsdkfjasldkfjasdlkfjasdlkfjasdlfkjasdflkasjdflkasjdfaslkdfjalsdkjfalsdkfjasldkfjasdlkfjasdlkfjasdlfkjasdflkasjdflkasjdfaslkdfjalsdkjfalsdkfjasldkfjasdlkfjasdlkfjasdlfkjasdflkasjdflkasjdfaslkdfjalsdkjfalsdkfjasldkfjasdlkfjasdlkfjasdlfkjasdflkasjdflkasjdfaslkdfjalsdkjfalsdkfjasldkfjasdlkfjasdlkfjasdlfkjasdflkasjdflkasjdfaslkdfjalsdkjfalsdkfjasldkfjasdlkfjasdlkfjasdlfkjasdflkasjdflkasjdf</p>
  <p>aslkdfjalsdkjfalsdkfjasldkfjasdlkfjasdlkfjasdlfkjasdflkasjdflkasjdfaslkdfjalsdkjfalsdkfjasldkfjasdlkfjasdlkfjasdlfkjasdflkasjdflkasjdfaslkdfjalsdkjfalsdkfjasldkfjasdlkfjasdlkfjasdlfkjasdflkasjdflkasjdfaslkdfjalsdkjfalsdkfjasldkfjasdlkfjasdlkfjasdlfkjasdflkasjdflkasjdfaslkdfjalsdkjfalsdkfjasldkfjasdlkfjasdlkfjasdlfkjasdflkasjdflkasjdfaslkdfjalsdkjfalsdkfjasldkfjasdlkfjasdlkfjasdlfkjasdflkasjdflkasjdf</p>
  <p>aslkdfjalsdkjfalsdkfjasldkfjasdlkfjasdlkfjasdlfkjasdflkasjdflkasjdfaslkdfjalsdkjfalsdkfjasldkfjasdlkfjasdlkfjasdlfkjasdflkasjdflkasjdfaslkdfjalsdkjfalsdkfjasldkfjasdlkfjasdlkfjasdlfkjasdflkasjdflkasjdfaslkdfjalsdkjfalsdkfjasldkfjasdlkfjasdlkfjasdlfkjasdflkasjdflkasjdfaslkdfjalsdkjfalsdkfjasldkfjasdlkfjasdlkfjasdlfkjasdflkasjdflkasjdfaslkdfjalsdkjfalsdkfjasldkfjasdlkfjasdlkfjasdlfkjasdflkasjdflkasjdf</p>
 ...

SCSS

.visual{
    position: fixed;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100vw;
    height: 700px;
    background: #000;
    .parallax{
      position: absolute;
      z-index: -1;
      font-size: 50px;
      text-align: center;
      color: #fff;
    }
    .earth.parallax{
      width: 100vw;
      height: 100vh;
      top: 240px;
      background: #f00;
    }
    .bat-1.parallax{
      top: 430px;
      left: 50%;
      width: 757px;
      height: 318px;
      margin-left: -600px;
      background: #0f0;
    }
    .bat-2.parallax{
      top: 558px;
      right: 50%;
      width: 334px;
      height: 123px;
      margin-right: -500px;
      background: #00f;
    }
    h1{
      position: relative;
      width: 1000px;
      margin: 0 auto;
      margin-top: 154px;
      font-size: 20px;
      color: #fff;
      strong{
        position: absolute;
        left: 50%;
        display: block;
        overflow: hidden;
        transform: translateX(-50%);
        &:nth-of-type(1){
          top: 184px;
          width: 283px;
          height: 114px;
        }
        &:nth-of-type(2){
          top: 154px;
          width: 282px;
          height: 170px;
        }
      }
      em{
        display: block;
        text-align: center;
      }
    }
  }
  .omg{
    margin-top: 700px;
    background: #040;
  }

JavaScript

// jsFiddle은 export, import를 못해요
// 우측에 JAVASCRIPT에 Vue를 추가했어요
new Vue({
  name: 'vheader',
  data() {
    return {
      scroll_limit: false
    }
  },
  mounted() {
    window.addEventListener('scroll', () => {
      // 1. 타겟 element
      // 2. 첫 위치값 defaultNum
      // 3. 움직이는 값마다 다르게 .. directionNum
      // 4. time
      this.parallaxBat('.earth', 240, 4, 10)
      this.parallaxBat('.bat-1', 430, 2, 50)
      this.parallaxBat('.bat-2', 558, 2, -100)
    })
  },
  methods: {
    parallaxBat: function(element, defaultNum, directionNum, time) {
      let el = document.querySelector(element)
      let scrollY = document.documentElement.scrollTop || document.body.scrollTop
      this.parallaxBatDoit(el, scrollY, defaultNum, directionNum, time)
    },

    parallaxBatDoit: function(el, scrollY, defaultNum, directionNum, time) {
      if (scrollY > (defaultNum + time)) {
        el.style.top = defaultNum - (scrollY / directionNum) + 'px'
      }
    }
  }
})