I have the following .svg
graphic:
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):
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?
The export SVG workflow in AnimateAnimate allows you to export to SVG format, version 1.1. You can create visually rich artwork using powerful design tools available within Animate, and then, export to SVG. In Animate, you can export selected frames and keyframes of an animation.
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.
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.
Does this links help you?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With