안녕하세요 홈페이지 효과를 여쭈어보고 싶어서 왔습니다
본문
안녕하세요 홈페이지를 만들고 있는 초심자입니다.
홈페이지 배경 효과를 여쭈어보고 싶어서 왔습니다.
http://www.cjone.com/cjmweb/main.do
여기서 
이 배경의 뒤 원형들이 스크롤 했을 때 움직이는 것을 표현하고 싶어 html과 css를 복사 후 class이름과 수치를 바꾸며 도전해보았는데 어떤 것이 어떤 효과인지를 모르니 어려워 고수님들께 도움을 요청해보려 합니다
이 코드만 있으면 구현이 가능할까요? (원형 이미지는 이미지가 아닌 style에서 적용한 동그란 원으로 만들려고 합니다)
<!--움직이는 원-->
<div class="circle_wrap" data-control="circleMotion">
<span class="circle doughnut_l" data-scroll-callback="type:circle" data-before="71" style="top: 256.1px;"></span>
<span class="circle combine_l" data-scroll-callback="type:circle" data-before="796" style="top: 796px;"></span>
<!-- doughnut_r과 combine_r이 합쳐지면 top값은 서로 같음. -->
<span class="circle doughnut_r" data-scroll-callback="type:circle" data-before="-300" style="top: 947px;"></span><!-- top:946px까지 이동 후 .combine_r와 같이 top가 이동됨. -->
<span class="circle combine_r" data-scroll-callback="type:circle" data-before="947" style="top: 947px;"></span>
<span class="circle posi1" data-scroll-callback="type:circle" data-before="365"></span>
<span class="circle posi2" data-scroll-callback="type:circle" data-before="722"></span>
<span class="circle posi3" data-scroll-callback="type:circle" data-before="991" style="top: 882px;"></span>
<span class="circle posi4" data-scroll-callback="type:circle" data-before="2253" style="top: 2253px;"></span>
</div>
<!--//움직이는 원-->
css
element.style {
top: 386.1px;
}
.hot_wrap .circle_wrap .doughnut_l {
top: 71px;
left: 59px;
width: 210px;
height: 209px;
background: url(/cjmweb/images/main/bg_circle_doughnut01.png) no-repeat;
background-image: url(/cjmweb/images/main/bg_circle_doughnut01.png);
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: initial;
-webkit-animation: circle_move 5s infinite;
animation: circle_move 5s infinite;
animation-name: circle_move;
animation-duration: 5s;
animation-timing-function: initial;
animation-delay: initial;
animation-iteration-count: infinite;
animation-direction: initial;
animation-fill-mode: initial;
animation-play-state: initial;
.hot_wrap .circle_wrap .circle{
position: absolute;
}
이 소스들은 상단의 사이트에서 긁어온 자료입니다
여기서 어떤 값을 고치고 추가하면 될까요?
많은 관심과 도움 부탁드립니다. 감사합니다
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default