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.
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/
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?
Basically, I was wondering if it were possible to create a detailed gradient type border like the one in the picture, and apply it to a simple box.
I made the preview in photoshop.
I don't believe so at this time. Here is a previous question about Gradient Mesh, which is a feature of Adobe Illustrator that does somethign similar.
I am trying to create an effect like what I have shown in the video below:
http://www.youtube.com/watch?v=gSk4AWvnG8Y&feature=youtu.be
this effect was created in Flash, but I wanted to replicate it (to as much as possible) in HTML5 and CSS3.
I have not done any thing like this before. So wanted to see if someone can help me suggested how I can do it.
Thanks
Zeeshan
Well Spider is kinda right. There are tons of canvas demos describing such particle effects:
http://codepen.io/soulwire/pen/Ffvlo (found here: >)http://davidwalsh.name/canvas-demos)
http://gwtcanvasdemo.appspot.com/
-https://developer.cdn.mozilla.net/media/uploads/demos/b/o/boblemarin/5cfea13ba1397f696bea7b2ff62c0188/fluid_1339407870_demo_package/index.html (found in mozilla labs: https://developer.mozilla.org/en-US/demos/detail/fluid)
etc. (just do a quick google Search).
Doing this with CSS is not possible since you can't track the exact position of the mouse can't create this dependend effect, etc.... and Canvas is HTML5.
I am trying to create a similar effect as seen here:
http://timothypoon.com/blog/2011/01/19/html5-canvas-particle-animation/
However, I can't seem to get this to work on my page and I would like to apply this effect in a div that contains an image. Is this possible or does everything have to happen on the canvas?
When I try to recreate the effect described in the tutorial I get lots of errors such as variables not being defined etc.
You could re-create this using Canvas, or using CSS transformations and shadows, or a mixture of the two. As for the undefined variables, I can't help as you've not posted your code.
A clean approach would be to do everything within the canvas, using JavaScript. You can draw both the foreground grass, and background mountains to the canvas. However if you want to partly use a <div>, you can overlay the div on top of the canvas using CSS position:fixed or position:absolute, also using CSS z-index to set their order.
I recommend the following link, scroll down for the image drawing:
http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/
I don't know how else I can help, as the tutorial that you've provided explains everything quite well. But if you've got any further queries, feel free to comment, or update your question.
You can use the proton particle engine easily achieve the effect you want, Its API is very simple.http://a-jie.github.io/Proton/