Shopify themes, liquid, logos, and UX
Hi, you great people. I have kind of a big request for y'all, but i am really hoping someone here can help me find the solution. So, the situation is, i am trying to make a specefic kind of transition on my homepage on my website.
Just before the footer, i want to have an image. If you continue scrolling down, it will then begin zooming in on that picture, before it reaches a static colour. When it reaches a colour, i want that colour to become the background colour, when you zoom further down and read more on my home page. So, it is basicly just a change in background colour, performed by zooming into a picture.
I have searched far and wide on the internet, but i just cant find anybody that has come up with the solution to the exact thing i want. So, does any of you have the solution.
Thanks!
To achieve the specific transition you described on your homepage, you would need to apply some custom coding and utilize JavaScript or CSS animations. Here's a general outline of the steps you can take:
Prepare the image: Start by selecting or creating the image you want to use for the transition. Make sure it has a high resolution and suits your design requirements.
Structure your HTML: Create the necessary HTML structure for your homepage, including the section where the transition will occur. Ensure that the section has an appropriate height and is positioned correctly on the page.
Apply CSS styles: Use CSS to set the initial background color, sizing, and positioning for the section. You can also set the background image as the initial background for the section.
Hi @dkshades
This is doable. You need to have scroll listener for this. Unfortunately, you need to hire a developer to write the javascript code.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024