I have a design where points would be displayed.Surrounding that I need to show stars which will start from the center of the points and move in all directions.Not sure how to start with this.
Find or make SVG image for the stars.
Use css animation and transform to make animation.
Put the stars at the center.
Rotate and move the stars.
Adjust the speed and the positions.
Fire the animation on a specific trigger.
To achieve this, you might need to learn from many examples.
Related
Here is a canvas: https://www.docker.com/#canvasCircle
I am thinking to use the function/images that creates this canvas. You can see that the circles are created first and then there is a ribbon like movement of the line from first canvas to last.
I have been trying to find either the images or the animation function. But couldn't. I would like to modify it and use it for my website.
In my case, as a front-end , I would use Photo Shop. Transfer everything to layers and extract the images. Than with css or Jquery , you can add :focus or :hover to make them pop or animate them. Not sure exactly what you want with it. With css you can also use transform etc. Hope this helps. It would help to know what exactly do you want the images to do so we can think of a code.
I've been trying to recreate the random snow/star effect that's on this website , but I've had no luck..
I'm assuming this needs to be done in CSS, is there anyone who can help me write the code?
Thanks in advance!
Samoht
you have nothing show, but here is a short description
To create this effect, we’ll need three different “snow” graphics. These are transparent images of varying degrees of size and focus. We’ll overlay these three graphics on top of one another for a bit of depth.
Let’s style the background with these images. I’ve uploaded them to Imgur, feel free to use them.
Next, let’s create the keyframe. This is necessary to animate the background images as shown in the example down. If you’re read any of my posts before, you’re probably familiar with CSS Keyframes by now.
Our “snow” keyframe is slowly moving each background image independently of one another at different paces to create the awesome effect of snow falling.
You can change the speed or direction by modifying the background positions in the keyframe at 100%.
Demo w src: jsfiddle.net/orLgtgao/
I've been trying to use transform like CSS3 Transform to Trapezoid to achieve the look in my attached photo.
I am having trouble making them interlock cleanly as per my crappy wireframe. Also making the background of them a slightly opaque photo having the ability to adjust the images position easily.
Any help is much appreciated!
Current: http://cssdeck.com/labs/lrjtihdm
2
crappy wireframe
Okay, so I'm trying to figure out how to make my 3d transitions seamless on a carousel I'm working on without transitioning the entire parent piece. I'm trying to create a cube effect that will be able to be utilized by as many slides as I want. Here's what I have so far, but I can't seem to make it seamless: http://jsfiddle.net/wDMHN/4/. Help!
You need to start each side of the cube at its transformed position relative to the face, so one side needs to be rotate 90, the other 180, and the other 270. You also need to set your perspective origin so all of your faces are rotating around the same point.
Check out this link
It uses the keyboard to rotate the cube, but it would be a very simple change to make it autonomous.
I am trying to make a 3d transition/transformation so that when a link is click a bar run the length of my website rotates to reveal different options. However it currently looks very untidy, in that each face of the cube has gaps around it, and you can see each face of the cube, regardless of whether it not view (i.e when it is animating you can see text you should be able to see, it also gives the impression that bar grows in width when animating.
Is there anyway I can tidy this up?
I have made a fiddle which can be found here
I’m not sure about the gaps, but applying -webkit-backface-visibility: hidden to .face should sort out the visible text issue.
There‘s a good cube example at the end of this blog post which might help with the gaps — maybe you need to use translateX to get the faces into the right position?