I need to make this animation as a background:
https://www.dropbox.com/s/yu1kot89f05ybgn/Comp%201_10.mov?dl=0
I've tried to do it with image:
background-image url('../images/content/fracture.png')
animation background-moving linear 10s infinite;
But animation from video is more complicated.
What technology should be used here? (CSS, SVG-animation...)?
Or provide please some examples.
I would like to give some options to you based on my experience.
Have a GIF file and set the background (easiest)
Get a PNG/SVG With 3 hills, add animate the background based on CSS animation & CSS transition (works)
Simply add a video based on HTML5 video tags. Many sites does that. (But, based on the video you shared, this is unnecessary.)
Have a canvas as background & write JavaScript that loops the transition (complex)
Related
I want to set background on my website like the one one tailwindcss.com. How can I accomplish this?
Tailwind Website
Still wondering how is this implemented.
Having inspected the Tailwind website for you, it appears they use a simple JPG image as the header background. Since it's not SVG, I can't know how it was made.
Another way to do this, a different approach to #Gugalcrom123's, is to use a css gradient.
Method 1. You can use a website such as this:
https://cssgradient.io/ to come up with the gradient and set that as a background. The website also generates you the code you can use to set it as the background, as well as a regular color fallback in case your browser does not support it. This is where Tailwind probably decided to use method 2.
Method 2. You can use GIMP, Photoshop or some similar drawing tool to draw a gradient, and put it as an image. You can also use Filter: blur() on the img in css to blur it with pixels or even use your drawing tool to blur it out! To make the grid, you can do a similar thing, except after drawing the grid, put it behind the gradient layer and set the gradient layer's opacity to something lower than 100%, so the grid shows behind it.
You can blur it using a filter: blur(10px); on CSS... But be careful, it might make your site slow.
Also, have a look at SVG FILTERS here: https://www.smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/
I am using Ionic Slides in my app. I wish to gradually change the background colour as I move from the first slide to the second one from white to blue. I am able to change them abruptly, but how can I make it look like it changes smoothly?
A lot of native apps (e.g. Buffer) do that in their introductory slides.
Thanks in advance!
well there are many ways in which you can do a smooth transition one of which is
CSS3 animation
read here
https://www.w3schools.com/css/css3_animations.asp
or you can use angularjs animation
read here
https://www.w3schools.com/angular/angular_animations.asp
How can i achieve this kind of animation effect (see link below) and where do I need to start learning, is this part of css or html5 or plugins, etc..
I have a startup knowledge in css and html5, but I have no idea how to achieve the effect.
http://www.terredevenements.com/en/
*the effect i'm referring to is the movement of the foreground images while the mouse hovers and still maintaining its background to be static
This effect is called "parallax scrolling"
The basic idea is to layer images on top of each other and move them simultaneously but at different speeds, foreground moving faster than background.
Capturing and utilizing mouse events can be done with javascript/jQuery, and the animation can also be done with those languages or in combination with CSS3 animations.
There are quite a few jQuery plugins out there that can help you quickly achieve this effect.
See parallax.js
Or for more plugins: http://bashooka.com/coding/best-jquery-parallax-plugins/
I'm having several buttons that I want to get darker when user hovers over. Which method is better (faster, more efficient, more safe in terms of browser compatibility):
Create 2 separate .png images, one normal one _hover
Use transition:opacity css property.
Images are small, each approx. 600 bytes big (20x20 pxl), but having approximately 30 of them makes me wonder which method is better in terms of speed efficiency and older browsers support (but not to the point trying to please IE6 either)
if opacity is doing your job of darkening the image- Use it.
You said darkening image? so i assume u start with lower opacity value and chage to something higher.opacity is more like transparency of the pic-dosent darken it.
If opacity is not giving the desired results you can use hover change of image-use image sprites this way you dont have to request for 60 svg's(30 svgs considering you use a combination of 2 pics instead of one)
LINK for sprites.
I suggest using SVG filter gives you better image effects-Browser support
I have a question - wondering whether it's possible to create an animated GIF from an existing animation which is made up of SVGs animated using CSS3 transitions?
The existing SVG is basically a pie chart made up of 4 parts that grow out from the centre by putting on a transition of width .2s height .2s on each piece. I've made a JSBin of it here:
http://jsbin.com/UcemUNo/1/edit?html,css,js,console,output
I've had a look around & all I can find is how to just 'create an animated gif' through say a webcam or existing images, but not from an element on a web page.
Any pointers greatly appreciated!
Found a solution - screen recording! Downloaded a program called Camtastia, recorded the animation in my browser & exported it as an animated GIF. Job done.