Hello, I have an overlay interaction that I did following exactly these steps:
The problem is that I want to be able to share a link that goes directly to this overlay.
Right now, as the overlay appears on the same screen, there is no different URL to access directly the overlay content.
Please could you be more specific in explaining what it is you are wanting from the animation sorry I’m a little confused. If you link to a similar example that would be great.
If you click on any of the images, an overlay will appear. What I want to do is to create a different page for this overlay so I can have a different URL that goes directly to this overlay. The way I’m doing now, the overlay has the same URL as the initial screen.
So you mean you want the images to take you to a new page?
If so, then you would do this by putting the image in a link block instead of a div block and then having the link set up to take you to your desired url.
But I want to keep the overlay animation happening on the same page, I don’t want a different page to load.
Here is a good example of what I’m trying to do:
Click on any of the projects images they have, it will show an overlay, but this overlay has its own URL. It’s not loading at the previous home screen.
I think it may be possible to recreate a similar effect by hiding/showing various elements on the top layer and then changing the positioning of the elements on the bottom layer to fixed using interactions, and then setting up the url extensions to take the user to a specific section.
The problem is that since I have various elements hidden on the top layer, the loading time is too long because the page is loading all the content at the same time.
That’s why I wanted to have these overlays as separate URLs, doing so I could load its content only when the overlay is shown.
What you want to do is to load the contents of another page inside an element on your site. This is normally handled with custom code using Ajax. Since jQuery is already loaded on your site by Webflow you can use the load method which makes this pretty easy.
Hello @webdev, thanks for your reply.
Would you mind yo help me setting up this? I’m sorry, but my knowledge is very limited with these custom scripts.
For what I understand I should have the content I want to show on a separate page of my website, right? And then I create a div block on the page I want to show this other page content using this AJAX script to load exactly this other content into this div block?
I’m sure you can find some tutorials via Google on how to use that method. As an alternative you could post to the Freelance category and hire some help. Coding is something I do to earn a living and I don’t work for free.