14

I have the following .svg graphic:

enter image description here

I am trying to animate the electron so that it moves (proportionally with the page when it is scrolled) along the curvature of the ring up until a certain point (probably the same point the electron would be at if it was flipped over the imaginary x-axis of this image):

enter image description here

I am fairly new to web-development, so I am unsure how I would accomplish this. I imagine that I would have to use CSS3 for the actual animation, and jQuery to capture the scroll event; yet I really don't have a clue as to where I would start.

The optimized .svg code for reference:

<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>

I labeled the electron in the code with the class="electron". Any suggestions?

4
  • Well, i can help you, but i don't get the movement roll. correct me if i'm wrong! you want to change the electron position between two point (flipped over the imaginary x-axis of this image) by each mouse wheel up or down?
    – MeTe-30
    Jul 22, 2014 at 4:18
  • @MeTe-30 Not quite 180˚, you're flipping over the line roughly equal to y = x. Flip the electron over the x-axis going through the middle of the image.
    – syb0rg
    Jul 22, 2014 at 4:20
  • that was my mistake, i correct that.
    – MeTe-30
    Jul 22, 2014 at 4:27
  • Is that only me or is that circle not really a circle? It's an egg! Jul 25, 2014 at 13:27

2 Answers 2

15

Your SVG code can be optimised a bit more, since it consists entirely of circle primitives:

<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>

The rotation of the electron can easily be achieved by hooking into the window.onscroll event:

$(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+")");
});

This example rotates the nucleus of the atom too; you can delete this if not required.

You can see it working here.


How it works:

The <svg> element is sized at 80×80 pixels, and the top-level <g> element shifts the origin of the drawing coordinates by 40 pixels horizontally and vertically to the middle of the image. So when we change the rotation of the two <g> elements inside it, we can be sure that they will rotate around the centre of the image.

The electron is just a plain circle offset vertically by 37 pixels in the +y direction (which happens to be towards the bottom of the screen), and the g#a2 element gives it an initial (clockwise) rotation of 160° so it appears just left of the top of the orbital.

In the window's scroll handler event, s is set to the current scroll position as a value ranging from 0 (top) to 1 (bottom), and this value is used to change the rotation angle of the electron over the range from +160° to –160° (or +160° to +20° in the modified version discussed in the comments.

4
  • Almost perfect! The one thing that I can't figure out how to fix is how to stop the electron at that exact point every time, even if there is more text in the document. I've added another picture to show where I would like the animation to stop, once that's been figured out I will accept this answer
    – syb0rg
    Jul 22, 2014 at 15:37
  • 2
    Oh, sorry. I saw x axis and read it as y axis. Just change r2=160-320*s; to r2=160-140*s; in the scroll handler. (That way the angle varies between 160° and 20°). Updated JSFiddle here.
    – r3mainer
    Jul 22, 2014 at 15:45
  • Could you go a bit more in-depth with the math involved in your answer? I'm still trying to figure out how it all works.
    – syb0rg
    Jul 22, 2014 at 23:39
  • @syb0rg I've added a bit of explanation to my answer. Hope that helps.
    – r3mainer
    Jul 23, 2014 at 7:50
2

Does this links help you?

  1. [ Sample 1 ]
  2. [ Sample 2 ]

below code is for scroll detecting:

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
    }

}

and for animating svg, you have 2 option! CSS3, and SVG inline animation!
in CSS3 you have to use transform properties, like translateX, translateY and ...
in [ Sample 1 ] i show you, how to animate with CSS3, and for better performance, i used VELOCITY.JS instead of JQuery. (forgive me because of low accuracy on rotating!, i just wanted to show you that it's possible)
in [ Sample 2 ] i show you, how to animate with pure svg properties, that called SVG inline animation.

1
  • But it doesn't respond to window scrolling, just mouse wheel motion. Scrolling using the keyboard or scrollbar will have no effect. Jul 25, 2014 at 5:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.