Minimal Animated Header

Developer
Nerijus
Size
2,407 Kb
Views
26,312
  1. Minimal Animated Header Previews
  2. Minimal Animated Header HTML Codes
  3. Minimal Animated Header CSS Codes

How do I make an minimal animated header?

Just wanted to test out how this would look. Simple effect, yet makes impressive minimalistic headline effect. . What is a minimal animated header? How do you make a minimal animated header? This script and codes were developed by Nerijus on 15 September 2022, Thursday.

Minimal Animated Header Previews
IQ Test

Minimal Animated Header - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Minimal Animated Header</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="shapes">	<div class="circle-1"></div>	<div class="circle-2"></div>	<div class="circle-3"></div>	<div class="circle-4"></div>	<h1>Design <br >Branding <br >Development</h1>
</div>
</body>
</html>

Minimal Animated Header - Script Codes CSS Codes

@keyframes move1 { 0% { transform: translate(0px); } 25% { transform: translateX(8px); } 50% { transform: translate(16px, 16px); } 75% { transform: translateY(8px); } 100% { transform: translate(0px); }
}
@keyframes move2 { 0% { transform: translate(0px); } 25% { transform: translateX(-8px); } 50% { transform: translate(-16px, -20px); } 75% { transform: translateY(-12px); } 100% { transform: translate(0px); }
}
@keyframes move3 { 0% { transform: translate(0px); } 25% { transform: translateX(-8px); } 50% { transform: translate(-16px, -20px); } 75% { transform: translateY(-12px); } 100% { transform: translate(0px); }
}
@keyframes move4 { 0% { transform: translate(0px); } 25% { transform: translateX(-8px); } 50% { transform: translate(-16px, -6px); } 75% { transform: translateY(-11px); } 100% { transform: translate(0px); }
}
#shapes { top: calc(50% - 250px); left: calc(50% - 250px); position: relative; width: 500px; height: 500px;
}
#shapes h1 { z-index: 1; position: relative;
}
.circle-1, .circle-2, .circle-3, .circle-4 { position: absolute; border-radius: 50%; margin: 0;
}
.circle-1 { width: 250px; height: 250px; border: 1px solid #0433ff; top: 0px; left: 0px; animation: move1 4s linear infinite;
}
.circle-2 { width: 225px; height: 225px; border: 1px solid #e57373; margin: 0; top: 60px; left: 45px; animation: move2 3.5s linear infinite;
}
.circle-3 { width: 240px; height: 240px; border: 1px solid #4dd0e1; margin: 0; top: 35px; left: 25px; animation: move3 3s linear infinite;
}
.circle-4 { width: 260px; height: 260px; border: 1px solid #009688; margin: 0; top: 10px; left: 25px; animation: move4 3s linear infinite;
}
Minimal Animated Header - Script Codes
Minimal Animated Header - Script Codes
Home Page Home
Developer Nerijus
Username nerijusgood
Uploaded September 15, 2022
Rating 3
Size 2,407 Kb
Views 26,312
Do you need developer help for Minimal Animated 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!

Nerijus (nerijusgood) Script Codes
Name
Vivus animate logo
Inbox by gmail pure css logo
Multi-level mobile navigation
From side hover effect
Smart Social Nav for WordPress with Sass
A Pen by Nerijus
Create amazing captions 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!