Блог

Главная - Вопросы по программированию - jQuery с Shopify

jQuery с Shopify

#jquery #css #shopify #liquid

Вопрос:

Я прикрепил скриншот ниже. Позвольте мне объяснить это немного подробнее.

введите описание изображения здесь

Изображение слева работает, но изображение справа-это то, которое в данный момент не работает.

В настоящее время я усердно кодирую все для этой страницы, пока не узнаю, что она работает, как только она заработает, я преобразую все это в правильный жидкий код.

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

Итак, имея это в виду, как мне сделать так, чтобы изображение справа перемещалось вверх по прокрутке?

Ответ №1:

Согласно моему опыту работы над Shopify $(документ).готовность не работает должным образом. Я имею в виду, что все элементы должны быть подготовлены в функции, но этого не произошло. Поэтому я предлагаю поместить вашу часть функции прокрутки в функцию setTimeout, чтобы ее можно было выполнить через 2-3 секунды после полной загрузки страницы для тестирования. Если это сработает, то дайте мне знать, я могу дать вам трюк 🙂

Ответ №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>
Метки: