Here is the thing, I have three gifs, each one doing a part of an animation
<img src="images/carEnters.gif" id="enter">
<img src="images/carLeaves.gif" id="exit">
<img src="images/tireTracksDissappear.gif" id="delete">
these gifs are to be shown when the scrollTop reaches a certain value, which is when the div they will be shown in will be in the viewport. However, I only want the animation to happen once, meaning that I don't want it to repeat. Then, If the usar scrolls down, I want the gif where the car leaves to play (also once) and after it is done, I want the last gif to play. I have no idea if this is possible at all, to control the moment they start with the scrollTop and to pause the animation at specific time. I tried using freezeframe but it didn't work for me.
The idea is to create the effect of the car arriving when you scroll into that section, and as you leave, the car also leaves. Any idea or suggestion would be appreciated
UPDATE
I can't make it loop only once because the idea is that if the user scrolls backs up, the car should be able to enter again (or restart the animation, which I don't know if can be done with only one loop gif). The main problem would be... how to detect when the first gif ends and how to activate the second one... how to link them so it looks like a single animation
You could make a gif that doesn't loop, but just plays once: GIMP Tutorial. Any good image package (free or otherwise) should be able to do the same. Maybe you can open the existing gifs and resave them without looping?
Related
I have a slide with many animated gifs. Every slide contains an animated gif.
The effect I am trying to achieve is having the animated gifs play according to the timeline I created in photoshop and from the first frame to last when in view.
My issue is the animated gifs will start from the middle of the timeline instead of from the first frame when it is active and in view. I reckon it could be due to the loading time? I have tried increasing the time for the first frame and last frame of each slide but to no avail.
Is there a way to control the time to load and play the animated gifs when it is in view? is it something that needs to be done in javascript or jQuery?
From my point of view, CSS Sprites will give you better support that you wanted in your animation. Most important thing you need is to control over animation.
As you don't have any control over animated GIFs. You can't start them, you can't stop them, only thing they just do is to animate as soon as they load.
On the otherhand, with sprites, you can control the animation. Most importantly you can start, stop and react to browser events, pan through the animation.
As reference you can see Google Doodles which only activates when you only click on them.
For active reference, you can see the blog which might inspire you to use CSS Sprites.
https://itnext.io/creating-css-animations-using-sprite-sheet-47e2b7a3793c
Again, it's only opinion. Decisions is yours which one you will use for animation.
I've been searching for a way to realize a page-blend, but I can only find help for specific animation properties..
What I would like is to have every page-change on my website to get a fade out and and a fade in, like you would between shots in video editing, just a very short and smooth transition. And, ideally it would fade all elements of page X to the background color and fade back into pageY as soon as every element on it is loaded.
Is this a big one? I haven't seen it anywhere but I always wonder if that would be possible - to get a smooth experience without having to see elements load and reposition quickly between page changes?
At the present time, I am making my HTML5 Player with my own design and functionality.
It was decided to make a progress bar with the help of an element of <input type="range" />
The simplest example can be found a here.
During testing, the following problems appeared:
If you pause the video and click anywhere on the progress bar, the slider will move to the cursor with some kind of bounce in a big direction.
If you play around with the same progress bar, you will notice that if you hover the cursor, a block will appear with a preview of the frame and time, and if you press in the same place on the progress bar, it will switch to this of time.
The whole point is that these times are sometimes not the same. For example, you hover the cursor on the progress bar, you thought the time, for example, 00:10. And, if you don’t move the mouse and click right there, the video should go to 10 seconds (logically), but in fact, the video goes to 00:11. But this is not always the case, this is especially noticeable at the beginning of the video, and not immediately
All this is very well implemented in the a Plyr player: that is, it was pointed at the progress bar, for example, at 00:55, clicked, the slider went to this position without bounce, the current time is clearly shown as 00:55, no more, no less. Everything is ok, everything is cool!
Do you have any problems in solving these problems and have you encountered similar problems? Or is it just me?
I will be glad to any answers and advice
I'm working on a website that hosts music, pictures, and videos. I currently have 4 pages, a title page, a music page, a video page and an image page. This works well, but I would like to be able to incorporate the ability to play music and look at pictures at the same time. To do this, I created one HTML document with each former page inside a div with a descriptive class name. Then, I wrote a javascript function that shows and hides each div when it is called, so the page acts like it's 4 pages but it isn't. So i embedded the music player in a footer div that stays open as music plays, meaning you can switch back and forth between each media type while keeping the music footer open and playing. This is where the problem lies. When this is done, the image magnifier jquery function I used on my image page no longer works correctly, UNLESS the image div is shown at the beginning when the page opens. It's only then that you can switch between media types and still magnify the pictures. If the title div is shown first (like it's supposed to be), and you go to try and magnify an image, it doesn't work.
At first I thought maybe some of the external javascript libraries were negatively interacting with each other, but then I happened upon what I explained above and now I'm just at a loss as to why the images need to be the first things displayed for the magnifier to work correctly.
The jquery code I'm using is called jQuery Image Magnify and it's made by Dynamic Drive.
Edit: The way that I'm hiding and show div's is with style="display:none" to hide and style="display:block" to show.
Interesting question. Probably because the element needs to be actually visible for the jQuery Image Magnify function to run. I'm willing to bet that plugin uses imageElement.onload for the image magnification handler or something like that, which I think doesn't work if the image element is hidden.
As far as a solution goes, try setting your image to visible at when the page first loads, maybe with left set to -9999 px or something silly like that so it's technically still "visible" but the user can't see it. Then, after the image has loaded and (hopefully) been magnified or whatever the plugin does, move it to be a child of the div its page is supposed to be on and get rid of the negative left value.
In the link below there are some bubbles wich animates from left to right in a loop. If you hover over one of them, it gets larger and stops animating. My problem is that the bubble doesnt stop for very long, I want it to stop permanently, until you click on it
http://jsfiddle.net/jukke/SU4gJ/1/
You are also more than welcome to rewrite parts of the code to make it better/cleaner. I dont really have much experience coding :)