//- 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
@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');
});
});
External CSS
This Pen doesn't use any external CSS resources.