버튼을 누르면 "고맙습니다" 소리와 함께 하트 로고가 위로 날아오르고 싶어요.

하고 싶어요.상호작용이 있어서 기쁩니다.
누르면 동작이 있다.
mikubook.com 중에 FAVE라는 버튼이 있는데 누르면 미크 씨가 산토라고 할 거예요.
아주 따뜻하고 담비에 오르는 기분도 있어요.
설치가 어려울 것 같지만 jQuery, jQuery UI 덕분에 작업이 간단합니다.

견본

예시 페이지는 여기 있습니다. .
버튼을 누르면'Thankyou'소리와 하트 로고가 위로 날아간다.

이동

이런 느낌.

해설

main.js 내용
main.js

$(document).ready(function() {
    $("button").click(function() {
      var _that = this;
      var audio = new Audio("thankyou.wav");
      if ($("img[name=heart]")){
        $("img[name=heart]").remove();
      }
      var heart = $("<img>").attr({
        name: "heart",
        src: "heart.png",
        width: "24px",
        height: "24px"
      });

      $(document.body).append(heart);

      $(heart).load(function() {
        audio.play();
        heart.position({
          my: 'center',
          at: 'center',
          of: $(_that)
        });

        $(heart).animate({
          opacity: 0.10,
          top: "-=100"
        }, 800, function() {
          $(heart).remove();
      });
    });
  });
});

별일 없어, 간단하게 설치할 수 있어.jQuery와 jQuery UI는 좋습니다.나는 반드시 읽어야 할 서류의 크기가 그것이라고 생각한다...

img 요소를 만들고 하트 이미지를 src 속성으로 설정합니다.

초기 위치는 이미지에서 머리글 뒤로 버튼의 중심으로 이동합니다.

그림을 읽은 후 thankyou.웨이브를 틀다.

애니메이션은 애니메이션 방법으로 반투명도 0.10,

이미지 위치는 100px 축 방향을 따라 상단으로 이동하여 800밀리초 동안 애니메이션을 만듭니다.

이 끝나면 요소 자체를 삭제합니다.

그런 흐름.
thankyou.wav사용Audacity은 자신의 목소리를 음조를 높이거나 속도를 높여 가공한다.