CodePen Embed - TRAVEL BLOG


//- BACKCLOUD
img.cloud-left(src="https://notbigmuzzy.github.io/codepen/example3/img/cloud-left.png")
img.cloud-right(src="https://notbigmuzzy.github.io/codepen/example3/img/cloud-right.png")
img.cloud-right2(src="https://notbigmuzzy.github.io/codepen/example3/img/cloud-left.png")

//- FRONTCLOUDS
#clouds
	.cloud.cld1
	.cloud.cld2
	.cloud.cld3
	.cloud.cld4
	.cloud.cld5
	.cloud.cld6

//- MAIN PANEL
div.main
	h1 TRAVEL BLOG
	h3 SPIN THE GLOBE AND PICK A PLACE
	//- p Spin the globe and pick your place.

//- LANDMARKS
div.planet.spin1
	img.buildings.ajfel(src="https://notbigmuzzy.github.io/codepen/example3/img/ajfel.png")
	img.amer(src="https://notbigmuzzy.github.io/codepen/example3/img/amer.png")
	img.buildings.wash(src="https://notbigmuzzy.github.io/codepen/example3/img/wash.png")
	img.buildings.rus(src="https://notbigmuzzy.github.io/codepen/example3/img/rus.png")
	img.buildings.build(src="https://notbigmuzzy.github.io/codepen/example3/img/build.png")
	img.buildings.prus(src="https://notbigmuzzy.github.io/codepen/example3/img/prus.png")
	img.buildings.germ(src="https://notbigmuzzy.github.io/codepen/example3/img/germ.png")
	img.buildings.crkv(src="https://notbigmuzzy.github.io/codepen/example3/img/crkv.png")
	img.buildings.krist(src="https://notbigmuzzy.github.io/codepen/example3/img/krist.png")
	img.buildings.piramid(src="https://notbigmuzzy.github.io/codepen/example3/img/piramid.png")
	img.buildings.arab(src="https://notbigmuzzy.github.io/codepen/example3/img/arab.png")
	img.buildings.relg(src="https://notbigmuzzy.github.io/codepen/example3/img/relg.png")
	img.buildings.pope(src="https://notbigmuzzy.github.io/codepen/example3/img/pope.png")
	img.buildings.bigben(src="https://notbigmuzzy.github.io/codepen/example3/img/bigben.png")
	img.buildings.bridge(src="https://notbigmuzzy.github.io/codepen/example3/img/bridge.png")
	img.buildings.germ2(src="https://notbigmuzzy.github.io/codepen/example3/img/germ2.png")
	img.buildings.rom(src="https://notbigmuzzy.github.io/codepen/example3/img/rom.png")
	img.buildings.chrch(src="https://notbigmuzzy.github.io/codepen/example3/img/chrch.png")
	img.piza(src="https://notbigmuzzy.github.io/codepen/example3/img/piza.png")

	//- SURFACE STUFF
	div.planet-surface
		div.surface2
		div.surface3
		div.surface4
		div.surface5
		div.surface6

//- BUSSSS
div.bus
	div.bus-up
		div.bus-window.bus-window-topleft.bus-window-width
		div.bus-window.bus-window-width
		div.bus-window.bus-window-width
		div.bus-window.bus-window-width
		div.bus-window.bus-window-topright.bus-window-width
		hr
	div.bus-middle
		div.bus-window.bus-window-left
		div.bus-window
		div.bus-window
		div.bus-window.bus-window-right
		div.bus-door
		hr
	div.bus-down
		div.tire-left.tire-anim
			div.tire-middle
		div.tire-right.tire-anim
			div.tire-middle


//- SCROLL
div.mouse-sign 
	span1 SCR 
	span1 OLL
	div.mouse 
		div.wheel
			div.mouse-margin
				span.unu
				span.doi
				span.trei

View Compiled

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800,700,300)
*
	padding: 0
	margin: 0
	box-sizing: border-box

