Menu
Forums
All threads
Latest threads
New posts
Trending threads
New posts
Search forums
Trending
What's new
New posts
New profile posts
Latest activity
Members
Current visitors
New profile posts
Search profile posts
Upgrades
Log in
Register
What's new
Search
Search
Search titles only
By:
All threads
Latest threads
New posts
Trending threads
New posts
Search forums
Menu
Log in
Register
Navigation
Install the app
Install
More options
Contact us
Close Menu
Forums
Software Development
Programming
Simple Hero Header Animation
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Reply to thread
Message
<blockquote data-quote="Markshall" data-source="post: 440829" data-attributes="member: 1872"><p>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.</p><p></p><p></p><p>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.</p><p></p><p>This is the result, feel free to use if you want.</p><p></p><p><a href="https://codepen.io/Markshall/pen/eQWazq" target="_blank">https://codepen.io/Markshall/pen/eQWazq</a></p><p></p><p>HTML:</p><p>[PHP]<header></p><p> <div class="hero-image"></p><p> <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" /></p><p> </div></p><p></p><p> <div class="hero-content"></p><p> <div class="container"></p><p> <h1 class="one">My name is</h1><br /></p><p> <h1 class="two">Mark Eriksson</h1></p><p> </div></p><p> </div></p><p></header>[/PHP]</p><p></p><p>CSS:</p><p>[PHP]body {</p><p> margin: 0;</p><p> padding: 0;</p><p>}</p><p></p><p>.container {</p><p> max-width: 960px;</p><p> margin: 0 auto;</p><p>}</p><p></p><p>header {</p><p> position: relative;</p><p> user-select: none;</p><p>}</p><p></p><p>.hero-image {</p><p> height: 500px;</p><p> position: relative;</p><p>}</p><p></p><p>.hero-image::after {</p><p> background-image: linear-gradient(to bottom right, #4fde46, #3962ad, #d66f5b);</p><p> position: absolute;</p><p> top: 0;</p><p> left: 0;</p><p> width: 100%;</p><p> height: 100%;</p><p> content: '';</p><p> display: block;</p><p> opacity: .6;</p><p>}</p><p></p><p>.hero-image img {</p><p> width: 100%;</p><p> height: 100%;</p><p> object-fit: cover;</p><p> object-position: center;</p><p>}</p><p></p><p>.hero-content {</p><p> position: absolute;</p><p> top: 50%;</p><p> transform: translateY(-50%);</p><p> left: 0;</p><p> width: 100%;</p><p>}</p><p></p><p>.hero-content h1 {</p><p> font: 600 68px 'Helvetica Neue', Helvetica, Arial, sans-serif;</p><p> color: #fff;</p><p> margin: 0;</p><p> margin-top: -10px;</p><p> text-shadow: 0 3px 4px rgba(0, 0, 0, .3);</p><p> position: relative;</p><p> overflow: hidden;</p><p> display: inline-block;</p><p> text-transform: uppercase;</p><p>}</p><p></p><p>.hero-content h1.one::before,</p><p>.hero-content h1.two::before {</p><p> position: absolute;</p><p> top: 0; left: 0;</p><p> width: 0%;</p><p> height: 100%;</p><p> content: '';</p><p> display: block;</p><p> animation: header-anim 1.3s cubic-bezier(0.85, 0.01, 0.46, 1.46);</p><p>}</p><p></p><p>.hero-content h1.one::before {</p><p> background-color: #b75744;</p><p>}</p><p></p><p>.hero-content h1.two::before {</p><p> background-color: #2d4469;</p><p>}</p><p></p><p>@keyframes header-anim {</p><p> 30% {</p><p> left: 0;</p><p> width: 0%;</p><p> }</p><p></p><p> 80% {</p><p> left: 0;</p><p> width: 100%;</p><p> }</p><p></p><p> 100% {</p><p> left: 100%;</p><p> width: 0%;</p><p> }</p><p>}[/PHP]</p></blockquote><p></p>
[QUOTE="Markshall, post: 440829, member: 1872"] 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. 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. [URL]https://codepen.io/Markshall/pen/eQWazq[/URL] 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>[/PHP] 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%; } }[/PHP] [/QUOTE]
Insert quotes…
Verification
Post reply
Forums
Software Development
Programming
Simple Hero Header Animation
Top