• 티스토리 배경 애니메이션 효과 꽃가루 효과 적용하기~!
    정보공유/T스토리 설정 2020. 4. 19. 00:03 좋아요 효과!
      반응형

      티스토리는 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>

      댓글 문의 중 여러번 질문 받는 내용이라 추가해드립니다~!

       

      좋아요 리액션 TEST

       

      ** 제 블로그 설정상 기능 확인은 PC에서만 가능합니다. IE에서는 지원 안되는 경우가 있음 ** 

      "소스 업데이트로 pc/모바일 모두 가능"

       

      자 이렇게 소스를 적용하시면 여러분의 블로그에서도 좋아요를 누르는 사람들에게는 꽃가루 효과가 실행될 것입니다.

       

      과연 가져다 사용하시는 분들이 얼마나 될지 모르겠지만..

       

      다른 궁금한 효과나 기능들 있으시면 의견주세요~^^ 확인 후 포스팅 해보도록 하겠습니다.

       

      퍼가실 분들 공감 하트와 댓글 남겨주시면 감사합니다!^^

       

      추가

      //기능 js. 아래 파일은 자신의 블로그에 업로드해서 사용하는 것이 좋음.
      <script src="https://tistory4.daumcdn.net/tistory/3134841/skin/images/confetti_v2.js"></script>

      위 코드는 제 블로그 첨부파일 링크이기 때문에 제가 파일을 삭제 수정하면 참조하고 계신 분들에 영향이 갈 수 있으므로 아래 링크에서 js파일을 다운받아 자신의 블로그에 업로드하여 본인의 링크로 사용하시는게 좋습니다. 

      confetti_v2.js
      0.01MB

      위 파일을 다운로드 해서 직접 자신의 티스토리에 편집 > 파일업로드에 파일을 업로드하고 해당 링크를 아래와 같이 사용하시면 됩니다.

       

      <script src="본인 티스토리에 업로드한 js 링크 경로 입력"></script>

       

       

      아래 텍스트 파일은 위의 전체 소스입니다.

       

      꽃가루소스.txt
      0.00MB

      기능이 잘 되지 않을 시 댓글 남겨주세요~

       

       

       

       

      728x90
      반응형
      이 글을 공유하기
      • 페이스북 공유하기
      • 카카오스토리 공유하기
      • 트위터 공유하기
      • 네이버 블로그 공유하기

      댓글 58

      • 이전 댓글 더보기
      • 오좌동제니퍼 2020.04.21 00:34 신고

        적용 잘 했습니다~!! 감사합니다^^

      • 살구네 2020.04.29 15:13 신고

        오..대박 좋아요때 꽃가루쓰고 싶은데 어떤 코드입력하면 될까요~!?

      • 익명 2020.04.29 17:30

        비밀댓글입니다

      • 랭크로 2020.04.30 18:23 신고

        꽃가루가 저를 반겨주네요. ㅎㅎ 좋은 기능인 것 같아요. 저두 한 번씩 써봐야겠는데요. 감사합니다!! ^^

      • 댕댕냥 2020.05.01 04:14 신고

        꽃가루 너무 이쁘네요 리뷰 잘보고 갑니다.

      • 모네m 2020.12.02 18:25 신고

        소스 다운하려고 하니 404뜨네요ㅜㅜ 딱 제가 원하는 꽃가루 인데 어떻게 안될까요

      • 동글이 2021.02.09 20:09

        배우고갑니다!
        모바일에서도 되는군요!!!!
        만든사이트에 클릭시말구 그냥 적용하고 싶은데
        잘안되네요ㅜㅜ.ㅠ

        • 황금빛 블로그 2021.02.09 20:15 신고

          방문감사합니다^^ 클릭 요소를 강제 클릭해주면 됩니다

          setTimeout(function(){
          $(".ilike").trigger("click");
          }, 1000);

          셋타임아웃은 줘도 되고 안 줘도 되지만 페이지 로딩 시간을 감안해서 약간의 텀을 주려고 넣었답니다 ^^

        • 동글이 2021.02.11 21:01

          아무리 적용해보려해도 안되네요..흑흑
          딱 원하는 효과인데 그대로 긁어가서 새파일에 올려서 웹상에 확인해도 안되고..
          티스토리에서만 가능한건 아닌것같은데..ㅠ_ㅠ........이런효과 어떻게 구하나요 ㅠㅠㅠㅠㅠㅠㅠㅠ

        • 황금빛 블로그 2021.02.13 01:28 신고

          네 기본적으로 티스토리에 맞춰진 소스인데요 보니까 조금 수정된 부분이있었네요 ㅜㅠ 작성한지 좀 된거라 관리가 잘 안되었었네요 죄송합니다 ㅠㅜ

          본문에 다 업데이트해놓았구요 전체 소스 다운로드는 나중에 다시 올려놓아야 할 것 같네요^^

          다른 사이트에서 사용하실 경우에는 스크립트 부분에서 클릭 요소만 사용자에 맞게 수정해주시면 되고 나머지 소스는 그냥 그대로 사용하시면 됩니다^^

      • 마을방송 2021.02.15 21:01

        반복이아닌 일회만 뿌려주고 싶은데 어디를 어떻게 고쳐야하는지 잘모르겠어요
        죄송하지만 조금 지식을 빌려도될까요..?

        • 황금빛 블로그 2021.02.15 21:34 신고

          반복이 되나요? 지금은 버튼을 누르면 6초 내리다가 멈추는데 정확히 어떤 반복을 말씀하시는지는 모르겠네요;

          버튼 기능을 없애고 싶으신건가요?

      • 마을방송 2021.02.16 09:52

        네네 버튼기능을 빼고 들어왔을때 짧게 몇초간만 내리다가 멈추었음좋겠는데
        자바스크립트를 잘몰라서..어디를 건들어야할지 모르겟네요 ;ㅅ; 이것저것 해봤는데 ....

        • 황금빛 블로그 2021.02.16 14:51 신고

          아 위 소스중에서 아래와 같이

          $(".uoc-icon").on('click', function(){
          reAction(); ← 얘만 남김
          });

          클릭 이벤트를 걷어내고 안쪽의

          reAction();

          만 놔두면 다른 것 수정할 것 없이 꽃가루가 내리다 멈춥니다 ^^

          개인 블로그에 적용해주실 거면 포스팅 퍼가기나 출처 등을 공유해주시면 감사하겠습니다^^

      • hjko 2021.03.02 15:28

        안녕하세요. 우연히 써치하다가 여기까지 왔네요!
        html, CSS만 할줄아는 퍼블리셔인데, 저희 회사 제품 홈페이지에 적용해도 될까요?ㅠㅠ
        이펙트가 너무 예뻐서요....ㅠㅠㅠㅠㅠㅠㅠ
        혹시 이펙트 출처는 html 주석에 달아도 괜찮을까요?ㅠㅠ

      • hjko 2021.03.03 10:32

        ㅠㅠ감사합니다! html 주석에 남겨놓고, 홈페이지 제작하면 여기에 주소도 한번 올릴게욧!!!! XD

      • saturday 2021.03.06 03:33

        안녕하세요! 좋은 소스 공유해주셔서 진심으로 감사드립니다!
        테스트를 하면서 모든 부분이 완벽하였는데 혹시 내려오는 속도를 늦출려면 어떻게 수정해야하는지 여쭈어봐도 될까요?

        • 황금빛 블로그 2021.03.06 14:58 신고

          js파일에 159줄쯤에

          particle.y += (Math.cos(angle + particle.d) + 3 + particle.r / 2) / 1;

          라는 소스가 있는데요 맨 뒤에 /1

          나누기를 1이 아닌 2나 3으로 높은 숫자로 해주면 속도가 줄어드네요^^

          소스가 마음에 드신다니 저도 감사드립니다. 소스 잘 활용해보시길 바래요^^

      • sns품앗이 2021.03.30 16:22

        안녕하세요 ㅎㅎㅎ 너무 맘에 들고 너무 필요했던 기능입니다 ㅜㅜㅜ 출처 적었어요~! 다만 화면전체에 뿌려지는게 아니라 화면의 왼쪽에서 1/5 부분에는 안뿌려지네요 ㅜㅜ 어떻게 해야될까요?? 리액트입니다

      • SNS품앗이 2021.03.30 16:32

        canvas style에 right: 0 추가하니까 꽉채워지네요 정말 감사합니다!

        • 황금빛 블로그 2021.03.30 20:41 신고

          이게 꽃가루가 오른쪽 왼쪽으로 움직이면서 내리다 보니 첨에 좌측이 좀 비어 보이더라구요. 품앗이님 글 읽고 한번 소스를 봐봤더니
          function Update() 함수에서
          angle += 0.01;
          앵글 부분에서 각도를 조절하면 해결이 되더군요. 숫자를 0으로 주면 전체적으로 좌우 움직임을 없앨 수 있는 것 같아요^^

      • 로그인 2021.04.22 11:21

        <script type="text/javascript">
        $(document).ready(function(){

        function reAction(){

        setTimeout(function(){

        }, 3000);
        }

        $(".uoc-icon").on(function(){
        reAction();
        });
        });
        </script>

        버튼없이 3초만 내리게 하고싶은데 저렇게 수정하는게 맞을까요? 수정해도 계속 무한으로 꽃가루가 내려서요!

        • 황금빛 블로그 2021.04.22 23:00 신고

          본문에 있는 소스를 그대로 적용하시고 아래 클릭이벤트 부분에서

          $(".uoc-icon").on('click', function(){ ← 지움

          reAction(); ← 얘만 남김

          }); ← 지움

          reAction(); 써주시면 됩니다.

          이렇게 하면 페이지가 로딩되면 클릭하지 않아도 바로 reAction();을 호출해서 꽃가루 날리는 스크립트가 실행됩니다.

        • 로그인 2021.04.25 21:02

          혹시 reAction()이 어디에서불러오는건가요? 댓글대로 해봤는데도 Uncaught ReferenceError: $ is not defined 오류라고 떠서요..ㅜ

        • 황금빛 블로그 2021.04.26 00:02 신고

          본문에 소스보시면 작성이 되어 있는데요 본문에 소스들을 잘 보시고 그대로 해보시면 될 것 같아여^^ 소스 전체 다운받으실 수 있도록 꽃가루소스.txt 파일도 업로드 되어있습니다~!

      • 정재훈 2021.05.04 15:02

        <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="stop">Stop Confetti</button>
        <button class="canvasBtn" id="start">Drop Confetti</button>
        </div>

        <canvas id="canvas"></canvas>



        <script>
        $(document).ready(function(){
        function reAction(){
        $("#start").trigger("click");
        setTimeout(function(){
        $("#stop").trigger("click");
        }, 1000);
        }
        reAction();
        });
        reAction();
        </script>

        </body>

        이렇게 적용했는데 무엇이 문제일까요...?

        • 황금빛 블로그 2021.05.04 23:37 신고

          stopButton, startButton id는 바꾸시면 안됩니다.

          그리고 마지막 줄 스크립트 부분에서
          }, 1000);
          }
          reAction();
          });
          reAction(); <--

          마지막 리엑션은 지워주세요 두개가 들어갔네요

          그리고 js는 직접 다운받아서 본인 사이트에 업로드하고 그 경로를 사용하시는게 좋아요 언제 제 블로그에서 지워질지 모르는 파일이라서..

      • 도꾸앉아 2021.05.05 00:09 신고

        답변 감사합니다 (__)

        <body>

        <script src="./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>

        <script>
        $(document).ready(function(){
        function reAction(){
        $("#startButton").trigger("click");
        setTimeout(function(){
        $("#stopButton").trigger("click");
        }, 6000);
        }

        $(".uoc-icon").on('click', function(){
        reAction();
        });
        });
        </script>

        </body>

        이렇게 하였고 스크립트 경로까지 제대로 설정하였는데도 작동을 안하네용...

      • 도꾸앉아 2021.05.05 00:15 신고

        작업은 티스토리가 아닌 개인 html에다가 적용했습니다!

      • 매니슬 2021.10.06 22:46

        우왕 너무 귀여워요ㅠㅠㅠ개인 html에 써도 괜찮을까요???

      • 무니 2022.01.12 10:10

        안녕하세요
        지금은 안되는걸까요?? =_=?

    Copyright ⓒ 황금빛 블로그 All Right Reserved.
    Designed by 황금빛 블로그
    위로 가기 메뉴 열기