I saw a nice effect on a website yesterday and wanted to replicate it, where a coloured bar flashes across the name of the website.
This is the result, feel free to use if you want.
HTML:
CSS:
Because by default, H1 tags are block-level elements so they span the full width of it's parent container, which in this case would be 960px, so the bar would run across the full 960px view rather than just the H1 tag itself. So I've had to make them inline-block to minimise their widths and then add a line break to get them on separate lines.Why have I used inline-block H1 tags and then done a line break to separate them?
This is the result, feel free to use if you want.
You must be registered for see links
HTML:
PHP:
<header>
<div class="hero-image">
<img src="https://images.unsplash.com/photo-1527664557558-a2b352fcf203?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4341976025ae49162643ccdb47a72a4d&auto=format&fit=crop&w=1351&q=80" alt="Hero" />
</div>
<div class="hero-content">
<div class="container">
<h1 class="one">My name is</h1><br />
<h1 class="two">Mark Eriksson</h1>
</div>
</div>
</header>
CSS:
PHP:
body {
margin: 0;
padding: 0;
}
.container {
max-width: 960px;
margin: 0 auto;
}
header {
position: relative;
user-select: none;
}
.hero-image {
height: 500px;
position: relative;
}
.hero-image::after {
background-image: linear-gradient(to bottom right, #4fde46, #3962ad, #d66f5b);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
display: block;
opacity: .6;
}
.hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.hero-content {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 100%;
}
.hero-content h1 {
font: 600 68px 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #fff;
margin: 0;
margin-top: -10px;
text-shadow: 0 3px 4px rgba(0, 0, 0, .3);
position: relative;
overflow: hidden;
display: inline-block;
text-transform: uppercase;
}
.hero-content h1.one::before,
.hero-content h1.two::before {
position: absolute;
top: 0; left: 0;
width: 0%;
height: 100%;
content: '';
display: block;
animation: header-anim 1.3s cubic-bezier(0.85, 0.01, 0.46, 1.46);
}
.hero-content h1.one::before {
background-color: #b75744;
}
.hero-content h1.two::before {
background-color: #2d4469;
}
@keyframes header-anim {
30% {
left: 0;
width: 0%;
}
80% {
left: 0;
width: 100%;
}
100% {
left: 100%;
width: 0%;
}
}