Fade in complete sections

[Talmon]

Hey guys,

I was wondering if the built-in fade in functionality that is present on columns could be applied to complete sections?
Mainly because the background is larger than the column (ie. the same size as the complete section) and I would like the background to fade in the same way as the content.

The page in question is https://storyteq.com/cases/
Every ‘case’ you see is a section of its own to keep it easilly managable. But creating a fade on scrolling down would make it a lot more appealing.

It would be much appreciated.

Cheers.

[paul.r]

Hi,

Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

I suggest instead of fading it, you can activate parallax to your sections elements.

Thanks for understanding. Take care!

[JvP]

May I kindly suggest something?

When you come across a post like this you could offer to mark it as a feature suggestion?

The fading functionality is already present in the theme so extending it to other parts isn’t too far fetched.

Just an idea

[ruenel]

Hello There,

Thanks for updating this thread! We certainly appreciate the feedback! This is something we can add to our list of feature requests. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive.

Thanks!

[Talmon]

Thanks for the replies.
I understand this is outside regular support, but as JvP suggested, this would be a great feature request.

My question is answered and this ticket can be closed
Cheers!

EDIT:
I already fixed it!

Add a class to a section (hideme)

In css add
.hideme
{
opacity:0;
}

in JS add

/* Every time the window is scrolled ... */
jQuery(window).scroll( function(){

 /* Check the location of each desired element */
    jQuery('.hideme').each( function(i){
        
        var bottom_of_object = jQuery(this).offset().top + jQuery(this).outerHeight();
      	console.log()
        var bottom_of_window = jQuery(window).scrollTop() + (jQuery(window).height()*1.5);
        
        /* If the object is completely visible in the window, fade it it */
        if( bottom_of_window > bottom_of_object ){
            
            jQuery(this).animate({'opacity':'1'},500);
                
        }
        
    }); 

});

You can tweak when they fade in by altering the equasion (jQuery(window).height()*1.5);

Cheers guys!

[lely]

Hi There,

Glad you have figure this out and thank you for sharing the solution.

Cheers!