\:root
	font-size: 16px

body, html
	width: 100%
	height: 8000px
	background: #EFEDE1
	font-family: 'Open Sans', sans-serif

span
	display: block
	width: 5px
	height: 5px
	-ms-transform: rotate(45deg)
	-webkit-transform: rotate(45deg)
	transform: rotate(45deg)
	border-right: 2px solid hsla(0, 0%, 0%, .2)
	border-bottom: 2px solid hsla(0, 0%, 0%, .2)

.mouse-margin
	padding-top: 10px
	margin-left: -1px

.unu
	margin-top: 6px
	-webkit-animation: mouse-scroll 1s infinite
	-moz-animation: mouse-scroll 1s infinite

.doi, .trei
	-webkit-animation: mouse-scroll 1s infinite
	-moz-animation: mouse-scroll 1s infinite

.unu
	-webkit-animation-delay: .1s
	-moz-animation-delay: .1s
	-webkit-animation-direction: alternate

.doi
	-webkit-animation-delay: .2s
	-moz-animation-delay: .2s
	-webkit-animation-direction: alternate

.trei
	-webkit-animation-delay: .3s
	-moz-animation-delay: .3s
	-webkit-animation-direction: alternate

.mouse
	position: fixed
	bottom: 25px
	left: 50%
	margin-left: -7px
	height: 21px
	width: 14px
	border-radius: 10px
	transform: none
	border: 2px solid hsla(0, 0%, 0%, .2)

.mouse-sign
	position: fixed
	bottom: 5px
	left: 50%
	transform: translateX(-50%)
	color: hsla(0, 0%, 0%, .2)

.mouse-sign span1
	margin-right: 8px
	margin-left: 8px

.wheel
	height: 5px
	width: 2px
	display: block
	margin: 5px auto
	background: hsla(0, 0%, 0%, .2)
	position: relative
	-webkit-animation: mouse-wheel 1.2s ease infinite
	-moz-animation: mouse-wheel 1.2s ease infinite

















// CLOUD STUFF
.cloud-left
	position: fixed
	top: 100px
	left: 0
	width: 30%

.cloud-right
	position: fixed
	top: 0
	right: 0
	width: 40%

.cloud-right2
	position: fixed
	top: 200px
	right: 0
	width: 25%
	transform: rotate(180deg)

#clouds
	position: fixed
	top: 200px
	left: 0
	width: 100%
	height: 20%

.cloud
	width: 200px
	height: 60px
	background: #fff
	border-radius: 200px
	-moz-border-radius: 200px
	-webkit-border-radius: 200px
	position: relative
	&:before
		content: ''
		position: absolute
		background: #fff
		width: 100px
		height: 80px
		position: absolute
		top: -15px
		left: 10px
		border-radius: 100px
		-moz-border-radius: 100px
		-webkit-border-radius: 100px
		-webkit-transform: rotate(30deg)
		transform: rotate(30deg)
		-moz-transform: rotate(30deg)
	&:after
		content: ''
		position: absolute
		background: #fff
		width: 100px
		height: 80px
		position: absolute
		top: -15px
		left: 10px
		border-radius: 100px
		-moz-border-radius: 100px
		-webkit-border-radius: 100px
		-webkit-transform: rotate(30deg)
		transform: rotate(30deg)
		-moz-transform: rotate(30deg)
		width: 120px
		height: 120px
		top: -55px
		left: auto
		right: 15px

.cld1
	-webkit-animation: moveclouds 25s linear infinite
	-moz-animation: moveclouds 25s linear infinite
	-o-animation: moveclouds 25s linear infinite

.cld2
	left: 200px
	-webkit-transform: scale(0.6)
	-moz-transform: scale(0.6)
	transform: scale(0.6)
	opacity: 0.6
	-webkit-animation: moveclouds 35s linear infinite
	-moz-animation: moveclouds 35s linear infinite
	-o-animation: moveclouds 35s linear infinite

.cld3
	left: -250px
	top: -200px
	-webkit-transform: scale(0.8)
	-moz-transform: scale(0.8)
	transform: scale(0.8)
	opacity: 0.8
	-webkit-animation: moveclouds 30s linear infinite
	-moz-animation: moveclouds 30s linear infinite
	-o-animation: moveclouds 30s linear infinite

.cld4
	left: 470px
	top: -250px
	-webkit-transform: scale(0.75)
	-moz-transform: scale(0.75)
	transform: scale(0.75)
	opacity: 0.75
	-webkit-animation: moveclouds 38s linear infinite
	-moz-animation: moveclouds 38s linear infinite
	-o-animation: moveclouds 38s linear infinite

.cld5
	left: -150px
	top: -150px
	-webkit-transform: scale(0.8)
	-moz-transform: scale(0.8)
	transform: scale(0.8)
	opacity: 0.8
	-webkit-animation: moveclouds 40s linear infinite
	-moz-animation: moveclouds 40s linear infinite
	-o-animation: moveclouds 40s linear infinite

.cld6
	left: 650px
	top: -50px
	-webkit-transform: scale(0.8)
	-moz-transform: scale(0.8)
	transform: scale(0.8)
	opacity: 0.8
	-webkit-animation: moveclouds 40s linear infinite
	-moz-animation: moveclouds 40s linear infinite
	-o-animation: moveclouds 40s linear infinite

















// PLANET STUFF
.planet
	position: fixed
	left: 50%
	margin-left: -750px
	margin-top: 75vh
	height: 1500px
	width: 1500px
	transform: rotate(0deg)
	-webkit-transition: all 1s ease-in-out
	transition: all 1s ease-in-out	
	@media all and (max-width:"1200px")
		margin-top: 80vh
		.surface6, .surface5
			box-shadow: none
		.surface5, .surface4
			background: #D4D0BA

	@media all and (max-width:"1100px")
		margin-top: 85vh
		.surface3
			background: #D4D0BA

		.surface4, .surface5
			box-shadow: none
			background: #D4D0BA

	@media all and (max-width:"900px")
		margin-top: 90vh
		.surface3, .surface4, .surface5
			box-shadow: none
			background: #5F3A2F

	@media all and (max-width:"760px")
		margin-top: 95vh
	// HEIGHT
	@media all and (max-height:"970px")
		.surface6
			box-shadow: none
		.surface5
			background: #D4D0BA

	@media all and (max-height:"850px")
		margin-top: 85vh

		.surface3, .surface4
			box-shadow: none
			background: none



.planet-surface
	position: absolute
	width: 100%
	height: 100%
	background: #5F3A2F
	border-radius: 50%
	box-shadow: 0px 0px 10px #5F3A2F

.surface2
	position: absolute
	top: 2.5%
	left: 2.5%
	width: 95%
	height: 95%
	border: dashed 10px #C2986C
	border-radius: 50%

.surface3
	position: absolute
	top: 6%
	left: 6%
	width: 88%
	height: 88%
	border-radius: 50%
	background: #0E979F
	box-shadow: inset 0px 0px 10px black
	-webkit-transition: all 1s ease-in-out
	transition: all 1s ease-in-out		

.surface4
	position: absolute
	top: 8%
	left: 8%
	width: 84%
	height: 84%
	border-radius: 50%
	background: #F06C25
	box-shadow: inset 0px 0px 10px black

.surface5
	position: absolute
	top: 10%
	left: 10%
	width: 80%
	height: 80%
	border-radius: 50%
	background: #F9B718
	box-shadow: inset 0px 0px 10px black

.surface6
	position: absolute
	top: 12%
	left: 12%
	width: 76%
	height: 76%
	border-radius: 50%
	background: #D4D0BA
	background-image: (url(img/back.png))
	box-shadow: inset 0px 0px 10px black

