클릭하면 다운로는 되는 애니메이션 Download Animation (SVG) : happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > CSS > 버튼 > 클릭하면 다운로는 되는 애니메이션 Download Animation (SVG) 상세정보

클라우드태그

javascript

HTML

PHP

Api

2022

ASP

CSS

mysql

Slide

jquery

모듈

갤러리

웹메일

현재접속자 명

클릭하면 다운로는 되는 애니메이션 Download Animation (SVG)

해피팀

네티즌

소스분류

버튼

다운로드 횟수

0 회

간단설명

클릭하면 다운로는 되는 애니메이션을 재밌게 표현한 소스입니다. 다양한 상황에 응용 가능합니다.

평가하기

클릭하면 다운로는 되는 애니메이션을 재밌게 표현한 소스입니다.

다양한 상황에 응용 가능합니다.

HTML 구조

</svg>

</div>

</div>

</div>

<button type="button" class="dl-reset">Reset</button>

</div>

</a>

</a>

CSS(SCSS) 소스

*, *:before, *:after {

box-sizing: border-box;

margin: 0;

padding: 0;

}

body {

background: #006cc7;

font-family: 'Roboto', Helvetica, Arial, sans-serif;

}

$circleSize: 160px;

$dlPad: 20px;

$dlWidth: 320px + $dlPad * 2;

$dlHeight: $circleSize + 50px + $dlPad*2;

$strokeW: 6px;

.dl-box {

position: absolute;

left: 50%;

top: 50%;

width: $dlWidth;

height: $dlHeight;

padding: $dlPad;

margin-left: $dlWidth/-2;

margin-top: $dlHeight/-2;

}

.dl-svg {

overflow: visible;

display: block;

width: $circleSize;

height: $circleSize;

margin: 0 auto;

&:not(.s--animating) {

cursor: pointer;

}

path {

fill: none;

stroke-width: $strokeW;

stroke-linecap: round;

}

&__circle {

stroke: #4c99d9;

}

&__arrow {

stroke: #fff;

}

&__rotater {

stroke: #fff;

opacity: 0;

}

&__triangle {

stroke: #fff;

opacity: 0;

&-piece {

stroke: #fff;

opacity: 0;

}

&__progress-plc {

stroke: rgba(#fff, 0.4);

opacity: 0;

}

&__progress,

&__progress-vert,

&__checkmark {

stroke: #fff;

opacity: 0;

}

.dl-status {

display: flex;

justify-content: center;

align-items: flex-end;

position: absolute;

left: 0;

top: 90px;

width: 100%;

color: #4c99d9;

opacity: 0;

transition: 0.6s;

transform: scale(0.8);

pointer-events: none;

&.s--active {

opacity: 1;

transform: scale(1);

}

.
.
.

JS 소스

(function() {

function $$(selector, context) {

var context = context || document;

var elements = context.querySelectorAll(selector);

var nodesArr = [].slice.call(elements);

return nodesArr.length === 1 ? nodesArr[0] : nodesArr;

};

var $status = $$('.dl-status');

var $statusNumbers = $$('.dl-statusnumbers');

var $dlSVG = $$('.dl-svg');

var $circle = $$('.dl-svgcircle');

var $arrMain = $$('.dl-svgarrow-main');

var $arrSides = $$('.dl-svgarrow-side');

var $rotater = $$('.dl-svgrotater');

var $tri = $$('.dl-svgtriangle');

var $triPiece = $$('.dl-svgtriangle-piece');

var $plc = $$('.dl-svgprogress-plc');

var $progress = $$('.dl-svgprogress');

var $prVert = $$('.dl-svgprogress-vert');

var $check = $$('.dl-svg__checkmark');

var $resetBtn = $$('.dl-reset');

var $particles = $$('.particles');

var $particlesStage2 = $$('.particles.m--stage-2');

var $particlesStage3 = $$('.particles.m--stage-3');

var arrInitAT = 0.5;

var dotFadeAT = 0.1;

var rtRotationAT = 1.4;

var triAT = 1.1;

var rtDelay = arrInitAT + dotFadeAT;

var triPhase2Delay = triAT * 0.6;

var progressDelay = 0.2;

var progressAT = 1;

var prCollapseAT = 0.5;

var prMoveAT = 0.4;

var circleAT = 0.6;

var checkAT = 0.5;

function resetDl() {

$dlSVG.classList.remove('s--animating');

$resetBtn.classList.remove('s--visible');

$particles.forEach(function($part) {

$part.classList.remove('s--active');

});

.
.
.

해당 사이트로 이동하여 전체 소스를 확인하실 수 있습니다.

네티즌 의견 이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)

내용

아이디

의견남기기

등록된 의견이 없습니다.