i want to load the js function only when page scrolled down to the particular section but don't know hot to do so. currently it is working fine when page is loaded but i want to display the entrance effect while scrolling down to the particular element. here is my code:
$(document).ready(function() {
var bubbleList = $('.bubble-container');
const bubbleCount = bubbleList.length;
const degStep = 180 / (bubbleCount - 1);
$('.bubble-container').each((index) => {
const deg = index * degStep;
const invertDeg = deg * -1;
$(bubbleList[index]).css('transform', `rotate(${deg}deg)`);
$(bubbleList[index]).css('opacity', `1`);
$(bubbleList[index]).find('.bubble').css('transform', `rotate(${invertDeg}deg)`);
})
}).my-services {
background: linear-gradient(rgb(255 255 255 / 95%), rgba(255, 255, 255, 0.8)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/kreator_rockharz_july_2018.jpg) 50%/cover
}
@keyframes rotateMain {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes rotateInner {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.my_info .centralized {
display: flex;
align-items: center;
justify-content: center;
}
.my_info .main-container {
margin: 0 auto;
padding-top: 120px;
height: 350px;
width: 100%;
position: relative;
}
.my_info .main-container .main-circle {
border: 6px solid #bcbcbc;
border-radius: 100%;
box-sizing: border-box;
padding: 24px;
height: 300px;
width: 300px;
position: relative;
}
.my_info .main-container .main-circle .inner {
background: #ededed;
border: 4px solid #e3e3e3;
border-radius: 100%;
box-shadow: 4px 5px 5px 0px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
color: #616161;
font-size: 24px;
height: 100%;
line-height: 1.5;
text-align: center;
width: 100%;
}
.my_info .main-container .bubble-container {
border: 6px;
box-sizing: border-box;
height: 300px;
position: absolute;
width: 300px;
opacity: 0;
transform: rotate(0deg);
transition: transform ease-in 0.7s, opacity ease 1s;
}
.my_info .main-container .bubble-container .pointer {
background: #fff;
border: 4px solid #bcbcbc;
border-radius: 100%;
box-sizing: border-box;
position: absolute;
left: calc(-17px + 3px);
height: 34px;
top: calc(50% - 17px);
width: 34px;
}
.my_info .main-container .bubble-container .pointer .arrow {
width: 0;
height: 0;
border-style: solid;
border-width: 7px 14px 7px 0;
border-color: transparent #bcbcbc transparent transparent;
position: absolute;
left: -15px;
top: 5.52px;
}
.my_info .main-container .bubble-container .pointer .inner {
background: #000;
border-radius: 100%;
box-sizing: border-box;
height: 14px;
width: 14px;
}
.my_info .main-container .bubble-container .bubble {
border-radius: 100%;
box-sizing: border-box;
position: absolute;
height: 110px;
top: calc(50% - 55px);
left: -145px;
width: 110px;
transform: rotate(0deg);
transition: all ease 0.8s;
}
.my_info .main-container .bubble-container .bubble .inner {
background: #fff;
border-radius: 100%;
box-shadow: 4px 5px 5px 0px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
height: 84px;
width: 84px;
overflow: hidden;
text-align: center;
font-size: 13px;
font-weight: bold;
}
.my_info .main-container .bubble-container.black .bubble,
.my_info .main-container .bubble-container.black .pointer .inner {
background: #505269;
}
.my_info .main-container .bubble-container.blue-dark .bubble,
.my_info .main-container .bubble-container.blue-dark .pointer .inner {
background: #4c67aa;
}
.my_info .main-container .bubble-container.blue-light .bubble,
.my_info .main-container .bubble-container.blue-light .pointer .inner {
background: #25ade1;
}
.my_info .main-container .bubble-container.green .bubble,
.my_info .main-container .bubble-container.green .pointer .inner {
background: #8dc03f;
}
.my_info .main-container .bubble-container.orange .bubble {
background: #fa9128;
}
.my_info .main-container .bubble-container.orange .pointer .inner {
background: #fa9128;
}
.my_info .main-container .bubble-container.red .bubble,
.my_info .main-container .bubble-container.red .pointer .inner {
background: #e46020;
}<!DOCTYPE html>
<html lang="en" >
<div id="loadonscroll" class="my_info">
<!-- partial:index.partial.html -->
<div class="main-container centralized">
<div class="main-circle">
<div class="inner centralized">
Services<br>We Offer
</div>
</div>
<div class="bubble-container centralized blue-dark">
<div class="pointer centralized">
<div class="arrow"></div>
<div class="inner">
</div>
</div>
<div class="bubble centralized">
<div class="inner centralized">
Research<br>Paper
</div>
</div>
</div>
<div class="bubble-container centralized green">
<div class="pointer centralized">
<div class="arrow"></div>
<div class="inner">
</div>
</div>
<div class="bubble centralized">
<div class="inner centralized">
Thesis
</div>
</div>
</div>
<div class="bubble-container centralized orange">
<div class="pointer centralized">
<div class="arrow"></div>
<div class="inner">
</div>
</div>
<div class="bubble centralized">
<div class="inner centralized">
Abstract
</div>
</div>
</div>
<div class="bubble-container centralized red">
<div class="pointer centralized">
<div class="arrow"></div>
<div class="inner">
</div>
</div>
<div class="bubble centralized">
<div class="inner centralized">
Book
</div>
</div>
</div>
<div class="bubble-container centralized black">
<div class="pointer centralized">
<div class="arrow"></div>
<div class="inner">
</div>
</div>
<div class="bubble centralized">
<div class="inner centralized">
Non-Academic<br>Content
</div>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js'></script><script src="./script.js"></script>
</div>
</html>Any help is highly appreciated
