1

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

$(function() {
$('.person').css({'margin-left':'50px'});
  $(window).on('scroll', function(e) {
    if ($(window).scrollTop() > $('.person').offset().top - $(window).height()) {
      $('.person').css({'margin-left':'10px'});
    }
  });
});
.person {
  margin-left: 10px;
  transition: margin-left .4s;
}
p {
  height: 700px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p></p>
<div class="person"><img alt="" src="https://i02.fotocdn.net/s16/240/gallery_xs/254/54328815.jpg"></div>
<p></p>

1
  • Наверное, я что-то не понимаю, но пример, который вы выложили, работает так, как вы описываете в коде. Смена margin-left происходит ровно тогда, когда скрол достигает верха картинки (4 строка вашего js ). Видимо если подкорректировать эту строку на чуть выше (например высоту картинки), то получим то что нужно.
    – alexoander
    14 сен 2016 в 6:21

2 ответа 2

1

       $(function() {
         var person = $('.person');
         person.css({
           'margin-left': '50px'
         });
         $(window).on('scroll', function(e) {
           var h = ($(window).height() - person.height()) / 2;
           if ($(window).scrollTop() + h > $('.person').offset().top) {
             $('.person').css({
               'margin-left': '10px'
             });
           }
         });
       });
.person {
  margin-left: 10px;
  transition: margin-left .4s;
}
p {
  height: 700px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p></p>
<div class="person">
  <img alt="" src="https://i02.fotocdn.net/s16/240/gallery_xs/254/54328815.jpg">
</div>
<p></p>

0
1

$(window).scrollTop() + $('.person').height() > $('.person').offset().top

$(function() {
  $('.person').css({
    'margin-left': '50px'
  });
  $(window).on('scroll', function(e) {
    if ($(window).scrollTop() + $('.person').height() > $('.person').offset().top) {
      $('.person').css({
        'margin-left': '10px'
      });
    }
  });
});
.person {
  margin-left: 10px;
  transition: margin-left .4s;
}
p {
  height: 700px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p></p>
<div class="person">
  <img alt="" src="https://pp.vk.me/c4966/u79190808/a_98aeef27.jpg">
</div>
<p></p>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.