Продолжить анимацию CSS при загрузке страницы?

Я хочу, чтобы мои анимации CSS для элементов в моем header.php продолжались плавно на разных страницах.Продолжить анимацию CSS при загрузке страницы?

Так что, если бы у меня была анимация с 200-секундной петлей и 80 секунд, я нажал на страницу о нас, анимация все равно будет на 80 секунд на странице загрузки?

Возможно ли это, и если да, то каким образом? Благодарю.

источник

2014-10-28 Trent Riddington

если вы можете получить статус текущей анимации на выходе страницы и отправить ее на следующую страницу, то следующая страница может просто запустить анимацию в этой точке. но удача надежно обнаруживает, когда страница выходит. –

Возможно, вам лучше оставить заголовок на месте и использовать AJAX для загрузки нового содержимого страницы/настройки URL. – naththedeveloper

Вы не предоставляете достаточно информации, чтобы сообщить нам, как вам помочь. Чтобы сделать модификацию на вашей странице, не касаясь анимации заголовка, мой совет - правильно использовать Javascript для изменения части, которую вы хотите изменить, и не затрагивая другую часть веб-страницы. –

Вы можете сделать это, если это какой-то ключевые кадры анимации, как:

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; 
}

$(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')"

Вы можете использовать отрицательную задержку анимации, чтобы начать анимацию с некоторой точки, но каким-либо образом этот метод не идеален, но стоит попробовать.

PS Но лучше использовать AJAX для перезагрузки страницы в таких случаях :)

источник

2014-10-28 15:03:44

Быстрый грубой мысли

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);   
});

затем в каждом файле сделать что-то вроде

if($_GET['startingPoint']){ 
    echo 'time = '.$_GET['startingPoint']; 
} 
else{ 
    echo 'time = 200000'; 
}

вместо переменная времени javascript, я извиняюсь, если theres ошибки в этом, буквально просто вытащил это из моего приклада, но концепция есть, и нет ajax nee Ded.

источник

2014-10-28 15:11:37 Typhomism

Продолжить анимацию CSS при загрузке страницы?

ответ

Смежные вопросы