.bus
	position: fixed
	top: 75vh
	margin-top: -50px
	left: 50%
	margin-left: -100px
	width: 200px
	height: 120px
	border-bottom: 10px solid #BA1A1E
	-webkit-transition: all 1s ease-in-out
	transition: all 1s ease-in-out		
	-webkit-animation: busupdown .8s linear infinite
	-moz-animation: busupdown .8s linear infinite
	-o-animation: busupdown .8s linear infinite

.bus-forward
	margin-left: -80px

.bus-back
	margin-left: -95px

.bus-top
	margin-left: -110px

.bus-bottom
	margin-left: -120px

.bus-up
	position: relative
	width: 98%
	height: 34%	
	background: #ED2226
	border-top-right-radius: 25px
	border-top-left-radius: 25px
	border-bottom-right-radius: 10px
	box-shadow: 0px -10px 40px hsla(0, 0%, 0%, .3)
	overflow: hidden
	text-align: center
	border-top: 2px solid #ED2226

.bus-middle
	position: relative
	width: 92%
	height: 32%
	background: #ED2226
	padding-left: 5px

.bus-down
	width: 100%
	height: 34%
	background: #ED2226
	border-top-right-radius: 15px
	box-shadow: 0px 20px 20px hsla(0, 0%, 0%, .3)

.tire-left
	width: 40px
	height: 40px
	background: #1A1417
	position: absolute
	bottom: -20px
	left: 10px
	border-radius: 50%
	border-bottom: 5px solid #0A0809

.tire-right
	width: 40px
	height: 40px
	background: #1A1417
	position: absolute
	bottom: -20px
	right: 10px
	border-radius: 50%
	border-bottom: 5px solid #0A0809

.tire-middle
	width: 15px
	height: 15px
	background: #F8E8CE
	position: absolute
	top: 12.5px
	left: 12.5px
	border-radius: 50%	

.tire-anim
	-webkit-animation: tireleft .8s linear infinite
	-moz-animation: tireleft .8s linear infinite
	-o-animation: tireleft .8s linear infinite

.bus-window
	display: inline-block
	width: 20%
	height: 100%
	background: #EFEFEF
	border: 4px solid #ED2226
	border-right: 2px solid #ED2226
	border-left: 2px solid #ED2226

.bus-door
	display: inline-block
	width: 12%
	height: 100%
	background: #EFEFEF
	border: 4px solid #ED2226
	border-right: 2px solid #ED2226
	border-left: 2px solid #ED2226
	float: right
	border-bottom-left-radius: 8px
	border-top-left-radius: 8px	

.bus-window-left
	border-bottom-left-radius: 8px

.bus-window-right
	border-bottom-right-radius: 8px
	border-top-right-radius: 8px

.bus-window-topleft
	border-top-left-radius: 20px

.bus-window-topright
	border-top-right-radius: 20px
	border-bottom-right-radius: 8px

.bus-window-width
	width: 17%

.bus-middle hr
	position: absolute
	top: 10px
	left: 0
	background: #ED2226
	width: 88%
	height: 2px
	border: none

.bus-up hr
	position: absolute
	top: 10px
	left: 0
	background: #ED2226
	width: 100%
	height: 2px
	border: none

.buildings
	-webkit-transition: all .2s linear
	transition: all .2s linear

.buildings:hover
	cursor: pointer
	opacity: .5















// PICS
.piza
	position: absolute
	top: -260px
	left: 41%
	margin-left: -100px

.ajfel
	position: absolute
	top: -380px
	left: 50%
	margin-left: -100px

.amer
	position: absolute
	top: -190px
	left: 61%
	margin-left: -100px

.wash
	position: absolute
	top: -150px
	right: 23%
	-moz-transform: rotate(0deg)
	-webkit-transform: rotate(0deg)
	-o-transform: rotate(0deg)
	-ms-transform: rotate(0deg)
	transform: rotate(-0deg)

