Initiate an animation upon reaching a designated element using Jquery scroll event

Question

Initiate an animation upon reaching a designated element using Jquery scroll event

Hey there! I've been trying to create an animation without using any plugins, but unfortunately, I haven't had much luck so far.

Here's the code I've been working on. If anyone can help me figure this out, I'd really appreciate it!

I'm hoping to get the animation to start only when the user scrolls down to a certain point. You can find my codepen here: https://codepen.io/abcari/pen/pdyPjy

$(window).scroll(function () {

    if ($(".skill-level").is(".htcss:visible")) {

        $(".htcss").animate({ width: $(".htcss").data('width') + "%" }, 
2500);

    }
});

jquery html css

Answer 1

Answer №1

Here is a more straightforward example:

$(window).on("scroll", function(){
  if($(window).scrollTop() + $(window).height() - 100 >= $(".target").offset().top){
    alert("You have reached the target");
  }
})

body{
  padding-top: 150vh;
}

.target{
  background: blue;
  width: 100%;
  height: 50px;
  margin-bottom: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="target">
</div>

Answer 2

Here is a more straightforward example:

$(window).on("scroll", function(){
  if($(window).scrollTop() + $(window).height() - 100 >= $(".target").offset().top){
    alert("You have reached the target");
  }
})

body{
  padding-top: 150vh;
}

.target{
  background: blue;
  width: 100%;
  height: 50px;
  margin-bottom: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="target">
</div>

Initiate an animation upon reaching a designated element using Jquery scroll event

Answer №1

Similar questions

Choose content within an HTML tag and modify its appearance

Menu options are unresponsive to clicks in the dropdown

Determine the number of lines in a textarea, taking into account both manual

Ways to send a JSON object to an MVC controller

What could be causing my Leaflet popup to suddenly close?

I keep receiving an error message when trying to use slide() in jQuery

Using JavaScript to toggle the iron-collapse property

Using jQuery to Populate a Table with JSON Data

Issue Encountered While Trying to Load Images on Local Host Test Server

What is the reason behind genNewColor function's malfunction?

Achieving a persistent footer at the bottom of the page within Material Angular's mat-sidenav-container while using the router-outlet

Issue with the read more button inoperative for two specific paragraphs

The content inside the HTML body doesn't fully encompass the dimensions of the mobile screen

Adjusting the width of innerHtml within a React router link to match the parent element's width

The user uploads an image to the server, which is then assigned as the background-image for a div element

How to send parameters to the jquery .css() method

Side Menu with Fixed Position Created with Tailwind CSS

"Using Vue 3 to teleport content to a specific element and swap out existing

Tips for creating a responsive background image that adjusts after resizing the window to a certain width

What is the best way to initiate a change event using JavaScript?