CSS, D3, GSAP를 사용하여 수평 바 로더를 구현하는 방법(소스 코드 첨부)

이 문서의 내용은 CSS, D3 및 GSAP를 사용하여 수평 바 로더를 구현하는 방법에 대한 것입니다(소스 코드 첨부). 필요한 친구들이 참고할 수 있기를 바랍니다. .

효과 미리보기

소스 코드 다운로드

https://github.com/comehope/front-end-daily-challenges

코드 해석

dom을 정의합니다. 컨테이너에는 1 span 요소: <code>span 元素：

<div>
    <span></span>
</div>

居中显示：

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

定义容器尺寸：

.loader {
    width: 40em;
    height: 1em;
    font-size: 10px;
}

设置容器中 span 的样式，是一个彩色细长条：

.loader {
    position: relative;
}

.loader span {
    position: absolute;
    width: inherit;
    height: inherit;
    background-color: hsl(24, 100%, 65%);
}

引入 d3.js：

<script></script>

删除掉 dom 中的 span 元素，改用 d3 创建，其中常量 COUNT 是细长条的数量，因为 d3.range() 生成的数据是从 0 开始的数列，所以把数据修正为以日常习惯的从 1 开始的数列：

const COUNT = 1;

d3.select('.loader')
    .selectAll('span')
    .data(d3.range(COUNT).map(d => d + 1))
    .enter()
    .append('span')

删除掉 css 中设置 span 元素 background-color

d3.select('.loader')
    .selectAll('span')
    .data(d3.range(COUNT).map(d => d + 1))
    .enter()
    .append('span')
    .style('background-color', `hsl(24, 100%, 65%)`)

중앙 디스플레이:

const HUE_DEG = 12;
const COUNT = 2;

d3.select('.loader')
    /* ...略 */
    .style('background-color', (d) => `hsl(${d * HUE_DEG}, 100%, 65%)`)

컨테이너 크기 정의:

d3.select('.loader')
    /* ...略 */
    .style('background-color', (d) => d % 2 !== 0
        ? `hsl(${d * HUE_DEG}, 100%, 65%)`
        : 'black');

다채롭고 가는 막대인 컨테이너의 span 스타일 설정:

<p>
    <span></span>
    <span>
</span></p>

d3를 소개합니다. js ：

<script></script>

dom에서 span 요소를 삭제하고 대신 d3를 사용하여 생성하세요. d3.range( ) 생성된 데이터는 0부터 시작하는 시퀀스이므로 일상 습관에 따라 1부터 시작하는 시퀀스로 데이터가 수정됩니다.

let animation = new TimelineMax({repeat: -1});
animation.staggerFrom('.loader span', 0.5, {scaleX: 0}, 0.4)

span 요소 배경 세트 삭제 CSS -color 속성 코드에서 d3 설정을 대신 사용하세요:

const COUNT = 360 / HUE_DEG;

가는 막대 수를 2로 변경하고 색상을 동적 생성으로 변경하세요.

rrreee

더 나아가서 색상을 컬러 막대로 변경하고 검은색 막대는 간격을 두고 나타납니다. 표현식의 색상 값은 12씩 증가하지만 검은색 막대가 혼합되어 있기 때문에 실제 효과는 색상 막대 간의 색상 차이가 24라는 것입니다.

rrreee

At 이번에는 동적 생성된 DOM 구조는 다음과 같습니다.

rrreeegsap 라이브러리 소개: rrreee

중앙에서 양쪽으로 확장되는 스트립의 애니메이션 효과 추가: rrreee마지막으로 스트립 수를 30으로 변경합니다. 전체 색상 원을 사용합니다. 링의 360도를 색상 간격으로 나누어 다음을 얻습니다.

rrreee

완료되었습니다! 🎜🎜관련 권장 사항: 🎜🎜🎜순수 CSS를 사용하여 마우스 오버 시 오른쪽으로 이동하는 버튼 효과를 구현하는 방법(소스 코드 첨부) 🎜🎜🎜CSS 및 GSAP를 사용하여 여러 키프레임으로 연속 애니메이션을 구현하는 방법(소스 코드 첨부) 🎜 🎜🎜

위 내용은 CSS, D3, GSAP를 사용하여 수평 바 로더를 구현하는 방법(소스 코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!