I am a newbie/beginner to CSS animations and I have searched on StackOverflow but I didn't find exactly what I was looking for.
I am looking to achieve the effect appearing on the second section of this website
The smooth easing "sweeping" reveal effect on the images. I can't manage to do it. Is there a way to do this with translate/ transform?
Related
I want to make a background animated gradient like this ones protoyped on Figma.
Picture of Animated Gradient
I saw some solutions of animated gradients in CSS like the one of this page, but it only generates a common linear-gradient and changes the background position.
What i'm looking for is a mesh gradient like the Figma examples (is builted with shapes, a blur layer and some noise) and animate it like the Figma prototype.
It can be done with pure CSS? or what could be a nice solution?
You'd definitely need something alongside CSS to animate it like you desire, JS would be a good bet. This is really a project in itself, but take a look at What a Mesh. It does what you're looking for, I don't think it's actually available for public/commercial use, but you might get some inspiration for how to approach it.
https://whatamesh.vercel.app/
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'm interested how are these backgrounds made:
http://www.studioup.it/
https://www.fbf8.com/
I tried searching Google, but i'm not sure how is this technique called. Search for 'animated background' did not give the results what i was hoping for.
Is this some shape drawing / animation or what? Or maybe it's background animation, but done very elegant and with good taste?
AFAIK there isn't any specific name for this technique
Just applying classes, change positioning based on scroll position.
More details here
http://css-tricks.com/fancy-scrolling-sites/
There's another similar effect called Parallax Scrolling which is quite popular as well.(except for a few exceptions, I hate it mostly)
I have an idea that I would like your input on how it can be achieved. Essentially, I would like to have a page where page elements would be responsive and animated. Let me give you an example - let's say I point my mouse over a button or an image and it would play an animation like http://hakim.se/experiments/html5/magnetic/02/ around it while mouse is pointing over it, fading away if I point away from it.
Alternatively, it would be cool to have something like http://hakim.se/experiments/html5/trail/03/ flowing from current mouse position to the element that I would like to draw user's attention to. I have little idea on how this can be implemented, thinking that creating a overlay and using element's coordinates would be most appropriate but not 100% it can be done this way. Do you have any recommendations or suggestions on best practices, existing libraries / frameworks that may assist me with this?
Thanks!
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.