ericmustin · March 5, 2017 00:06
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
        <style type="text/css">

            html {
              overflow-y: hidden;
              overflow-x: hidden !important;
              height: 100vh;
            }
            body {
              overflow-y: hidden;
              overflow-x: hidden;
              height: 100%;
              width: 100%;

              margin: 0;
              animation: color-change 30s infinite linear;
              z-index: 0;
            }

            @keyframes color-change {
              0% {
                background-color: #888;
              }

              25% {
                background-color: #ffffe6;
              }

              50% {
                background-color: #fad6a5;
              }

              60% {
                background-color: #888;
              }

              100% {
                background-color: #888;
              }
            }

            .trainContainer {
              position: absolute;
              top: 42%;
              width: 115%;
              left: -15%;
            }

            .train {
              position: relative;
              left: 0;
              width: 150px;
              height: auto;
              top: 42%;
              transform: translateY(-100%);
              transition: left 10s linear 300ms;
            }

            .trainMoving {
              left: 100%;
            }

            .bridgeContainer {
              position: absolute;
              margin: 0;
              bottom: 30%;
              top: 40%;
              left: 0px;
              right: 0px;
              width: 100%;
              overflow-y: hidden;
              z-index: 1;
            }

            .bridgeContainer .bridge {
              position: relative;
              float: left;
              height: 100%;
              width: 100%;
            }

            .water {
              position: absolute;
              background-color: #87a6d1;
              bottom: 0%;
              top: 65%;
              width: 100%;
              z-index: 0;
              overflow-y: hidden;
            }

            .water .fish {
              position: absolute;
              height: 30%;
              width: 10%;
              top: 30%;
              left: -100px;
              transition: left 20s ease-out 300ms, top 20s ease-in 300ms;
            }

            .water .fishMoving {
              left: 100%;
              top: 10%;
            }

            .sunContainer {
              position: absolute;
              float: left;
              top: 50%;
              width: 100%;
              left: 0%;
              z-index: 0;
              animation: sunrise-sunset 30s infinite linear;
            }

            .sunContainer .sun {
              position: relative;
              float: left;
              max-height: 20%;
              max-width: 20%;
            }

            @keyframes sunrise-sunset {
              0% {
                transform: rotate(0deg);
              }

              50% {
                transform: rotate(180deg);
              }

              100% {
                transform: rotate(360deg);
              }
            }

            .cloud {
              position: absolute;
              width: 20%;
              top: 3%;
              left: 7%;
              max-height: 90px;
              max-width: 150px;
            }
            .cloudTwo {
              position: absolute;
              width: 20%;
              top: 3%;
              right: 14%;
              max-height: 50px;
              max-width: 150px;
            }

        </style>
    </head>
    <body>
      <div class="sunContainer">
        <img class="sun" src="https://s4.postimg.org/6d7d8om6l/sunshine.png" />
      </div>

      <img class="cloud" src="https://s27.postimg.org/z02i7ikc3/cloud.png"/>
      <img class="cloudTwo" src="https://s27.postimg.org/z02i7ikc3/cloud.png"/>

      <div class="trainContainer">
        <img class="train" src="https://s24.postimg.org/a2th59585/train.png" />
      </div>

      <div class="bridgeContainer">
        <img class="bridge" src="https://s18.postimg.org/hnn35zk09/bridge.png"/>
      </div>
      <div class="water">
        <img class="fish" src="https://s10.postimg.org/y3zjlgsdl/lil_Fish.png" />
      </div>

      <script type="text/javascript">
        $(document).ready(function() {
          var countTrain = 0;
          var countFish = 0;
          $('.train').addClass('trainMoving');
          $('.fish').addClass('fishMoving');

          setInterval( function(){
            if(countTrain % 2) {
              $('.train').removeClass('trainMoving')
            } else {
              $('.train').addClass('trainMoving')
            }
            countTrain++;
          }, 11000);

          setInterval( function(){
            if(countFish % 2) {
              $('.fish').removeClass('fishMoving');
              $('.fish').css('transform', "rotate(180deg)");
            } else {
              $('.fish').addClass('fishMoving');
              $('.fish').css('transform', "rotate(180deg)");
            }
            countFish++;
          }, 21000);

        });
      </script>
    </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
	<style type="text/css">

	html {
	overflow-y: hidden;
	overflow-x: hidden !important;
	height: 100vh;
	}
	body {
	overflow-y: hidden;
	overflow-x: hidden;
	height: 100%;
	width: 100%;

	margin: 0;
	animation: color-change 30s infinite linear;
	z-index: 0;
	}

	@keyframes color-change {
	0% {
	background-color: #888;
	}

	25% {
	background-color: #ffffe6;
	}

	50% {
	background-color: #fad6a5;
	}

	60% {
	background-color: #888;
	}

	100% {
	background-color: #888;
	}
	}

	.trainContainer {
	position: absolute;
	top: 42%;
	width: 115%;
	left: -15%;
	}

	.train {
	position: relative;
	left: 0;
	width: 150px;
	height: auto;
	top: 42%;
	transform: translateY(-100%);
	transition: left 10s linear 300ms;
	}

	.trainMoving {
	left: 100%;
	}

	.bridgeContainer {
	position: absolute;
	margin: 0;
	bottom: 30%;
	top: 40%;
	left: 0px;
	right: 0px;
	width: 100%;
	overflow-y: hidden;
	z-index: 1;
	}

	.bridgeContainer .bridge {
	position: relative;
	float: left;
	height: 100%;
	width: 100%;
	}

	.water {
	position: absolute;
	background-color: #87a6d1;
	bottom: 0%;
	top: 65%;
	width: 100%;
	z-index: 0;
	overflow-y: hidden;
	}

	.water .fish {
	position: absolute;
	height: 30%;
	width: 10%;
	top: 30%;
	left: -100px;
	transition: left 20s ease-out 300ms, top 20s ease-in 300ms;
	}

	.water .fishMoving {
	left: 100%;
	top: 10%;
	}

	.sunContainer {
	position: absolute;
	float: left;
	top: 50%;
	width: 100%;
	left: 0%;
	z-index: 0;
	animation: sunrise-sunset 30s infinite linear;
	}

	.sunContainer .sun {
	position: relative;
	float: left;
	max-height: 20%;
	max-width: 20%;
	}

	@keyframes sunrise-sunset {
	0% {
	transform: rotate(0deg);
	}

	50% {
	transform: rotate(180deg);
	}

	100% {
	transform: rotate(360deg);
	}
	}

	.cloud {
	position: absolute;
	width: 20%;
	top: 3%;
	left: 7%;
	max-height: 90px;
	max-width: 150px;
	}
	.cloudTwo {
	position: absolute;
	width: 20%;
	top: 3%;
	right: 14%;
	max-height: 50px;
	max-width: 150px;
	}

	</style>
	</head>
	<body>
	<div class="sunContainer">
	<img class="sun" src="https://s4.postimg.org/6d7d8om6l/sunshine.png" />
	</div>

	<img class="cloud" src="https://s27.postimg.org/z02i7ikc3/cloud.png"/>
	<img class="cloudTwo" src="https://s27.postimg.org/z02i7ikc3/cloud.png"/>

	<div class="trainContainer">
	<img class="train" src="https://s24.postimg.org/a2th59585/train.png" />
	</div>

	<div class="bridgeContainer">
	<img class="bridge" src="https://s18.postimg.org/hnn35zk09/bridge.png"/>
	</div>
	<div class="water">
	<img class="fish" src="https://s10.postimg.org/y3zjlgsdl/lil_Fish.png" />
	</div>

	<script type="text/javascript">
	$(document).ready(function() {
	var countTrain = 0;
	var countFish = 0;
	$('.train').addClass('trainMoving');
	$('.fish').addClass('fishMoving');

	setInterval( function(){
	if(countTrain % 2) {
	$('.train').removeClass('trainMoving')
	} else {
	$('.train').addClass('trainMoving')
	}
	countTrain++;
	}, 11000);

	setInterval( function(){
	if(countFish % 2) {
	$('.fish').removeClass('fishMoving');
	$('.fish').css('transform', "rotate(180deg)");
	} else {
	$('.fish').addClass('fishMoving');
	$('.fish').css('transform', "rotate(180deg)");
	}
	countFish++;
	}, 21000);

	});
	</script>
	</body>
	</html>