Frontend Forever

Swimming Pool Animation

About this Code

Hello reader, I am frontendforever. Nice to meet you again in this free code sharing website. In this post I am going to explain about Swimming Pool Animation. If you are new to this website, we recommend you to subscribe to our youtube channel and watch the videos. Ok lets dive into the code.

History of the Swimming Pool

Artificial swimming pools were created by the ancient Greeks and Romans for palaestra athletic training, nautical sports, and military drills. One of the Latin words for a pool is piscina because Roman emperors had personal swimming pools where they also kept fish. Gaius Maecenas of Rome constructed the very first heated swimming pool in the first century BC. Rich Roman ruler Gaius Maecenas is regarded as one of the first art sponsors.

Swimming competitions were a part of the first modern Olympic Games in 1896, and as a result, swimming pools gained popularity.

In the middle of the 19th century, swimming pools gained popularity in Britain. In London, England, there were six indoor swimming pools with diving boards as early as 1837. The oldest swimming club still in existence in Britain is thought to be the Maidstone Swimming Club in Maidstone, Kent.

One of the first contemporary above-ground swimming pools was found in the US, at the Racquet Club of Philadelphia clubhouse (1907). In 1906, the Adriatic of the White Star Line carried the first swimming pool ever to sail at sea. Underwood Pool, the nation's oldest publicly accessible swimming facility, is situated in Belmont, Massachusetts.

Despite New Zealand's population of 4,116,900 and its 65,000 home swimming pools and 125,000 spa pools, the United States has more than 10.4 million residential and 309,000 public swimming pools.

Images

These are the output images of the code. You can click on the image to enlarge it. also you can click the try it button to see the output.

Youtube Tutorial Video

If you are a visual learner and want to learn how to use this code, you can watch the video below.
and also this video contains the clear step by step explanation and the output of the code.

Source Code

This is the source code of the code. You can copy and paste the code to your editor.

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*{
	margin: 0;
	padding: 0;
}
.container{
	width: 1366px;
	height: 805px;
	background-image: url(https://www.frontendforever.com/uploads/assets/bg5.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}
.pool{
	position: relative;
	margin: -150px 30px;
	width: 1220px;
	height: 500px;
	background: skyblue;
	border:50px solid black;
	transform-style: preserve-3d;
	transform-origin: bottom;
	transform: perspective(2000px) rotateX(86deg);
}
#img1 img{
	width: 300px;
	height: 200px;
	position: absolute;
	top: 35%;
	left: 2%;
	z-index: 10;
	transform: rotateY(-180deg);
}
#img2 img{
	width: 300px;
	height: 200px;
	position: absolute;
	top: 35%;
	right: 2%;
	z-index: 10;
}
#img1 #board{
	position: absolute;
	right: 0;
	width: 80px;
	height: 20px;
	top: 60%;
	background: white;
	transform-style: preserve-3d;
	transform-origin: bottom;
	transform: rotateX(80deg);
}
#img2 #board{
	position: absolute;
	left: 0;
	width: 80px;
	height: 20px;
	top: 60%;
	background: white;
	transform-style: preserve-3d;
	transform-origin: bottom;
	transform: rotateX(80deg);
}
.down{
	width: 1300px;
	height: 196px;
	background: rgba(135,206,235,.7);
	border-top: 10px solid black;
	border-left: 10px solid black;
	border-right: 10px solid black;
	position: absolute;
	bottom: 1px;
	left: 2%;
}
.down img{
	width: 60px;
	height: 60px;
	position: absolute;
	top: -40%;
	right: 50%;
	animation: bird 30s linear infinite;
}
@keyframes bird{
	0%{
		transform: translateX(300px);
	}
}
#img3 img{
	width: 300px;
	height: 200px;
	position: absolute;
	top: 65%;
	animation: swim 10s linear infinite;
}
@keyframes swim{
	0%{
      
	}
	100%{
		transform: translateX(1050px);
	}
}

And also you can click the try it button to see the output of the code in our web Code Playground.
You can also download the code to the zip format by clicking the download button. The download process is little bit complex, you need ti await for 10 seconds. after that you can download the code by clicking the generated download link.

Download

Try It

Frontend Forever

Swimming Pool Animation

About this Code

Images

Youtube Tutorial Video

Source Code

Leave a Comment

You need to login first to comment.

About Us

Frontend Forever