On Google, move your mouse over the faded out +1 button. You'll notice the image animates with a type of glimmer? Like a light going across the image. They are using an image for this but I'd like to know how to do this in CSS3. Any ideas for on hover? Also, anyone know what this effect is called?
Thanks
In their case, they are using a sprite, and then animating through it.
Unfortunately, it's not yet possible to animate css3 gradients, and background-position seems to have no effect on it. You'll just have to do with images at the moment.
Related
I am trying to make a mouse animation to interact with my space background, for example like : https://neokcs.com/ if you move your mouse near stars you will see a white line i want something like that if it is possible please give me the code.
Here, Particle JS. Check out this. There are many variances of background available with the same, you can customise it easily.
I'm pretty new to SVG and how to work with them. I am not asking you for answer code, what I am asking is for some guide on maybe some plugin, maybe an article or some advice on how do I go about animating this SVG the way I wish to.
Problem:
I want to animate the picture below of the Sun, I'll be creating a vector graphic of this image obviously but what I want is these cuts in the bottom part of sun to animate and go from top to bottom revealing the background and second sun behind the main sun.
I want to do this inside a webpage so I need help regarding that.
Like I am not able to figure out how would I go about the whole process of making these cuts going down. Any help would be highly appreciated.
I would try https://rive.app/
As far as the how, I would create a short infinite loop. The horizontal bars would probably need to be their own shapes with some kind of masking effect on them to knock out the circle. You'd have to tween them to move up on the Y axis and let the height shrink to nothing as it moves up. The animation would probably only be 250-750ms. Let me know if that works!
I'm wondering if there's a way to animate a gif or video based on where my mouse is hovering in relation to the frame.
I think the best example of what I mean would be, if the gif is of someone turning around 360, I would want the person to be facing forward when the mouse in on the left of the frame, turned around when in the center of the frame, facing forward again when at the right of the frame (and all the in-betweens).
Effectively, using a mouse hover as a drag function for a video timeline
Let me know if you have any ideas or if you need more details.
If need be, I can upload some example gifs/videos to clarify my purpose.
Thank you all so much in advance.
You can use transform: rotate() on a class in CSS.
Here is demo.
Animated Motion Background Effect
i have tried the answers from the question above, but not exactly what am looking for, i am looking for a way to create the same background effect like the one on this webpage: https://fonoapi.freshpixl.com/ any tips or how-to on how i can create it? i came across it and wanted to know how i can achieve the same effect or create a new one.
That effect has been created using a particle api that can be found on GitHub https://github.com/VincentGarreau/particles.js
It has nothing to do with css and/or css animations, it is basically a particle simulation rendered to a html canvas element.
I've been learning a bit about canvas and something that caught my attention (mostly because i had no idea how to do it when i saw) it's the shine and the nice animation that google did in their logo here:
http://www.google.com/chromebook/
I would like to know if someone have any idea or know how to do it =]
Thanks
You should definitely see the other discussion here:
How to create a shiny logo like Google Chromebooks website
It wouldn't be hard to make yourself, simply consider having a canvas with an css background-image on it and all you need to do is start an animation on the mouseover event.
The animation draws a radial gradient with a radius that increases over time, then it draws a line that is affected by a linear gradient that moves from left to right.
If basic animation on the canvas itself is something new to you then I suggest you do a search for online tutorials about canvas animation.