Giving VTT subtitles a fading out effect - javascript

I'm currently trying to implement or test a new feature on my locally hosted page which plays video with subtitles on. The subtitle format being VTT.
I've been trying to find how to actually be able to edit the VTT itself as I am trying to give a fading out effect for the subtitle.
This probably won't be helpful but I just tried implementing it via the style.css part of my project but sadly it only affects the texts of the page and I am not sure how to make it work for the texts from the VTT file itself.
Down below is the part I've tried to work out on the style.css
.fade-in {
animation: fadeIn 2s;
}
.fade-out {
animation: fadeOut 3s;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}

There is a ::cue selector to modify the subtitle text on a video.
But not all css properties are allowed.
You can change the color or opacity but you can not set the animation property.
Anyway, what you could do is to use css variable to set the opacity and the css variable could change with an animation
:root {
--opacity-value: 1
}
::cue {
opacity: var(--opacity-value);
}
#keyframes flickerAnimation {
0% { --opacity-value: 1; }
50% { --opacity-value: 0; }
100% { --opacity-value: 1; }
}
video{
animation: flickerAnimation 1s infinite;
}
An working example could be found here.

Related

How to repeat SVG animation after reload using Javascript

I need your help
i created a pre-loading screen for a website, and the logo SVG animation is going well, but the only part I m confused with is that:
Every time I reload, the animation doesn’t happen, yet the the 3 seconds of the loader is functional.
Here is the website: http://itsrev.io
here is the code:
var loaderScreen;
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("banner").style.display = "block";
}
function loadingFunction() {
loaderScreen = setTimeout(showPage, 4000);
}
CSS:
/**************************************
Preloader
***************************************/
#loader {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#banner {
display: none;
}
/* Add animation to "page content" */
#banner {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
#keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
The image is being cached. Once the animation has finished, it remains cached in that state.
Possible solutions:
Consider inlining the SVG in your HTML, or
Force the browser to reload the SVG each time. you can do this by having the server set cache control headers for the SVG file. Or you can use javascript on the page to change the URL of the image each time.
For example, something like the following:
<div id="loader">
<img width="400"/>
</div>
function loadingFunction() {
var url = "imgs/logo_svg_animated.svg?r=" + Math.random();
document.querySelector("#loader img").setAttribute("src", url);
loaderScreen = setTimeout(showPage, 4000);
}
The browser things that logo?r=12345 is a different file to logo?r=98765.
This is not an answer. Take it as a long comment.
In your code you have many animations looking like this:
#keyframes whatever {
75% {
opacity: 0;
}
100% {
opacity: 1;
}
0% {
opacity: 0;
}
}
Please note that after 100% comes 0%.
Also: the code is extremely verbose with one animation like this per polygon.
There is another kind of animation in your code looking like this:
#keyframes whatever2 {
0% {
transform: translate(144.77000427246094px, 23.770000457763672px)
translate(-144.77000427246094px, -23.770000457763672px)
translate(-75px, 0px);
}
62.50% {
transform: translate(144.77000427246094px, 23.770000457763672px)
translate(-144.77000427246094px, -23.770000457763672px)
translate(-75px, 0px);
}
75% {
transform: translate(144.77000427246094px, 23.770000457763672px)
translate(-144.77000427246094px, -23.770000457763672px)
translate(0px, 0px);
}
100% {
transform: translate(144.77000427246094px, 23.770000457763672px)
translate(-144.77000427246094px, -23.770000457763672px)
translate(0px, 0px);
}
}
I think you created the CSS code dynamically and your script is not working properly.
Maybe you should need to take a look at the script you have.maybe you should test it first with only one polygon.

Fade in on load after 5 seconds from 1st background image to 2nd background image

I have an background image of a building (taken many many years ago). After 5 seconds I would like to fade in a second background image of the same building (up to date picture). Keeping the second background picture until the page is reloaded. Is this possible with CSS, javascript, and jquery and the lazyload plugin?
I tried to make it done without JavaScript.
CSS looks like:
body {
background: url('path_to_your_background_image_1');
animation: change_background 1s ease-out 5s 1 forwards;
}
#keyframes change_background {
to {
background-image: url('path_to_your_background_image_2');
}
}
Here's an example http://jsfiddle.net/u9jw7k5q/1/
Here is the JS + CSS solution to this. This might help you.(tested in Chrome)
var timer;
function swapImage() {
var slide = document.getElementById('slide');
slide.className = "fade-in";
slide.src = "http://www.w3schools.com/images/w3cert.gif";
clearTimeout(timer);
}
timer = setTimeout("swapImage()", 5000);
#keyframes fadeIn {
to {
opacity: 1;
}
}
.fade-in {
opacity: 0;
animation: fadeIn .5s ease-in 1 forwards;
}
<img height="200" id="slide" src="http://www.w3schools.com/html/html5.gif" width="400" />

Change initial style value with animation

