Keep animating CSS on page load?
I want my CSS animations for elements in my header.php to continue smoothly across different pages.
So if I had an animation with a 200 second loop and 80 seconds, I clicked on the about us page, would the animation still be 80 seconds on page load?
Is this possible, and if so, how? Thank.
source to share
You can do this if it is some kind of keyframe animation, for example:
CSS
@keyframes colorchange {
0% {background: red;}
50% {background: green;}
100% {background: yellow;}
}
div {
width: 100px;
height: 100px;
background: red;
-webkit-animation: colorchange 5s linear infinite;
animation: colorchange 5s linear infinite;
-moz-animation: colorchange 5s linear infinite;
}
Js
$(document).ready(function(){
var animationTime=0;
var intId = setInterval(function(){
animationTime++;
},1000);
var postTime = function(link){
$.ajax({
type: 'POST',
url: link,
data: {'variable': animationTime},
});
}
$('a').click(function(){
window.onbeforeunload = postTime($(this).attr('href'));
})
})
PHP
$myval = $_POST['variable'];
echo "$('div').css('animation-delay', '-".$myval."s')"
You can use a negative animation delay to start the animation from some point, but somehow this method is not ideal, but worth a try.
PS But it's better to use AJAX to reload the page in such cases :)
source to share
Quick rough thought
time = 200000;
var distance = 300;
window.currentTime = 0;
$('#element').animate({ left: distance },
{
duration: time,
step: function(now, fx) {
window.currentTime = Math.round((now*time)/distance);
}
});
$('a').on("click", function(e){
e.preventDefault();
window.location.href = "http://yoururl.com/?startingPoint=" + (time - window.currentTime);
});
then in each file do something like
if($_GET['startingPoint']){
echo 'time = '.$_GET['startingPoint'];
}
else{
echo 'time = 200000';
}
instead of a javascript time variable, sorry if theres errors in this, literally just pulled this out of my butt, but the concept is there and no ajax required.
source to share