.rus
	position: absolute
	top: -5px
	right: -55px
	-moz-transform: rotate(-5deg)
	-webkit-transform: rotate(-5deg)
	-o-transform: rotate(-5deg)
	-ms-transform: rotate(-5deg)
	transform: rotate(-5deg)

.build
	position: absolute
	top: 320px
	right: -220px
	-moz-transform: rotate(2deg)
	-webkit-transform: rotate(2deg)
	-o-transform: rotate(2deg)
	-ms-transform: rotate(2deg)
	transform: rotate(2deg)

.prus
	position: absolute
	top: 40%
	right: -290px
	-moz-transform: rotate(97deg)
	-webkit-transform: rotate(97deg)
	-o-transform: rotate(97deg)
	-ms-transform: rotate(97deg)
	transform: rotate(97deg)

.germ
	position: absolute
	bottom: 11%
	right: -35px
	-moz-transform: rotate(7deg)
	-webkit-transform: rotate(7deg)
	-o-transform: rotate(7deg)
	-ms-transform: rotate(7deg)
	transform: rotate(7deg)

.crkv
	position: absolute
	bottom: -200px
	right: 100px

.krist
	position: absolute
	bottom: -200px
	right: 300px
	-moz-transform: rotate(-10deg)
	-webkit-transform: rotate(-10deg)
	-o-transform: rotate(-10deg)
	-ms-transform: rotate(-10deg)
	transform: rotate(-10deg)

.piramid
	position: absolute
	bottom: -170px
	left: 38%
	-moz-transform: rotate(-2deg)
	-webkit-transform: rotate(-2deg)
	-o-transform: rotate(-2deg)
	-ms-transform: rotate(-2deg)
	transform: rotate(-2deg)

.arab
	position: absolute
	bottom: -230px
	left: 27%
	-moz-transform: rotate(5deg)
	-webkit-transform: rotate(5deg)
	-o-transform: rotate(5deg)
	-ms-transform: rotate(5deg)
	transform: rotate(5deg)

.relg
	position: absolute
	bottom: -140px
	left: 7.5%
	-moz-transform: rotate(10deg)
	-webkit-transform: rotate(10deg)
	-o-transform: rotate(10deg)
	-ms-transform: rotate(10deg)
	transform: rotate(10deg)

.pope
	position: absolute
	bottom: 50px
	left: -120px
	-moz-transform: rotate(16deg)
	-webkit-transform: rotate(16deg)
	-o-transform: rotate(16deg)
	-ms-transform: rotate(16deg)
	transform: rotate(16deg)

.bigben
	position: absolute
	bottom: 380px
	left: -230px
	-moz-transform: rotate(-15deg)
	-webkit-transform: rotate(-15deg)
	-o-transform: rotate(-15deg)
	-ms-transform: rotate(-15deg)
	transform: rotate(-15deg)

.bridge
	position: absolute
	top: 35%
	left: -230px

.germ2
	position: absolute
	top: 12%
	left: -260px
	-moz-transform: rotate(15deg)
	-webkit-transform: rotate(15deg)
	-o-transform: rotate(15deg)
	-ms-transform: rotate(15deg)
	transform: rotate(15deg)

.rom
	position: absolute
	top: 1%
	left: 128px
	-moz-transform: rotate(-10deg)
	-webkit-transform: rotate(-10deg)
	-o-transform: rotate(-10deg)
	-ms-transform: rotate(-10deg)
	transform: rotate(-10deg)

.chrch
	position: absolute
	top: -110px
	left: 370px
	-moz-transform: rotate(5deg)
	-webkit-transform: rotate(5deg)
	-o-transform: rotate(5deg)
	-ms-transform: rotate(5deg)
	transform: rotate(5deg)















// MAIN BODY
.main
	position: fixed
	top: 0
	left: 50%
	transform: translateX(-50%)
	width: 100%
	height: 100%
	max-width: 1200px

