HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
//- 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');
});
});
Also see: Tab Triggers