Create a dotted "trail" after the div when dragging
I have a heavily modified version of the menu used in this demo :
As the small circles accelerate, I want to place some small "dots" between the center main element and the smaller outer circles that form a dashed line connecting the two elements.
It would have an effect similar to this, but several times in a radial pattern (orange circles):
What would be the best way to accomplish this dynamically?
source to share
I've created a sample with the animation you need. Here's how it's done:
Create orange dots with a radial background gradient and repeat it:
background: radial-gradient(circle, orange 5px, transparent 5px) 15px 0;
background-size: 20px 10px;
Rotate an element:
transform: rotate(-45deg);
transform-origin: 0 0;
When the inverse circles fly out, change the width of the element, use a transition to make it smooth. In my example, I used animation, but there isn't much difference.
transition: width 2s;
source to share
Usually for this kind of thing, I would suggest using a library like Raphael . Using a graphics library to render graphical effects rather than the HTML DOM tends to make things easier, especially as things get more complex, and also much more flexible with the things it can achieve. Raphael's site has a lot of demonstrations of what he is capable of doing, and I would say the effect is pretty straightforward once you get the Raphael API. The downside is that if you follow this path, you probably have to write the entire menu with Raphael, so you throw away what you have and start from scratch.
So, so in this case, since you already have a working demo that just uses regular HTML elements, you can work with what you have. It doesn't seem too difficult to change it; just add a few more sets of items behind the main menu items and set them to animate at the same speed as the menu item they follow but less distance.
It's just a little extra markup, but the trick needs to be done just fine. I won't give you detailed instructions because there are probably hundreds of ways to do this; and I don't have time to come up with a whole tutorial, but at the end of the day it should be just more than a copy + paste case. Not the most elegant way to write code, but it should work. The only caveat I can foresee is that it can slow things down if you have five times more things animating on the screen at the same time. But it can work as soon as you can.
source to share