.main h1
	margin-top: -0.1em
	font-size: 11em
	color: #F06D24
	text-align: center
	@media all and (max-width:"1210px")
		font-size: 10em
	@media all and (max-width:"1090px")
		font-size: 9em
	@media all and (max-width:"980px")
		font-size: 7em

.main h3
	margin-top: -2.5em
	font-size: 4em
	color: #F06D24
	text-align: center
	@media all and (max-width:"1210px")
		font-size: 3.6em
	@media all and (max-width:"1090px")
		font-size: 3.4em
	@media all and (max-width:"980px")
		font-size: 2.6em

.main p
	font-size: 1.4em
	width: 600px
	margin: 0 auto
	margin-top: -0.8em
	text-align: center




// TOGGLE KLASE
.scale
	z-index: 999
	transform: scale(1.1)

.opacity
	opacity: .5

.main-read
	background: white











// MEDIA STUFF
@media all and (max-height:"850px")
	span, .mouse, .wheel
		// bottom: 5px
		border: 2px solid hsla(0, 100%, 100%, .2)

	.mouse-sign
		bottom: 10px
		color: hsla(0, 100%, 100%, .2)

	.bus
		top: 80vh

@media all and (max-width:"900px")
	span, .mouse, .wheel
		// bottom: 5px
		border: 2px solid hsla(0, 100%, 100%, .2)
	.mouse-sign
		bottom: 10px
		color: hsla(0, 100%, 100%, .2)
	.bus
		top: 70vh

@media all and (max-width:"1120px")
	.bus
		top: 80vh

@media all and (max-width:"900px")
	.bus
		top: 85vh

@media all and (max-width:"770px")
	.bus
		top: 90vh







// ANIMATIONS ///////////////////////////////////////////////////////////
@-webkit-keyframes mouse-wheel
	0%
		opacity: 1
		-webkit-transform: translateY(0)
		-ms-transform: translateY(0)
		transform: translateY(0)
	100%
		opacity: 0
		-webkit-transform: translateY(6px)
		-ms-transform: translateY(6px)
		transform: translateY(6px)

@-moz-keyframes mouse-wheel
	0%
		top: 1px
	50%
		top: 2px
	100%
		top: 3px

@-webkit-keyframes mouse-scroll
	0%
		opacity: 0
	50%
		opacity: .5
	100%
		opacity: 1

@-moz-keyframes mouse-scroll
	0%
		opacity: 0
	50%
		opacity: .5
	100%
		opacity: 1

@-o-keyframes mouse-scroll
	0%
		opacity: 0
	50%
		opacity: .5
	100%
		opacity: 1

@keyframes mouse-scroll
	0%
		opacity: 0
	50%
		opacity: .5
	100%
		opacity: 1

// CLOUD ANIM
@-webkit-keyframes moveclouds
	0%
		margin-left: 100%
	100%
		margin-left: -100%

@-moz-keyframes moveclouds
	0%
		margin-left: 100%
	100%
		margin-left: -100%

@-o-keyframes moveclouds
	0%
		margin-left: 100%
	100%
		margin-left: -100%

@keyframes moveclouds
	0%
		margin-left: 100%
	100%
		margin-left: -100%

// BUS ANIM
@-webkit-keyframes busupdown
	0%
		margin-top: -50px
	50%
		margin-top: -55px
	100%
		margin-top: -50px

@-moz-keyframes busupdown
	0%
		margin-top: -50px
	50%
		margin-top: -55px
	100%
		margin-top: -50px

@-o-keyframes busupdown
	0%
		margin-top: -50px
	50%
		margin-top: -55px
	100%
		margin-top: -50px

@keyframes busupdown
	0%
		margin-top: -50px
	50%
		margin-top: -55px
	100%
		margin-top: -50px

// TIRE ANIM
@-webkit-keyframes tireleft
	0%
		bottom: -20px
	50%
		bottom: -28px
	100%
		bottom: -20px

@-moz-keyframes tireleft
	0%
		bottom: -20px
	50%
		bottom: -28px
	100%
		bottom: -20px

