jquery 찾기 링 주위의 SVG 전자 애니메이션




jquery style (2)

이 링크가 도움이됩니까?

  1. [샘플 1]
  2. [샘플 2]

아래 코드는 스크롤 감지 용입니다.

if (document.addEventListener) {
    document.addEventListener("mousewheel", onDocumentMouseWheel, false);
    document.addEventListener("DOMMouseScroll", onDocumentMouseWheel, false);
}
else {
    document.attachEvent("onmousewheel", onDocumentMouseWheel);
}

function onDocumentMouseWheel(e) {

    if ((e.type == 'mousewheel' && e.wheelDelta > 0) || (e.type == 'DOMMouseScroll' && e.detail < 0)) {
        //UP      
    }
    else {
        //DOWN
    }

}

svg에 애니메이션을 적용하려면 2 옵션이 있어야합니다. CSS3 및 SVG 인라인 애니메이션!
CSS3에서는 translateX , translateY 등의 transform 속성을 사용해야합니다.
[ Sample 1 ] 에서 CSS3로 애니메이트하는 방법을 보여주고 성능 향상을 위해 JQuery 대신 VELOCITY.JS 를 사용했습니다. (회전에 대한 낮은 정확도 때문에 나를 용서하십시오!) 나는 단지 그것이 가능하다는 것을 보여주고 싶었습니다.
[ Sample 2 ] 에서 SVG 인라인 애니메이션이라는 순수 SVG 속성으로 애니메이션을 적용하는 방법을 보여줍니다.

나는 다음과 같은 .svg 그래픽을 가지고있다 :

나는 그것이 움직일 수 있도록 전자의 애니메이션을 만들려고 노력한다. (스크롤 할 때 페이지와 비례하여) 반지의 곡률을 따라 특정 지점까지 이동한다. (아마도 전자는 그것이 상상 x 이 이미지의 축) :

나는 웹 개발에 새로운 것이므로, 이것을 어떻게 달성 할 지 확신 할 수 없다. 실제 애니메이션을 위해 CSS3를 사용하고 스크롤 이벤트를 캡쳐하는 jQuery를 사용해야한다고 생각합니다. 그러나 나는 정말로 내가 어디에서 시작할 것인지에 대한 단서가 없다.

참조 용으로 최적화 된 .svg 코드 :

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="436.25" height="456.5" version="1.1">
    <style>
        .s0 {
            fill:#1c1f26;
        }
    </style>
    <g transform="translate(-225.94052,-31.584209)">
        <path d="m259.84 71.78c-120.47 0-218.12 102.2-218.12 228.25 0 126.05 97.65 228.25 218.13 228.25 120.47 0 218.13-102.2 218.13-228.25 0-126.05-97.65-228.25-218.12-228.25zm0 4.78c117.95 0 213.56 100.05 213.56 223.47C473.41 423.45 377.8 523.5 259.84 523.5 141.89 523.5 46.25 423.45 46.25 300.03 46.25 176.61 141.89 76.56 259.84 76.56z" transform="translate(184.22177,-40.197041)" fill="#1c1f26" />
    </g>
    <g transform="translate(-81.915798,-31.584205)">
        <g transform="matrix(-0.25881905,-0.96592583,0.96592583,-0.25881905,129.87282,611.33082)" fill="#1c1f26">
            <path transform="matrix(1.0061861,-0.5809218,0.5809218,1.0061861,-135.78147,130.45415)" d="m279.91 300.03c0 11.09-8.99 20.07-20.07 20.07-11.09 0-20.07-8.99-20.07-20.07 0-11.09 8.99-20.07 20.07-20.07 11.09 0 20.07 8.99 20.07 20.07zM279.91 300.03 279.91 300.03" fill="#1c1f26" />
            <path d="m279.91 300.03c0 11.09-8.99 20.07-20.07 20.07-11.09 0-20.07-8.99-20.07-20.07 0-11.09 8.99-20.07 20.07-20.07 11.09 0 20.07 8.99 20.07 20.07z" transform="matrix(1.0061861,-0.5809218,0.5809218,1.0061861,-110.83616,87.416816)" fill="#1c1f26" />
            <path transform="matrix(1.0061861,-0.5809218,0.5809218,1.0061861,-160.5781,87.330591)" d="m279.91 300.03c0 11.09-8.99 20.07-20.07 20.07-11.09 0-20.07-8.99-20.07-20.07 0-11.09 8.99-20.07 20.07-20.07 11.09 0 20.07 8.99 20.07 20.07z" fill="#1c1f26" />
        </g>
        <path class="electron" d="m107.76 150.64c0 6.53-5.3 11.83-11.83 11.83-6.53 0-11.83-5.3-11.83-11.83 0-6.53 5.3-11.83 11.83-11.83 6.53 0 11.83 5.3 11.83 11.83z" transform="translate(120.35903,-99.340798)" fill="#1c1f26" />
    </g>
</svg>

코드의 전자를 class="electron" . 어떤 제안?


SVG 코드는 원형 프리미티브로만 구성되어 있으므로 조금 더 최적화 할 수 있습니다.

<svg width="80" height="80" style="position:fixed; top:5px; left:5px;">
  <g transform="translate(40,40)">
    <g id="a1" transform="rotate(40)">
      <circle cx="0" cy="5" r="4" fill="#1c1f26" />
      <circle cx="4.33" cy="-2.5" r="4" fill="#1c1f26" />
      <circle cx="-4.33" cy="-2.5" r="4" fill="#1c1f26" />
    </g>
    <circle cx="0" cy="0" r="37" fill="none" stroke="#1c1f26" stroke-width="1" />
    <g id="a2" transform="rotate(160)">
      <circle cx="0" cy="37" r="3" fill="#1c1f26" />
    </g>
  </g>
</svg>

전자의 회전은 window.onscroll 이벤트에 연결하여 쉽게 얻을 수 있습니다.

$(window).scroll(function(){
  var s = ($(window).scrollTop() / ($(document).height() - $(window).height()));
  var r1 = 40+106*s, r2=160-320*s;
  $("#a1").attr("transform","rotate("+r1+")");
  $("#a2").attr("transform","rotate("+r2+")");
});

이 예제는 원자의 핵을 회전시킵니다. 필요하지 않으면 이것을 삭제할 수 있습니다.

여기에서 작동하는 것을 볼 수 있습니다.

작동 원리 :

<svg> 요소의 크기는 80 x 80 픽셀이고 최상위 요소 인 <g> 요소는 그림 좌표의 원점을 이미지의 중간에 수평 및 수직으로 40 픽셀 씩 이동시킵니다. 따라서 내부에있는 두 개의 <g> 요소의 회전을 변경하면 이미지의 중심을 중심으로 회전 할 수 있습니다.

전자는 + y 방향으로 37 픽셀만큼 수직으로 오프셋 된 일반 원 (화면 아래쪽 방향으로 발생 함)이고 g#a2 요소는 160 °의 초기 (시계 방향) 회전을 제공하므로 나타납니다 궤도의 꼭대기에서 방금 떠났다.

윈도우의 스크롤 핸들러 이벤트에서 s 는 현재 스크롤 위치로 0 (위)에서 1 (아래) 범위의 값으로 설정되며이 값은 + 160 ° 범위에서 전자의 회전 각도를 변경하는 데 사용됩니다 -160 ° (또는 의견에서 논의 된 수정 된 버전에서는 + 160 ° ~ + 20 °).







svg