Actually I don't know where to start. I tried somethings with images overlapped but that was bad idea, because of needed many images preloaded.
Question: Is there any handy method to do this?
You could use a sprite image (many images in one, to reduce loading time), and a div container, then change the background position of the image to animate the whole thing.
Related
I was looking at this site and noticed how the background image seems to move and animate as the user scrolls. Upon inspection of the source code, it showed that this was achieved by changing the background image as the user scrolls. Essentially, it jumps through many frames of images giving the illusion of an animation.
What would be the quickest and easiest way to achieve this? I am using the ScrollMagic library if that would make it easier.
The quickest, easiest way is to listen for scroll events on the element, then change the background url via CSS to the file you want to show. You'll probably need to convert the pure scroll value to a percentage (to account for varying screen sizes), and you'll need an array of images that map to those percentages.
I have an HTML page with some javascript functions.
It basically does this...
I have some images with transparent backgrounds (.png), I use the z-index property to sovrappose each image to the others so that I can assemble a new image.
With some buttons you can activate the javascript that makes a substitution of some images with the other.
Maybe an example will help you to understand the situation better:
Imagine a car. You have three images: glasses, wheels and body.
Each image has a transparent background so that if you see all the images together you can see the whole car.
With a button you can substitute the wheels image with another wheels image so that you can see more "versions" of the same car without creating an image for every combination (i have 345 possible combinations so this is the only way).
It works very well but it's slow :(
When I have to change only one piece, the substitution happens immediately, but when I have to change many pieces with only one click, it loads the images slowly so that it's a horrible effect.
What I need is a loading bar/wheel that appears over every other image and that disappears when the browser finishes loading the composite image.
I tried to search the web for a solution, but I only find solutions for loading the whole page. But in my case, the page doesn't change, only the inner images change.
How can I resolve this problem?
Thanks in advance,
marco
Is it possible to count how many times an animated gif has played with javascript/jquery?
Nope, that's not possible.
However, you could create an interval using setInterval with the duration of the animation which increases a counter.
As #ThiefMaster says, You can't do this with a GIF anim.
However, you can achieve what you want using a javascript animation.
Rather than saving the frames of the animation in a GIF anim, save them in a single PNG file, in a row (ie so it looks like a reel of film) either horizontally or vertically.
Display the image in an element on the page that is sized so you can only see one frame of the animation at a time, and then use Javascript to adjust the CSS offset of the image at regular intervals using setInterval or setTimeout.
This technique is known as CSS Sprite animations. It's easy to do, and it's basically the standard way of doing spot graphic animations on the web now (GIF anims are soooo 1998).
Google will give you plenty of resources to help you find out more: https://www.google.com/search?q=css+sprite+animations
You might also want to read the accepted answer to this question: Why not animated GIF instead of animated CSS sprites?
I'm trying to create several buttons that have 4-5 frames of animation in them, and rather than using the typical CSS method (where 1 image has both states, and CSS toggles between top and bottom), I was curious if anyone had an idea on how to do this with 4-5 frames rather than 2. Obviously CSS alone can't make this happen - but its becoming a real challenge to find ANY info on this. Because the images have individual animation, I can't simply use the opacity to fade into the new image, it has to contain all 4-5. Any help would be much appreciated!
Zach
have a look at k10k and see how the buttons in the top are done: animated png's and animated gifs ;)
The only way I can think of to do this without JavaScript would be for the hover state to load an animated GIF for the background image. Otherwise, you'd have to use something like jQuery to animate the background-position property instead.
for this you'll need to use an animated GIF. if you don;'t have a animated GIF creation tool installed, either use Photoshop, which may be massive overkill, or one fo the free tools like GIFted motion
A very non-traditional frowned upon way this can be done is to...
-Animate them as a flash object. Export the xml/flash and imbed it into the htm
I want take a section of a picture, for example the middle of a picure, and repeat only that section in the background of a div. Is this even remotely possible? I suppose I could do this in javascript, but that would be messy.
In theory the answer to my question should be able to take a single pixel from a picture and repeat it in a line, or as a solid background.
Does anyone have any idea how I could do this in CSS?
You might be able to achieve this effect using the CSS3 border-image property.
Unfortunately, I am not aware of a way to do this sort of thing in CSS2. Also, I don't think that you can do this via CSS sprites, because sprites don't stretch parts of your image—they just allow you to show certain parts of the image.
Steve
Contrary to what some here have stated, depending on the image, you CAN do this with CSS/Sprites. But that isn't always going to be the case. It comes down to the image you want to repeat, it's height/width in relation to the sprite it exists on, the direction you want to repeat it, and the size of the container you want it to repeat in.
(source: sampsonresume.com)
This sprite could be repeated on the left 100px for use in a sidebar, while the other portions could serve as buttons and roll-over states in a navigation. with a small change, you could make the repeatable portion horizontal.
If you want a cross-browser solution, then currently you're out of luck, especially if you want a CSS-solution.
The only way to do it with JavaScript would be through the canvas element, but that's not supported by IE.
CSS cannot do this. You can however do it server-side or by using SVG graphics or Flash. Note that doing it with a plugin would not technically be a 'background-image", you'd need to position your content over the top of it.