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
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.
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?
I'm experiencing a very weird chrome (45 and 46 windows only) behaviour with css3 transition using fullpage.js
The transition "freeze" 80% of the time when I'm going from the first to the second section of a website. And then, everything work fine.
Take a look by yourself :
first you will need to login as the website is still under construction.
Http://www.evandorlot.com/wp-login
Login : Guest
Pass: Luckyone
then, come back to the home page www.evandorlot.com
Sroll down, here's the bug. From the first to the second slide of the website, the transitions "freeze" they pop instantly to their final stage.
After pressing ctrl+f5 and trying again, sometime it work, sometime no... it seams to be a chrome bug as it work 20% of the time. But I would like to fix it somehow. For this I need to know what cause the issue.
I'm working on this bug for more than a week now and don't find any solutions:
I tried to disable all the TweenMax animations, then all the css3 animations that are not vital. I also disabled all my custom javascript expet fullpage.js function without any configuration, I tried removing the image from the second slide, deleting the second slide, swapping the second slide with another, replacing the image, the text, deleting the diamond icon, deleting the menu on the bottom right corner, actiavating GPU acceleration by adding CSS3 translateZ to each elements that is animated on the first and second slide... Nothing fixed the bug.
The only way to make it working properly is to empty ALL the content from the second slide and leave the entire section empty. So I guess something cause the issue, but I really don't know what.
I know it's a long shot but if anyone has already experienced similar bug or has a suggestion to fix it. It will be very useful as I'm totally desperate :)
I'd like to have an effect in a lightbox gallery (preferably FancyBox): When clicking on the thumbnail image, the lightbox opens and here it goes:
the image needs to get cut in half, with one part dropping or
sliding in from the top and the other half from the bottom.
A little bouncing effect would be great as well, especially for the
next and previous buttons which need to drop/slide in as well.
Do you know what I mean? Is that possible in Javascript at all? (No Flash if possible.)
I haven't found specific tutorials around the web yet and don't really know which exact term to search for.
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 :)