@-o-keyframes tireleft
	0%
		bottom: -20px
	50%
		bottom: -28px
	100%
		bottom: -20px

@keyframes tireleft
	0%
		bottom: -20px
	50%
		bottom: -28px
	100%
		bottom: -20px

$(document).ready(function() {

  // START IN BIG OF PAGE
  window.scrollTo(0, 0);

  // ROTATE PLANET ON SCROLL
  $(window).scroll(function() {
    var offset = $(window).scrollTop();
    offset = offset * 0.05;
    $('.planet').css({
      '-moz-transform': 'rotate(-' + offset + 'deg)',
      '-webkit-transform': 'rotate(-' + offset + 'deg)',
      '-o-transform': 'rotate(-' + offset + 'deg)',
      '-ms-transform': 'rotate(-' + offset + 'deg)',
      'transform': 'rotate(-' + offset + 'deg)',
    });
  });

  // CLICK FUNCT
  $('.ajfel').click(function() {
    window.scrollTo(0, 0);
    $('.bus').removeClass('bus-bottom');
  });
  $('.wash').click(function() {
    window.scrollTo(0, 400);
    $('.bus').removeClass('bus-bottom');
  });
  $('.rus').click(function() {
    window.scrollTo(0, 950);
    $('.bus').removeClass('bus-forward');
    $('.bus').addClass('bus-bottom');
  });
  $('.build').click(function() {
    window.scrollTo(0, 1350);
    $('.bus').removeClass('bus-bottom');
    $('.bus').addClass('bus-top');
  });
  $('.prus').click(function() {
    window.scrollTo(0, 1800);
    $('.bus').removeClass('bus-top');
    $('.bus').addClass('bus-back');
  });
  $('.germ').click(function() {
    window.scrollTo(0, 2400);
    $('.bus').removeClass('bus-back');
    $('.bus').addClass('bus-forward');
  });
  $('.crkv').click(function() {
    window.scrollTo(0, 2910);
    $('.bus').removeClass('bus-forward');
    $('.bus').addClass('bus-bottom');
  });
  $('.krist').click(function() {
    window.scrollTo(0, 3190);
    $('.bus').removeClass('bus-bottom');
    $('.bus').addClass('bus-forward');
  });
  $('.piramid').click(function() {
    window.scrollTo(0, 3630);
    $('.bus').removeClass('bus-forward');
    $('.bus').addClass('bus-bottom');
  });
  $('.arab').click(function() {
    window.scrollTo(0, 3990);
    $('.bus').removeClass('bus-bottom');
    $('.bus').addClass('bus-back');
  });
  $('.relg').click(function() {
    window.scrollTo(0, 4360);
    $('.bus').removeClass('bus-back');
    $('.bus').addClass('bus-top');
  });
  $('.pope').click(function() {
    window.scrollTo(0, 4700);
    $('.bus').removeClass('bus-top');
    $('.bus').addClass('bus-bottom');
  });
  $('.bigben').click(function() {
    window.scrollTo(0, 4950);
    $('.bus').removeClass('bus-bottom');
    $('.bus').addClass('bus-forward');
  });
  $('.bridge').click(function() {
    window.scrollTo(0, 5400);
    $('.bus').removeClass('bus-forward');
    $('.bus').addClass('bus-bottom');
  });
  $('.germ2').click(function() {
    window.scrollTo(0, 5950);
    $('.bus').removeClass('bus-bottom');
    $('.bus').addClass('bus-back');
  });
  $('.rom').click(function() {
    window.scrollTo(0, 6400);
    $('.bus').removeClass('bus-back');
    $('.bus').addClass('bus-forward');
  });
  $('.chrch').click(function() {
    window.scrollTo(0, 6750);
    $('.bus').addClass('bus-back');
  });

});

This Pen is owned by NOTBIGMUZZY on CodePen.

See more by @notbigmuzzy on CodePen

External CSS

External JavaScript