원형 목록을 표시하고 스크롤과 연동하여 회전하는 권총 리볼버와 같은
애니메이션을 만드는 목록 만들기

데모 페이지

출처

설명

목록 만들기

회전용 목록을 만듭니다.

CSS에서 자식 요소의 표시를 유지하면서 요소를 회전하는 방법
htps //w w. 응 x를 rld. 네 t/cs-에에멘 t-갓. HTML

이 기사를 참고로 화면을 작성합니다.

이번에는 스크롤과 함께 회전시키는 움직임을 구현하므로 아래를 비롯한 animation 부분은 필요하지 않습니다.

ul {
  animation: rotate 30s linear infinite;
}

스크롤 애니메이션

CSS와 jQuery로 만드는 스크롤에 따라 회전하는 로고
htps : // hyp-r xt. 오 rg / 아 r ゔ ぇ s / 2013/07 / cs s_s 핑 ぉ 고. shtm
이 기사를 참고로 스크롤 애니메이션을 구현합니다.
js로 지정하는 선택기를 조정합니다.

변경 전

$(window).scroll(function(){
 rotate($(".logo"), $(window).scrollTop()*0.2);
})

변경 후

const selList = ['twitter', 'facebook', 'pinterest', 'instagram', 'google'];
const listCnt = selList.length;

$(window).scroll(function () {

 // 1回転する角度
 var angle = $(window).scrollTop();
 // 180pxスクロールするごとに72度回転する
 angle = Math.round(angle / 180) * (360 / listCnt);

 rotate($("ul"), angle);
 rotate($("ul > li"), angle * -1);
})

선택한 목록의 동적 업데이트

<p class="select-menu">
 twitter
</p>

선택한 메뉴를 표시하는 부분의 동적 재 작성을 js로 구현합니다.

// 選択中リストの動的更新
roleCnt = angle / (360 / listCnt);

// 回転数がリストの要素以上なら要素数分マイナスする
while(true) {
 if (roleCnt < listCnt) {
  break;
 }
 roleCnt -= listCnt;
}

var selText = selList[roleCnt];
$(".select-menu").text(selText);

이것으로 완성

비고

전 자료는 드라마 '리치맨, 푸어 우먼'에 나오는 '퍼스널 파일'이라는 가상의 웹 앱의 UI가 이 리볼버 리스트와 같은 거동을 하고 있었기 때문에 시도해봤습니다 w

언젠가 퍼스널 파일이 개발되어 전입 신고 등이 넷으로 완결할 수 있게 해 줄 것을 기대하고 있습니다

【공식】리치맨, 푸어 우먼
htps: //후 d. 후지 tv. 이. jp/s/겐레/d라마/세 r4389/