I have attached a screenshot below. Let me explain it in a bit more detail.
The image on the left works but the image on the right is the one that does not currently work.
I have been currently hard coding everything for this page until I know it is working, once it is working I will convert it all into proper liquid code.
<script type="text/javascript">
jQuery(document).ready(function($) {
//parallax scroll
$(window).on("load scroll", function() {
var parallaxElement = $(".image1"),
parallaxQuantity = parallaxElement.length;
window.requestAnimationFrame(function() {
for (var i = 0; i < parallaxQuantity; i++) {
var currentElement = parallaxElement.eq(i),
windowTop = $(window).scrollTop(),
elementTop = currentElement.offset().top,
elementHeight = currentElement.height(),
viewPortHeight = window.innerHeight * 0.5 - elementHeight * 0.5,
scrolled = windowTop - elementTop + viewPortHeight;
currentElement.css({
transform: "translate3d(0," + scrolled * -0.35 + "px, 0)"
});
}
});
});
});
</script>
<style type="text/css">
.title{
text-align:center;
}
.dummytext{
max-width:50%;
text-align:center;
margin:0 auto;
}
.image1 img{
margin-top: -175px;
height:500px;
max-height: 10%;
object-fit: contain;
overflow: hidden;
}
.image2 img{
height: 500px;
position: absolute;
right: 20px;
}
</style>
{% schema %}
{
"name": "Text Box",
"settings": [
{
"id": "text-box-title",
"type": "text",
"label": "Heading",
"default": "Title"
},
{
"id": "text-box-content",
"type": "text",
"label": "Text",
"default": "Text"
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
<div class="container">
<div class="title">
<h1>Title Text</h1>
</div>
<div class="dummytext">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor ultricies mi, quis feugiat nibh. Praesent eget porta magna. Praesent vitae pretium nulla. Pellentesque tincidunt quam rhoncus quam viverra hendrerit. Donec quis ligula scelerisque libero blandit condimentum. Aenean ultricies sem rutrum, commodo massa vel, pellentesque ligula. Fusce ex tellus, fermentum vel egestas viverra, rhoncus id ipsum. Sed et aliquam lectus. Nulla accumsan mi nec ultrices tristique.</p>
</div>
<div class="image1">
<img src="https://cdn.shopify.com/s/files/1/0569/5189/8319/files/power-lines-under-blue-and-pink-sky.jpg?v=1621352237"/></div>
<div class="image2">
<img src="https://cdn.shopify.com/s/files/1/0569/5189/8319/files/wonton-appetizer.jpg?v=1621340972"/></div>
</div>
So with that in mind how do I make the image on the right move up on scroll?
2
Answers
OK so I was able to solve it, horray!
The code now looks like:
According to my experience working on Shopify $(document).ready doesn’t work properly. I mean, all elements are supposed to be prepared in the function but it didn’t. So I suggest to put your scroll function part into setTimeout function, so it can be executed 2 or 3 seconds after page is fully loaded for a test. If it works, then let me know, I can give you trick 🙂