
<!DOCTYPE html><html class=''>
<head>
<meta charset="UTF-8">
<meta name="robots" content="index">
<link href='https://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'>
<style>
html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
  background-color: transparent;
}

.pink {
  color: #fb435f;
  opacity: 0.82;
}

.green {
  color: #d0e751;
  opacity: 0.82;
}

#skrollr-body {
  float: left;
  width: 100%;
  height: 100vh;
}

#main {
  height: 400vh;
  width: 100%;
  left: 0;
  top: 0;
  display: block;
  float: left;
  position: absolute;
  z-index: -1;
}

.section {
  height: 100vh;
  width: 100%;
  position: relative;
  color: #FFF;
}

.section.black {
  color: #000;
}

.section h1,
.section h2 {
  padding: 0;
  margin: 0;
  position: absolute;
  top: 50%;
  z-index: 10;
  text-align: center;
  width: 100%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-weight: 300;
  font-size: 3.6em;
}

.section h2 {
  font-size: 3em;
}

.spanPush {
  margin-left: -0.62em !important;
}

#hash {
  bottom: 20px;
  top: initial;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  font-weight: 400;
}

.logo {
  position: absolute;
  font-size: 3em;
}

.logo span {
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.center {
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#home2 > h1 {
	font-size: max(5vw, 32px);
}
</style>
</head>

<body>
<div id="skrollr-body">

  <div id="main" data-0p="background-color:rgb(0,0,0);" data-100p="background-color:rgb(251,67,95);" data-200p="background-color:rgb(208,231,81);" data-300p="background-color:rgb(255,255,255);"></div>
  <div id="home2" class="section fadeIn animated" data-section-name="home">
    <h1 data-0p="opacity:1;" data-50p="opacity:0;"><span class="pink">▲</span><span style="transition:all 0.25s ease-in-out;margin-left:-1em;" class="green">▲</span> UPUP Media<br></h1>
  </div>

  <div class="section-special" style="height:300vh;">
    <div class="center logo" data-50p="opacity:0;" data-100p="opacity:1;font-size:3.6em;" data-200p="font-size:3.6em;" data-300p="font-size:144em;"><span style="color:rgba(251,67,95,1);" data-100p="opacity:0;transform: translate(-50%, 90vh) rotate(180deg); bottom: 5vh;" data-200p="opacity:1;transform:translate(-50%, 220vh) rotate(360deg);bottom: 0;" data-300p="opacity:0.92;transform:translate(-40%, 450vh) rotate(360deg);bottom:0;">▲</span><span style="bottom:5vh;color:rgba(208,231,81,1);" data-0p="transform: translate(-50%, -25vh) rotate(0deg);" data-100p="opacity:1;transform: translate(-50%, 90vh) rotate(180deg)" data-200p="opacity:0;transform: translate(-50%, 220vh) rotate(360deg);bottom: 5vh;" data-300p="opacity:0.92;transform: translate(-60%, 450vh) rotate(360deg);bottom:0;">▲</span></div>
    
    <div class="section">
      <h2>Welcome.</h2>
    </div>

    <div class="section black">
      <h2>That is all.</h2>
    </div>

    <div class="section black">
      <h2 id="hash"><a id="toTop" href="#top" style="color:#000;text-decoration:none;">#</a></h2>
    </div>

  </div>></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.2/jquery.scrollify.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js'></script>
<script>
$(function () {
    $('body').bind('touchmove', function (e) {
        e.preventDefault();
    });
    setTimeout(function () {
        $('#home2 h1 span:nth-child(2)').addClass('spanPush');
    }, 500);
    setTimeout(function () {
        $('body').bind('touchmove', function (e) {
            e.preventDefault();
        });
        $('body').unbind('touchmove');
        $('body').removeClass('stop-scrolling');
    }, 1200);
});

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    $.scrollify.disable();
    skrollr.init({ forceHeight: false });
}

var s = skrollr.init();

$.scrollify({
    section: '.section',
    sectionName: 'section-name',
    interstitialSection: '',
    easing: 'easeOutExpo',
    scrollSpeed: 1200,
    offset: 0,
    scrollbars: false,
    standardScrollElements: '',
    setHeights: true,
    overflowScroll: true,
    before: function () {
    },
    after: function () {
    },
    afterResize: function () {
    },
    afterRender: function () {
    }
});
$('#toTop').click(function () {
    event.preventDefault();
    $.scrollify.move('#home');
});
//# sourceURL=pen.js
</script>
</body></html>