Question

大家好，我正在根据右边的适当内容来制作图像动画效果。我有两列布局，其中左列包含图像，右列具有其副本。每个图像的右侧都有自己的副本。当用户滚动文档并到达副本的每个部分时，左侧的图像都必须相应更改。下面是我的代码。任何帮助将不胜感激。

标记

<article class="parallax">
 <section class="parallax__illustration">
   <div class="parallax__image problem slide-in" data-slide="problem"></div>
   <div class="parallax__image context" data-slide="context"></div>
   <div class="parallax__image customer" data-slide="customer"></div>
   <div class="parallax__image vision" data-slide="vision"></div>
   <div class="parallax__image solution" data-slide="solution"></div>
   <div class="parallax__image implementation" data-slide="implementation"></div>
</section>
<section class="parallax__copy">
<div class="parallax__copy--problem" id="problem">
  <h2>The problem</h2>
  <p><strong>What problem are you trying to solve? It’s not always obvious! </strong></p>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</p>
</div>
<div class="parallax__copy--context" id="context">
  <h2>The context </h2>
  <p><strong>What is the full impact of the problem? Who does it impact and how?</strong></p>
  <p> it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
<div class="parallax__copy--customer" id="customer">
  <h2>The customer </h2>
  <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="parallax__copy--vision" id="vision">
  <h2>The vision</h2>
  <p><strong>We will understand your business's goals and ambitions.</strong></p>
  <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia,</p>
</div>
<div class="parallax__copy--solution" id="solution">
  <h2>The solution </h2>
  <p><strong>We will propose a digital solution.</strong></p>
  <p>it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
<div class="parallax__copy--implementation" id="implementation">
  <h2>The implementation </h2>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</p>
</div>
</section>
</article>

脚本

$(window).scroll(function() {
  var sliderCopy = $('.parallax__copy > *');
  sliderCopy.each(function() {
    var windowTop = $(window).scrollTop();
    var idValue = $(this).attr('id');
    var sectionOffset = $(this).offset();
    var sectionTop = sectionOffset.top;
    if (windowTop >= sectionTop) {
      $(".parallax__illustration .slide-in").removeClass('slide-in');
      $(".parallax__illustration div[data-slide='" + idValue + "']").addClass('slide-in');
    }
  });
});

Answer 1

基于this answer，您可以检查屏幕上是否可见某些元素...并更改图像。

JSFiddle

function isInView(elem){
   return $(elem).offset().top - $(window).scrollTop() < $(elem).height() ;
}
$(window).scroll(function(){
     if (isInView($('#problem')))
   {
      $('.parallax__image').removeClass('slide-in');
      $('.problem').addClass('slide-in');
   }
   if (isInView($('#context')))
   {
      $('.parallax__image').removeClass('slide-in');
      $('.context').addClass('slide-in');
   }
   if (isInView($('#customer')))
   {
        $('.parallax__image').removeClass('slide-in');
      $('.customer').addClass('slide-in');
   }
   if (isInView($('#vision')))
   {
        $('.parallax__image').removeClass('slide-in');
      $('.vision').addClass('slide-in');
   }
   if (isInView($('#solution')))
   {
        $('.parallax__image').removeClass('slide-in');
      $('.solution').addClass('slide-in');
   }
   if (isInView($('#implementation')))
   {
        $('.parallax__image').removeClass('slide-in');
      $('.implementation').addClass('slide-in');
   }
});

更新您可以对更新的小提琴使用相同的条件... https://jsfiddle.net/RACCH/ckxwt8zr/

如何根据内容div的顶部偏移量更改图像

1 个答案: