Parallax text?

[ennis214]

Hello everyone in theme co, X Theme is the best theme I have ever seen, thank you for creating such wonderful theme.
I am trying to achieve the same effect in https://www.claimsocialauthority.com/our-services/
The section with
"
OUR SERVICES
WHAT WE DO?
"
I am pretty sure it can be done with rev. slider.
But instead is there a easier, faster solution to achieve this effect?
Thank you so much!

[Joao]

Hi There,

Unfortunately this loading effect of the redline loading is not a feature offered by X.

It may be possible to achieve with Revolution Slider, but I am not 100% sure.

You would need to explore yourself.

Thanks for understanding.

[ennis214]

I am not refering to the loading effect but the content after it.
Thank you for your reply!

[friech]

Hi There,

The section’s background-image has a parallax option but regretfully not for the text/headline. While that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

You can use the HTML, JS, and CSS markup provided here: https://gist.github.com/pascalmaddin/5756515

Hope it helps,
Cheers!

[ennis214]

Thank you so much friech!
This is exactly what I wish to achieve.
But I have a little problem with a line of code not working.

jQuery(document).ready(function($) {
$(document).scroll(function() {
var scrollPos = $(this).scrollTop();
$(’#banner-text’).css({
’top’ : (scrollPos/3)+‘px’,
‘opacity’ : 1-(scrollPos/510)
});
});
});

The line ‘top’ : (scrollPos/3)+‘px’, seems not working.
Every line except this is working fine.
Can you please offer me a little help here?
Thank you so much.
Site and credential attached in secure note*

[ruenel]

Hello There,

Thanks for writing in! The JS code maybe valid and correct. I have checked your page and I could find any element that has an ID of banner or banner-text. Could you please clarify where you want to apply this code? Please provide a url.

Thank you.

[ennis214]

Hi!
The page is http://finiteimedia.com/services/

This is the part i’m trying to work on.
Thank you so much

[rad]

Hi there,

What you implemented is just a javascript, it requires CSS too, which is provided from given sample.

But even if you add the CSS, it will still faulty, because the given code in the sample will only work on that view, there are many devices and you also need to consider responsiveness and text scaling. You 'll need further complex customization to implement it without any bug in every device.

Though, I’ll provide you the CSS you need just for this one, but this is not gonna work on other devices or even on new updates. And you may contact a developer to enhance it further.

/* Please add this to your global custom CSS */

    .page-id-78 .masthead {
    height: 0px;
    }
    .page-id-78 #banner {
     padding: 0px !important;   
     margin: 0px !important;
     padding-bottom: 40% !important;
     position: relative;
     height: 0px;
    }
.page-id-78 #banner #banner-text {
position: absolute;
text-align: center;
width: 100%;
padding: 12% 0 !important;
}

And of course, implement the javascript

jQuery(document).ready(function($) {
$(document).scroll(function() {
var scrollPos = $(this).scrollTop();
$('#banner-text').css({
'top' : (scrollPos/3)+'px',
'opacity' : 1-(scrollPos/510)
});
});
});

Thanks.

[ennis214]

Omg its working flawlessly.
Thank you so much for spending your time helping me to fix the code!
Much love<3

[Joao]

Glad to hear we managed to help.!