Show DevBest Simple Hero Header Animation

[Markshall]

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.

Why have I used inline-block H1 tags and then done a line break to separate them?

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.

This is the result, feel free to use if you want.

You must be registered for see links

HTML:

<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:

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%;
    }
}