JQuery 與 Shopify

Question

我在下面附上了截圖。 讓我更詳細地解釋一下。

左邊的圖像有效，但右邊的圖像是當前不起作用的圖像。

我目前一直在為這個頁面的所有內容進行硬編碼，直到我知道它正在工作，一旦它工作，我會將它全部轉換成適當的液體代碼。

 <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>

因此，考慮到這一點，我如何使右側的圖像在滾動時向上移動？

Answer 1

根據我在 Shopify $(document).ready上工作的經驗，無法正常工作。 我的意思是，所有元素都應該在 function 中准備好，但事實並非如此。 所以我建議將你的滾動 function 部分放入 setTimeout function 中，這樣可以在頁面完全加載后 2 或 3 秒執行測試。 如果它有效，那么讓我知道，我可以給你竅門:)

Answer 2

好的，所以我能夠解決它，萬歲！

代碼現在看起來像：

 <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>