티스토리 블로그에서 꽃가루 터지는 효과를 따온건데, 먼저 티스토리 api를 링크시키고
아래의 html 코드와 javascript 코드를 이용한다.
아래의 코드는 가장 기본적인 형태로 바꾼 코드이다,
html 에서 두 버튼이 꽃가루의 시작과 멈춤을 제어한다.
javascript reaction함수로 시작버튼을 클릭하고 5초뒤에 멈추는 코드이다.
짜잔~~!
html
<!-- 꽃가루 -->
<script src="https://tistory4.daumcdn.net/tistory/3134841/skin/images/confetti_v2.js"></script>
<!-- 꽃가루-->
<!-- is-hidden class : bulma css -->
<div class="buttonContainer is-hidden">
<button class="canvasBtn" id="stopButton">Stop Confetti</button>
<button class="canvasBtn" id="startButton">Drop Confetti</button>
</div>
javascript
$.ajax({
type: "POST",
url: "/sign_up/save",
data: {},
success: function (response) {
if (response['result'] == 'success') {
reAction(); //꽃가루
});
function reAction() {
$("#startButton").trigger("click");
setTimeout(function () {
$("#stopButton").trigger("click");
}, 5000);
}
*참고
'JavaScript' 카테고리의 다른 글
[Jquery] document.cookie 내 쿠키 key value 값 분리해서 확인하기 (0) | 2021.10.19 |
---|---|
[Rejex] 정규 표현식 ( 정규식 - Regular expression) (0) | 2021.10.19 |
[JS] javascript(자바스크립트) - 배열 내부 원소 값(문자열) 체크하기 [every(), some() ] (0) | 2021.10.19 |
[Jquery] Flask 쿠키 삭제 removeCookie - jwt 로그아웃 [Jquery Plugin] (0) | 2021.10.19 |
[Jquery] 자바스크립트 이미지 파일 업로드 시 미리보기 제공하기 (0) | 2021.10.19 |