Getting zoom parallax css and javascript to work in Pro

Support
#1

Hi, I am trying to get some css and javascript working in Pro to zoom in on a background image on scroll. I have it working on a non-pro page but I can’t get it to display properly in Pro. Both pages call upon the same header. Although it is invisible it does call the javascript. The CSS is global.

Here is the page that works https://kathryncostello.com/parallax-test2/

Here is the Pro version. It’s calling the css and javascript but the display is really wonky. See the bottom of the page (section 7). https://kathryncostello.com/parallax-test/

#2

Hello @kcostellomak,

Thanks for writing in!

Are you the one who created the code for the parallax and the javascript? It is best that you review the code and make sure that you have the same structure for the test pages. I noticed that the working code code do not have extra sections. It is best that the page should have the same height.

Kindly let us know how it goes.

#3

No I searched for the code on the web with only minimal changes to get it to work on a WP page. Does it mean that I can’t use it on a Pro page because of Pro’s built in structure?

What I really want is a way to have a Pro section background image zoom in/out when scrolling. Like this https://kathryncostello.com/parallax-test3/

#4

Hi @kcostellomak,

I checked your Pro page and the zoom in/out effect on scroll and it works fine. The reason it’s not effective on the Pro page is because the section you’ve applied the zoom effect is quite down the page and when the page is scrolled down to the section it already zooms in enough that it looks ineffective.

Try applying the zoom in/out scroll effect on your first section and it will work as expected in Pro.

Hope this helps!

#5

That explains it! But is there a way to get it start scrolling only when it’s visible similar to how section parallax image behave? I want to have the ability to add these to many sections on a page and at any point.

#6

Hey @kcostellomak,

This 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 / Pro is quite extensible with child themes, so there are plenty of possibilities.

Keeping your need in mind It’s best that you use the native parallax functionality of the sections instead (see https://theme.co/docs/creating-layouts#background-parallax). This will avoid the custom scripting which could break in future.

Thanks for understanding. Take care!

#7

hey kcostellomak,

this effect is very cool (https://kathryncostello.com/parallax-test3/) . can you explain how you get it worked? i tried some code snippets from codepen.io but it does not work for me.

thanks in advance
harry

#8

Sure @deranaloge. I found the source code here https://www.123link.biz/9PQx9Dug

#9

Hey @kcostellomak,

It’s good to know that you found a code that works out for you.

Regards.

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.