North Island , New Zealand

index.html

<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>

<img id="globe" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/359063/world.svg" alt="globe" />

<div id="scroll">scroll
  <img id="arrow" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/359063/arrow.svg" alt="arrow" />
</div>

north-island-new-zealand.markdown

North Island , New Zealand

Well-known landmarks from North Island in New Zealand. Scroll up or down the page to rotate the globe.

A Pen by Carol on CodePen.

License.

script.js

var position = $(window).scrollTop(),
    rotateTl = new TimelineMax({
    paused: true
  }),
    flipTl = new TimelineMax({
    paused: true
  });

rotateTl.to('#globe', 15, {
  rotation: '+=360',
  ease: Linear.easeInOut,
  repeat: -1,
  backfaceVisibility: 'hidden',
  transformStyle: 'preserve-3d'
});

flipTl.to('#arrow', 0.5, {
  rotationX: 180,
  ease: Power0.easeIn
});

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll > position) {
    rotateTl.play();
    flipTl.play();
  } else {
    rotateTl.reverse();
    flipTl.reverse();
  }
  position = scroll;
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>

style.scss

$blue:  #6d98af;
$green: #98b850;
$white: #ffffff;

body{
  color:$white;
  background-color:$blue;
  font:normal 18px 'Kaushan Script', cursive;
  -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale; 
  height:100vh;
  overflow-x:hidden;
}

#globe{
  position:fixed;
  width:100%;
  margin-top:35vh;
  height:auto;
}

#scroll{
  position:fixed;
  top:50%;
  right:35px;
  text-align:center;
  transform:translateY(-50%);
  img{
    display:block;
    margin-top:5px;
  }
}