Is there any class name I can add to a header or div to add the hover effects the footers have? I know that certain things like giving it a link class will make it grow or adding hide-ball will make it hide. But is there any option like this for the ball to display text?
(See attachments) I want this, but not solely restricted to the footer.
Thanks a lot! Added a custom function, so I can use it the same as the has-hover-image! I had one other question, even tho it's a bit off-topic. How do I fix using has-mask-fill at the bottom of a page? It for some reason never fills up completely. Is there anywhere where I could add an offset or something around those lines?
You have to help me a bit here, which has-mask-fill effect - can you send us the page URL (it can be from our live demo site as well), maybe a screenshot?
Yeah, sure! Here is an example of what I mean on the home page:
I'm using the following for the page build:
BjornV: Text Section is a custom-made block, don't worry about it. I added the class="has-mask-fill" to the individual text sections, so it fills in from left to right when scrolling down. But when you reach the bottom of a page, there is not enough space to fill in the text completely. This is probably because the text doesn't reach the center of the screen.
I've seen the code that handles this in the core/js/common.js
now the simple solution is to change (what I did for now) the normal
end: () => `+=${hMaskFill.offsetHeight * 1.5}` to something like end: () => `+=${hMaskFill.offsetHeight * 1.8}` adding a little offset, but this also makes every single one have an offset what just seems off when visiting the site. Especially when dealing with other resolutions.
So I was wondering if there is any way (that is already implemented) that adds a small bottom/footer offset too these effects?
Seem to have found it out myself! Added some really simple lines to the common.js, I honestly have noo idea why I didn't think of this sooner. Thanks for your time anyways!
For those who want to know how I did it:
I added startOffset and endOffset. These can easily be edited in the HTML by adding the 2 data tags: data-start-offset="1.5" & data-end-offset="85".
I added these settings to my custom block like this:
Is there any class name I can add to a header or div to add the hover effects the footers have? I know that certain things like giving it a link class will make it grow or adding hide-ball will make it hide. But is there any option like this for the ball to display text?
(See attachments) I want this, but not solely restricted to the footer.
Thanks already!
Attached files: Screenshot 2023-12-14 162824.png
Hi Bjorn,
we can give you some technical details.
When, for example, the bottom page navigation is hovered, you need to look to the dynamic js effects.
in /js/scripts.js (path relative to the root theme folder, follow the line numbers in the screenshot)
https://prnt.sc/h1VCz_QwvSyV
you can see there that when the next page title is hovered there is a paragraph added and a CSS class 'with-blur' to the div id ball.
The rest is configured in css files for these specific elements.
So to conclude: you need to handle mouseenter, mouseleave events and the mouse ball wrapper is <div id="ball">
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
Thanks a lot! Added a custom function, so I can use it the same as the has-hover-image! I had one other question, even tho it's a bit off-topic. How do I fix using has-mask-fill at the bottom of a page? It for some reason never fills up completely. Is there anywhere where I could add an offset or something around those lines?
Hello Bjorn,
You have to help me a bit here, which has-mask-fill effect - can you send us the page URL (it can be from our live demo site as well), maybe a screenshot?
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
Yeah, sure! Here is an example of what I mean on the home page:
I'm using the following for the page build:
BjornV: Text Section is a custom-made block, don't worry about it. I added the class="has-mask-fill" to the individual text sections, so it fills in from left to right when scrolling down. But when you reach the bottom of a page, there is not enough space to fill in the text completely. This is probably because the text doesn't reach the center of the screen.
I've seen the code that handles this in the core/js/common.js
now the simple solution is to change (what I did for now) the normal
end: () => `+=${hMaskFill.offsetHeight * 1.5}` to something like end: () => `+=${hMaskFill.offsetHeight * 1.8}` adding a little offset, but this also makes every single one have an offset what just seems off when visiting the site. Especially when dealing with other resolutions.
So I was wondering if there is any way (that is already implemented) that adds a small bottom/footer offset too these effects?
Seem to have found it out myself! Added some really simple lines to the common.js, I honestly have noo idea why I didn't think of this sooner. Thanks for your time anyways!
For those who want to know how I did it:
I added startOffset and endOffset. These can easily be edited in the HTML by adding the 2 data tags: data-start-offset="1.5" & data-end-offset="85".
Hey Bjorn, good stuff. We will definitely leave this ticket Public
P.S. We are glad to see that our code is the starting point for even better customizations!
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy