Frontend Forever

Surfing 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 Surfing 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.

SURFING

Surfing is a fantastic sport with a noteworthy past. Although its exact roots are unknown, surfing was first noticed by Europeans in Tahiti in 1767 while they were on a ship.

The sport of surfing is quite old in Hawaii. Ancient Hawaiians considered surfing to be an essential aspect of daily life. It wasn't merely a pastime or a profession. For them, it was both a way of life and a type of art.

Many years later, surfing became popular in the US. James Matthias Jordan, Jr. introduced surfing to the East Coast by emulating the traditional practices of the Polynesians.

The West Coast of the United States saw a significant increase in the popularity of surfing. A blossoming of surfing culture occurred in several locations as a result of board design innovations and increased public awareness.

Many people were drawn in by the beach culture of Southern California and the surfing way of life. As competitions grew, a professional surfing scene began to emerge.

In the 1960s, when surf-related films and bands like the Beach Boys gained international recognition, surfing culture really took off.

It is not surprising that people have taken to this activity for countless years because riding waves is one of the most exhilarating experiences there is.

STEPS TO CREATE :

Make a new document and call it surf.html.
Download all of the photos I've provided in the area below.
Add the background GIF image to the HTML document.
then add the surfing GIF file as well.
Give each element a different style.
The surf GIF file has some CSS Animation added.
Start coding after watching my tutorial.
Here is a link to the tutorial: https://youtu.be/Q34OS le7WQ
I hope you enjoyed this tutorial and learned something new since this animation is currently being finished.

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);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.container{
	width: 100%;
	height: 100vh;
	background: linear-gradient(aqua,aquamarine,aqua);
}
img:nth-child(1){
	position: relative;
	height: 80vh;
	width: 90%;
	left: 5%;
	top: 10%;
	border: 5px solid black;
	border-radius: 20px;
	box-shadow: 6px 6px 10px gray,-6px -6px 10px gray;
}
img:nth-child(2){
	position: absolute;
	height: 80px;
	width: 80px;
	right: 25%;
	top: 38%;
	animation: surf 7s linear infinite;
}
@keyframes surf{
	0%{
		transform: rotateZ(20deg);
	}
	10%{
		top: 38%;
		height: 110px;
		width: 110px;
	}
	20%{
		top: 45%;
		height: 115px;
		width: 115px;
	}
	30%{
		top: 40%;
		height: 125px;
		width: 125px;
	}
	40%{
		top: 40%;
		height: 130px;
		width: 130px;
	}
	50%{
		top: 40%;
		height: 135px;
		width: 135px;
	}
	60%{
		top: 45%;
		height: 140px;
		width: 140px;
	}
	70%{
		top: 45%;
		height: 145px;
		width: 145px;
	}
	80%{
		top: 45%;
		height: 150px;
		width: 150px;
	}
	90%{
		top: 45%;
		height: 155px;
		width: 155px;
	}
	100%{
		top: 52%;
		height: 155px;
		width: 155px;
		transform: translateX(-800px);
	}
}

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

Surfing Animation

About this Code

Images

Youtube Tutorial Video

Source Code

Leave a Comment

You need to login first to comment.

About Us

Frontend Forever