-
반응형
티스토리는 html소스와 script 코드까지 자유롭게 수정할 수 있기 때문에 간단한 액션을 추가할 수도 있습니다. 그래서 최근에는 공감 버튼을 눌렀을 때 특정한 리액션을 줘보고 싶어서 따뽕~! 이미지 효과를 주었었답니다.
별로 씅에는 안 차지만 일단 놔뒀었는데 웹사이트를 돌아다니다가 우연히 꽃가루 날리는 효과를 보았지 모에요~
눈이 @@ 휘둥글~ 이거는 가져다 내 블로그에 적용해봐야 겠다고 생각을 했었지만 웹사이트에서 딱 그 기능에 해당하는 소스만 뽑아오는 것도 좀 귀찮고 해서 그냥 지나갔었는데 구글 브라우저 설문? 조사 페이지에서 또 동일한 꽃가루 날리는 효과를 본 것이었습니다...
꽃가루 효과 결국 소스를 뽑아오기로 결심!
뽑아 온 기능을 적용해 놓고 블로그에도 포스팅을 해볼까 고민하다가 보는 사람도 없을 것 같아서 안 하려고 했지만 오좌동에 계시는 제니퍼님께서 꽃가루 효과가 마음에 든다고 하셔서 포스팅하기로 했습니다~!(뿌듯)
그럼 소스를 바로 공유해드리겠습니다.
<script src="https://tistory4.daumcdn.net/tistory/3134841/skin/images/confetti_v2.js"></script> <style> canvas{z-index:10;pointer-events: none;position: fixed;top: 0;transform: scale(1.1);} </style> <div class="buttonContainer"> <button class="canvasBtn" id="stopButton">Stop Confetti</button> <button class="canvasBtn" id="startButton">Drop Confetti</button> </div> <canvas id="canvas"></canvas>일단은 꽃가루 효과 소스는 이게 다입니다.
참조할 js파일은 하단에 있습니다.
이 코드를 html편집기에 아무 곳에나 넣어도 상관은 없지만 깔끔하게 <body>태그 바로 아래 붙여넣어 줍니다.그렇게 하면 꽃가루가 계속... 계속 날릴 것입니다.커스터마이징
그런데 저의 경우는 특정한 요소를 클릭!했을 때만 꽃가루가 날리도록 기능을 만들었습니다.
그러면 당연히 추가 소스가 필요하겠지요?
좋아요를 눌렀을 때 꽃가루가 날리는 완성된 최종 소스를 공유하겠습니다.
아래 코드는 <body>태그 바로 아래 붙여줍니다.
<body>
<script src="https://tistory4.daumcdn.net/tistory/3134841/skin/images/confetti_v2.js"></script> <style> canvas{z-index:10;pointer-events: none;position: fixed;top: 0;transform: scale(1.1);} </style> <div class="buttonContainer"> <button class="canvasBtn" id="stopButton">Stop Confetti</button> <button class="canvasBtn" id="startButton">Drop Confetti</button> </div> <canvas id="canvas"></canvas>아래의 스크립트 코드는 하단 </body>태그 바로 위에 붙여줍니다.
<script> $(document).ready(function(){ //티스토리 공감버튼 이벤트 function reAction(){ $("#startButton").trigger("click"); setTimeout(function(){ $("#stopButton").trigger("click"); }, 6000); } $(".uoc-icon").on('click', function(){ reAction(); }); }); </script></body>
참고로 버튼 클릭 없이 바로 꽃가루가 날리길 원하실 경우 위 소스에서 부분을 약간 수정해주셔야 하는데요 아래와 같이 클릭 이벤트를 사용하지 않고 바로 reAction()함수를 호출하시면 됩니다.
그러면 위의 코드가 아래와 같이 되겠죠?
<script> $(document).ready(function(){ //티스토리 공감버튼 이벤트 function reAction(){ $("#startButton").trigger("click"); setTimeout(function(){ $("#stopButton").trigger("click"); }, 6000); } reAction(); }); </script>댓글 문의 중 여러번 질문 받는 내용이라 추가해드립니다~!
** 제 블로그 설정상 기능 확인은 PC에서만 가능합니다. IE에서는 지원 안되는 경우가 있음 **
"소스 업데이트로 pc/모바일 모두 가능"
자 이렇게 소스를 적용하시면 여러분의 블로그에서도 좋아요를 누르는 사람들에게는 꽃가루 효과가 실행될 것입니다.
과연 가져다 사용하시는 분들이 얼마나 될지 모르겠지만..
다른 궁금한 효과나 기능들 있으시면 의견주세요~^^ 확인 후 포스팅 해보도록 하겠습니다.
퍼가실 분들 공감 하트와 댓글 남겨주시면 감사합니다!^^
추가
//기능 js. 아래 파일은 자신의 블로그에 업로드해서 사용하는 것이 좋음. <script src="https://tistory4.daumcdn.net/tistory/3134841/skin/images/confetti_v2.js"></script>위 코드는 제 블로그 첨부파일 링크이기 때문에 제가 파일을 삭제 수정하면 참조하고 계신 분들에 영향이 갈 수 있으므로 아래 링크에서 js파일을 다운받아 자신의 블로그에 업로드하여 본인의 링크로 사용하시는게 좋습니다.
위 파일을 다운로드 해서 직접 자신의 티스토리에 편집 > 파일업로드에 파일을 업로드하고 해당 링크를 아래와 같이 사용하시면 됩니다.
<script src="본인 티스토리에 업로드한 js 링크 경로 입력"></script>
아래 텍스트 파일은 위의 전체 소스입니다.
기능이 잘 되지 않을 시 댓글 남겨주세요~
'정보공유 > T스토리 설정' 카테고리의 다른 글
티스토리 애드센스 반응형 광고 에러(설정 시 주의할 점) (0) 2020.05.07 티스토리 댓글 아이콘 설정하기!(계정 이미지) (0) 2020.04.30 티스토리 방명록에 비밀글 설정 html 수정하여 추가하기~! (7) 2020.04.17 개인정보 보호법 위반(Daum 클린센터) (5) 2020.04.16 티스토리 임시저장의 중요성~! (0) 2020.02.21 이 글을 공유하기최근글
-
최근댓글