Событие при попадании элемента в поле зрения пользователя

Question

Событие при попадании элемента в поле зрения пользователя. Как запустить это скрипт при попадании элемента в поле зрения пользователя?

$('.skill-per').each(function(){
    var $this = $(this);
    var per = $this.attr('per');
    $this.css("width",per+'%');
    $({animatedValue: 0}).animate({animatedValue: per},{
      duration: 1000,
      step: function(){
        $this.attr('per', Math.floor(this.animatedValue) + '%');
      },
      complete: function(){
        $this.attr('per', Math.floor(this.animatedValue) + '%');
      }

    });

  });

Answer 1

$(window).scroll(function() {
  var top = $(window).scrollTop();
  var height = $(window).height();
  var set = $('.skill-per').offset().top;
  var outerHeight = $('.skill-per').outerHeight();
  var dheight = $(document).height();
  if (top + height >= set || top + height == dheight || outerHeight + set < top) {

    //Событие когда элемент становится видимым
    $('.skill-per').animate({
      width: "70%",
      left: "10%"
    }, 1500);

  }
});

section {
  height: 2000px;
  position: relative;
}

.one { background-color: chocolate; }
.two { background-color: mistyrose; }
.three { background-color: bisque; }

.skill-per {
  position: absolute;
  top: 200px;
  left: 20px;
  width: 100px;
  height: 100px;
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="one"></section>
<section class="two"><div id="skill-per" class="skill-per"></section>
<section class="three"></section>

Update:

Скажите пожалуйста как это применить если у меня вот такой код. Буду очень благодарен за ответ. codepen.io/CrazyRoman/pen/JjYWgzL
Roman

$(window).scroll(function() {
  var top = $(window).scrollTop();
  var height = $(window).height();
  var set = $('.skill-per').offset().top;
  var outerHeight = $('.skill-per').outerHeight();
  var dheight = $(document).height();
  if (top + height >= set || top + height == dheight || outerHeight + set < top) {

    //Событие когда элемент становится видимым
    $('.skill-per').each(function() {
      var $this = $(this);
      var per = $this.attr('per');
      $this.css("width", per + '%');
      $({
        animatedValue: 0
      }).animate({
        animatedValue: per
      }, {
        duration: 1000,
        step: function() {
          $this.attr('per', Math.floor(this.animatedValue) + '%');
        },
        complete: function() {
          $this.attr('per', Math.floor(this.animatedValue) + '%');
        }
      });
    });

  }
});

section {
  height: 2000px;
  position: relative;
}

.one {
  background-color: chocolate;
}

.two {
  background-color: mistyrose;
}

.three {
  background-color: bisque;
}

.skills {
  width: 100%;
  background: #000000;
  padding-top: 11px;
  padding-bottom: 11px;
  height: 450px;
}

.skill-name {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 20px 30%;
  color: #fff;
}

.skill-bar {
  height: 20px;
  background: #ffffff;
  border-radius: 8px;
  position: center;
  max-width: 40%;
  margin-left: auto;
  margin-right: auto;
}

.skill-per {
  height: 20px;
  background-color: #fc5c65;
  border-radius: 8px;
  width: 0;
  transition: 1s linear;
  position: relative;
}

.skill-per::before {
  content: attr(per);
  position: absolute;
  padding: 4px 6px;
  background-color: #fff;
  color: #fc5c65;
  font-size: 12px;
  border-radius: 4px;
  top: -35px;
  right: 0;
  transform: translateX(50%);
}

.skill-per::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #fff;
  top: -16px;
  right: 0;
  transform: translateX(50%) rotate(45deg);
  border-radius: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="one"></section>
<section class="two">
  <div class="skills ">
    <div class="skill">
      <div class="skill-name">HTML</div>
      <div class="skill-bar">
        <div class="skill-per" per="100"></div>
      </div>
    </div>

    <div class="skill">
      <div class="skill-name">CSS</div>
      <div class="skill-bar">
        <div class="skill-per" per="95"></div>
      </div>
    </div>

    <div class="skill">
      <div class="skill-name">Javascript</div>
      <div class="skill-bar">
        <div class="skill-per" per="20"></div>
      </div>
    </div>

    <div class="skill">
      <div class="skill-name">PHP</div>
      <div class="skill-bar">
        <div class="skill-per" per="10"></div>
      </div>
    </div>

    <div class="skill">
      <div class="skill-name">C#</div>
      <div class="skill-bar">
        <div class="skill-per" per="50"></div>
      </div>
    </div>
  </div>
</section>
<section class="three"></section>

БЛОГ НА HUSL

Событие при попадании элемента в поле зрения пользователя

Ответы (1 шт):