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.
Is there a way to make it happen?
Thanks
Hi,
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.
Also please could you post your read only link?
Hello @cccurtis , here is the read-only link:
https://preview.webflow.com/preview/912c508428bdd7f5d6a5dae496?utm_medium=preview_link&utm_source=designer&utm_content=912c508428bdd7f5d6a5dae496&preview=9f4368124d76c3875fdb1f580398b4f7&mode=preview
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.
Let me know if it’s clear to understand now.
Thanks.
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.
Hello @cccurtis, thanks for your answer.
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.
Let me know if you understand it.
Ah yes, I see now.
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.
Hello @cccurtis what you mean by ‘setting up the URL extensions to take the user to a specific section’?
Hiding/showing various elements on the top layer is exactly what I’m doing, in terms of interaction, I already achieved what I wanted to do.
Check my read-only version:
https://preview.webflow.com/preview/912c508428bdd7f5d6a5dae496?utm_medium=preview_link&utm_source=designer&utm_content=912c508428bdd7f5d6a5dae496&preview=9f4368124d76c3875fdb1f580398b4f7&mode=preview
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?
Your help is very appreciated
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.
Alright.
Even using this method, it seems that I won’t be able to attribute a different URL for this overlay though.