Shopify themes, liquid, logos, and UX
Would love to have images slide in on scroll in the homepage. Here is an example of what i mean: https://www.wowhydrate.com/.
My website is https://24kjuice.co.uk/ and any help is much appreciated!
I've found a css animation cheat sheet here www.justinaguilar.com/animations/index.html but not sure how to implement it in my code.
Having an animation like that is definitely eye catching, but just cause it looks cool doesnt mean it's going to be something that fits your use case. Based on your website, you don't really have the kind of set up to implement the same kind of thing they did. You just don't have enough content set up. If I were you, at the moment I would put that on the backburner and focus more on getting a little more content up.
The way you can add those animations though is by using HTML, CSS, and Javascript. You'll have to add class names to your elements that you want to have slide in, then you'll need to set up the CSS and add a transition property to them for the transform property and the opacity property. Set the transformX to -100% or 100% depending on if they are on the left or right side, and the opacity to 0. Then you'll set up a new class in CSS that will apply an opacity of 1 and transformX to 0.
Then, in javascript you'll set up an intersection observer:
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
When that callback function runs, add the class name that applies the opacity of 1 and the transformX to 0.
It all sounds incredibly complicated, but it's not too much. You just have to have a pretty solid understanding of web development fundamentals. I'd be happy to walk you through it in a little more detail after you're all set up. Feel free to reach out whenever.
Hi,
Just want to share a simple animated image and text section. This animates start when scrolling down. Easy to add without an app or external library. Check video for more info.
ADD THIS TO Custom Liquid and replace the red spots with your image URL and your image click location Also you can change the speed and what percentage of the screen it starts on as well
<!-- Add this style in your <head> section -->
<style>
/* General styles */
.image-container {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
background-color: black;
}
.image-container img {
max-width: 100%;
height: auto;
object-fit: cover;
}
/* Animation keyframes */
@keyframes slideInFromRightDesktop {
to {
left: 0;
opacity: 1;
}
}
@keyframes slideInFromRightMobile {
to {
left: 0;
opacity: 1;
}
}
/* Animation */
.desktop-image.slide-in {
animation: slideInFromRightDesktop 0.7s ease-out forwards; /* Speed for desktop */
position: relative;
left: 15%; /* Adjust starting position for desktop if needed */
opacity: 0;
}
.mobile-image.slide-in {
animation: slideInFromRightMobile 0.7s ease-out forwards; /* Speed for mobile */
position: relative;
left: 50%; /* Adjust starting position for mobile if needed */
opacity: 0;
}
/* Responsive adjustments */
@media screen and (min-width: 1024px) {
.desktop-image { display: block; }
.mobile-image { display: none; }
}
@media screen and (max-width: 1023px) {
.desktop-image { display: none; }
.mobile-image { display: block; }
}
</style>
<!-- Adjust your image tags within the body -->
<div class="image-container">
<a href="CLICKABLE IMAGE URL DESTINATION HERE">
<img src="REPALCE IMAGE VEIW URL HERE" alt="Desktop Banner" class="desktop-image slide-in">
</a>
<a href="CLICKABLE IMAGE URL DESTINATION HERE">
<img src="REPALCE IMAGE URL VIEW HERE" alt="Mobile Banner" class="mobile-image slide-in">
</a>
</div>
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