Shopify Question posted in
The Shopify help center can be found here.

JQuery with Shopify

I have attached a screenshot below. Let me explain it in a bit more detail.

enter image description here

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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    OK so I was able to solve it, horray!

    The code now looks like:

    <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.55 + "px, 0)"
        });
      }
    });
    
    
    var parallaxElement2 = $(".image2"),
      parallaxQuantity2 = parallaxElement2.length;
    window.requestAnimationFrame(function() {
      for (var i = 0; i < parallaxQuantity; i++) {
        var currentElement2 = parallaxElement2.eq(i),
          windowTop2 = $(window).scrollTop(),
          elementTop2 = currentElement2.offset().top,
          elementHeight2 = currentElement2.height(),
          viewPortHeight2 = window.innerHeight * 0.5 - elementHeight2 * 0.5,
          scrolled2 = windowTop2 - elementTop2 + viewPortHeight2;
        console.log(scrolled2);
        currentElement2.css({
          transform: "translate3d(0," + scrolled2 * -0.15 + "px, 0)"
        });
      }
    });
    
  });
});
  </script>
    <style type="text/css">
    
    .title{
    text-align:center;
  }
  .dummytext{
    text-align:center;
    margin:0 auto;
  }
    
   .content-ctn {
    width: 50%;
    padding: 49px;
    position: relative;
    top: -82px;
}
   
   .imgcontainer {
     display: flex;
     align-items: center;
     justify-content: center;
   }
    
  .image1{
    width: 25%;
  }
  
  .image2 {
    width: 25%;
  }
</style>
     <div>       
<div class="imgcontainer">
  <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="content-ctn">
    <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>
    <div class="image2">
    <img src="https://cdn.shopify.com/s/files/1/0569/5189/8319/files/wonton-appetizer.jpg?v=1621340972"/></div>
</div>
</div>


  2. 0

    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 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search