Layer Tennis Header

Developer
Cmalven
Size
2,930 Kb
Views
4,048
  1. Layer Tennis Header Previews
  2. Layer Tennis Header HTML Codes
  3. Layer Tennis Header CSS Codes
  4. Layer Tennis Header JS Codes

How do I make an layer tennis header?

The animated scrolling header on http://layertennis.com. What is a layer tennis header? How do you make a layer tennis header? This script and codes were developed by Cmalven on 29 January 2023, Sunday.

Layer Tennis Header Previews
IQ Test

Layer Tennis Header - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Layer Tennis Header</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="slider"> <div class="slider__row slider__row--1"></div> <div class="slider__row slider__row--2"></div> <div class="slider__row slider__row--3"></div> <div class="slider__row slider__row--4"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Layer Tennis Header - Script Codes CSS Codes

.slider { height: 370px; background-color: #eee; position: absolute; overflow: hidden; background-color: #313139; top: 0; bottom: 0; margin: auto; width: 100%;
}
.slider__row { height: 101px; width: 6480px; -webkit-animation-name: row-slide; animation-name: row-slide; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-duration: 100s; animation-duration: 100s; -webkit-animation-timing-function: linear; animation-timing-function: linear; background-size: 25%; -webkit-backface-visibility: hidden; backface-visibility: hidden; opacity: 0.10;
}
.slider__row--1 { margin-top: -18px; margin-left: 0; -webkit-animation-duration: 150s; animation-duration: 150s; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/66496/homepage-header-row01.jpg);
}
.slider__row--2 { -webkit-animation-name: row-slide; animation-name: row-slide; margin-left: -540px; -webkit-animation-duration: 80s; animation-duration: 80s; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/66496/homepage-header-row02.jpg);
}
.slider__row--3 { margin-left: 0; -webkit-animation-duration: 130s; animation-duration: 130s; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/66496/homepage-header-row03.jpg);
}
.slider__row--4 { -webkit-animation-name: row-slide; animation-name: row-slide; margin-left: -810px; -webkit-animation-duration: 100s; animation-duration: 100s; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/66496/homepage-header-row04.jpg);
}
@-webkit-keyframes row-slide { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(-1620px); transform: translateX(-1620px); }
}
@keyframes row-slide { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(-1620px); transform: translateX(-1620px); }
}

Layer Tennis Header - Script Codes JS Codes

(function() {
}).call(this);
Layer Tennis Header - Script Codes
Layer Tennis Header - Script Codes
Home Page Home
Developer Cmalven
Username cmalven
Uploaded January 29, 2023
Rating 3
Size 2,930 Kb
Views 4,048
Do you need developer help for Layer Tennis Header?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Cmalven (cmalven) Script Codes
Name
Paper Shift
Speed
VerbalExpressions Converter
A Pen by cmalven
Smooth Chars
THREE.js Globe imported from OBJ
One Distortion
Hello, there.
AnimPanel Demo
Let it Snow
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!