I have an element
<form class="fade-in-form">...</form>
with an animation
.fade-in-login-form{
opacity: 0;
-webkit-animation: fadein 2s; !important;
-webkit-animation-delay: 3s; !important;
}
#-webkit-keyframes fadein {
from {
opacity:0;
}
to {
opacity:1; !important;
}
}
and I want the element to be invisible at first, but then fading in.
The problem is that the form is invisible at first (opacity: 0;), then fades in, but after the animation flashes to be invisible again! Why doesn't the animation overwrite the initial value of opacity: 0; with opacity: 1;? And how can I achieve what I want?
If the solution requires Javascript: I prefer AngularJS over jQuery.
An animation by default only applies as long as it is running. When it ends running, it no longer applies
If you want to change this behaviour, you need to use the animation-fill-mode property
In your case, the value is forwards
animation-fill-mode: forwards;
(With prefixes if needed)
First, syntax-wise, I think you should not have a semi-colon between your values and !important (not a good one to use, by the way) :
-webkit-animation: fadein 2s !important;
Second, I guess the styles are not applied because your elements are not loaded ; if you set display to block on the form and set it back to block after page content is loaded with javascript (see code below), does it work better ?
document.addEventListener("DOMContentLoaded", function(event)
{
document.getElementById("form").style.display = "block";
});
codepen example
Just leave off the opacity: 0; in your first selector:
.fade-in-form {
-webkit-animation: fadein 2s 3s; /* Chrome, Opera 15+, Safari 5+ */
animation: fadein 2s 3s; /* Chrome, Firefox 16+, IE 10+, Opera */
}
#-webkit-keyframes fadein {
0% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#keyframes fadein {
0% { opacity: 0.0; }
100% { opacity: 1.0; }
}
As #sodawillow mentioned try never ever to use !important but if you really have to use it like this: property-name: property-value !important;

delayed logo fading into website?

Just wondering whats the best way to go about having the logo in top left corner to fade in after about 5 seconds after user has been on page?
Here is the http://jsfiddle.net/elroyz/sjD8X/ with the logo in the corner
body {
background-color:#000;}
i only put this in because it wouldnt let me post without code
i read something about jquery delay but i know next to nothing about it so thought there might be another option
Thanks in advance
$('img').delay(5000).fadeOut(250);
This will fade out the img after 5 seconds. The time in the code is in ms.
Fore more info on this see
api.jquery.com/delay/
api.jquery.com/fadeout/
api.jquery.com/fadein/
try to use this transitions.
http://www.problogdesign.com/coding/get-started-with-css3-transitions-today/
goodluck!
HTML
<img onload="this.style.opacity='1';" src="image path" />
CSS
img {opacity:0;-moz-transition: opacity 2s;-webkit-transition: opacity 2s;-o-transition: opacity 2s;transition: opacity 2s;}
CSS 3 animation. (With vendor prefixes because it is still new and experimental):
#-webkit-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-o-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
#logo {
-webkit-animation: fadein 5s infinite;
-moz-animation: fadein 5s infinite;
-o-animation: fadein 5s infinite;
animation: fadein 5s infinite;
}

css3 image fadein

I'm trying to have images fade in with css3 once they're loaded. The problem is the way my methods are currently chained it fades it in and out for a split second twice. instead of just being blank and fading in.
my solution was to try and split out the animation code into a seperate class that i apply AFTER i initially set the opacity to zero (i do this in JS so people without js enabled can still see the images).
It's still not working though
I assume its because in this code its setting the opacity to zero and immediately adding an animation transition class which somehow catches the opacity .css() method while its changing still (dont know how this is possible,... shouldnt it complete opacity before moving on to add class?)
// nice thumbnail loading
$('.thumb').css('opacity','0').addClass('thumb-animated').on('load', function(){
$(this).css('opacity','1');
});
.resources .thumb-animated {
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-ms-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
}
Well...
Why do you set opacity to 1 in jQuery?
If you want to use CSS3 and not simply fadeIn(200) why don't you add "opacity: 1" to css class thumb-animated?
EDIT:
Note that load will not be triggered if the image is already in cache.
Also, !important has to be added to rewrite the rule modified via javascript.
There you go: http://jsfiddle.net/enTCe/5/
This seems to work perfectly outside JSfiddle, on JSfiddle looks like it waits for all the images to be loaded.
What about using just css animations? No JS code is needed.
#-webkit-keyframes opacityChange {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes opacityChange {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-ms-keyframes opacityChange {
0% { opacity: 0; }
100% { opacity: 1; }
}
.thumb {
width: 200px;
height: 200px;
opacity: 1;
-webkit-animation: opacityChange 5s;
-moz-animation: opacityChange 5s;
-ms-animation: opacityChange 5s;
}
You can wait adding the class to the image is loaded
$('.thumb').css('opacity','0').on('load', function(){
$(this).addClass('thumb-animated').css('opacity','1');
});
Try something like this:
$('#thumb').hide();
myImg = $('<img>').attr('src', 'thumb.png').load(function(){
$('#thumb').html(myImg).fadeIn(200);
});

Categories

Resources