- This topic has 19 replies, 4 voices, and was last updated 2 years, 2 months ago by David.
-
AuthorPosts
-
August 25, 2022 at 1:46 am #2323221Johan
Hi guys
This guy, https://www.samunderwood.co.uk/, built some cool underlining on his headers.
I would like to have this on my landing page on the H2s. How do do I this?Thx.
August 25, 2022 at 2:00 am #2323230Fernando Customer SupportHi Johan,
You can try adding class
add-underline-animation
to the class list of the Headline Block, and then add this CSS:h2.add-underline-animation:after { height: 10px; content: ""; background-color: #dd0f0f; position: absolute; left: 0; top: 60%; z-index: -1; width: 100%; animation: 1s ease-out 0s 1 fillInFromLeft; } h2.add-underline-animation { position: relative; z-index: 20; } @keyframes fillInFromLeft { 0% { width: 0; } 100% { width: 100%; } }
You can modify the values to your preference.
August 25, 2022 at 2:05 am #2323232JohanThat is perfect. But how do I do to start the animation when you scroll to the section?
And, on mobile it does not fill under all the words, only the last line.August 25, 2022 at 3:23 am #2323303DavidStaffCustomer SupportHi there,
that site uses Javascript for its animated underlines.
And this is the Script it runs:/* JS for header underline */ // Options docs: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options const options = { root: null, // use the document's viewport as the container rootMargin: '0px', // % or px - offsets added to each side of the intersection threshold: 0.5 // percentage of the target element which is visible } // Callback docs: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Targeting_an_element_to_be_observed let callback = (entries) => { entries.forEach(entry => { // If entry (box) is visible - according with the params set in <code>options</code> // then adds <code>isVisible</code> class to box // otherwise removes <code>isVisible</code> class if(entry.isIntersecting) { entry.target.classList.add('animate-underline'); } else { entry.target.classList.remove('animate-underline'); } }); } // Create the intersection observer instance by calling its constructor and passing it a // callback function to be run whenever a threshold is crossed in one direction or the other: let observer = new IntersectionObserver(callback, options); // Get all the <code>.box</code> from DOM and attach the observer to these document.querySelectorAll('.underline:not(.a-underline)') .forEach(animateUnderline => { observer.observe(animateUnderline) });
Add that to your site inside some
<script></script>
tags using awp_footer
hook in a GP Hook Element.
And then add theunderline
CSS class to any Block you want to observe.
When a block is in viewport the script will add theanimate-underline
class to the block, which can then be used for your animation CSS.August 25, 2022 at 11:33 am #2323908JohanThanks David!
So, I removed the CSS given from Fernando.
I added the script to a hook and the display rule to “Front Page”.
Then I added “underline” to the CSS in the editor to the headline block. Nothing happens..
I guess I am missing something here.August 25, 2022 at 11:49 am #2323919YingStaffCustomer SupportYou still need the CSS from Fernando, but replace the class
add-underline-animation
withanimate-underline
.August 26, 2022 at 1:34 am #2324301JohanThanks Ying. I tried that, but it still doesn’t work.
What have I missed?Thanks for all the help. You guys are super!
August 26, 2022 at 3:38 am #2324396DavidStaffCustomer SupportRemover Fernandos CSS and add this:
.underline { display: inline-block; background-repeat: no-repeat; background-image: linear-gradient(180deg,#ff0000 0%,#ff0000 100%); background-size: 0% 18%; background-position: 0 89%; transition: background-size .8s ease-in-out; margin: 0 -3px; padding: 0 3px; font-style: normal; will-change: background-size; } .underline:is(.animate-underline) { background-size: 100% 18%!important; transition-delay: .4s!important; }
NOTES:
This line:
display: inline-block;
This makes it so the underline spans only the text.
It however means you can’t center the headline, you would need to text align center the container it is in.This line:
background-image: linear-gradient(180deg,#ff0000 0%,#ff0000 100%);
Change the 2 instances of#ff0000
to your brand color.August 26, 2022 at 12:17 pm #2325021JohanThanks David. Removed Fernandos CSS and added yours. Added “underline” as a Additional CSS Class on the headline block. Nothing still happens. Sorry, I thought this was going to be an easy one!
August 26, 2022 at 12:27 pm #2325023YingStaffCustomer SupportHow did you add the CSS?
August 26, 2022 at 12:28 pm #2325026JohanApperance – Customize – Additional CSS
August 26, 2022 at 12:31 pm #2325028YingStaffCustomer SupportIt seems you’ve added a piece of PHP code into the additional CSS field, can you remove that PHP code?
For how to add PHP code:https://docs.generatepress.com/article/adding-php/
August 26, 2022 at 12:34 pm #2325032JohanWehey! That was it. Thanks!
But, when I look at the animation on my mobile it is just one large underline below the heading. It doesnt underlines under the different heading words. Any way to fix that?August 26, 2022 at 1:11 pm #2325051YingStaffCustomer SupportBecause the class is added to the entire H2 as per your request in your original topic.
If you only want the underline add to certain words, select the word and set it to highlight:
https://www.screencast.com/t/jdjAROEN8LjThen change the CSS selector
.underline
to:.underline mark
,.underline:is(.animate-underline)
to.underline:is(.animate-underline) mark
.August 26, 2022 at 1:54 pm #2325072JohanHi! Thanks. We are getting there. If I highlight all the words, I still only get the underline below on mobile.
Works on desktop! -
AuthorPosts
- You must be logged in to reply to this topic.