Wie man CSS Animation von einer bestimmten Web site spielt

Question

ziemlich neu zur Web-Entwicklung, also erträgt mit mir. Ich habe derzeit 3 ​​Webseiten: Home, Portfolio and Contact. Die Seite Home hat einen Hintergrund, der die Hälfte der Seite abdeckt; Portfolio and Contact haben den gleichen Hintergrund, aber es deckt nur ein Viertel der Seite ab.

Ich möchte den Hintergrund animieren 'nach oben', wenn Sie von Home zu Portfolio oder Contact wechseln; und der Hintergrund zum Animieren "nach unten" beim Bewegen von Portfolio oder Contact zu Home. Zwischen Portfolio und Contact sollte keine Animation stattfinden.

Ich habe es geschafft den Hintergrund erfolgreich Animieren ‚up‘ zu erhalten, wenn die Portfolio oder Contact Seiten Last und ‚nach unten‘, wenn die Home Seite geladen wird mit dem folgenden CSS:

//Home Page 
body { background: #fbfbfb url("../gallery_gen/33123835311a4a19ce0578c280449a50.png") no-repeat scroll center top; 
    animation: bgSlideOut 1s ease-out; 
    animation-fill-mode: forwards; 
} 

@keyframes bgSlideOut { 
    from { background-position: 0 -370px; } 
    to { background-position: 0 0; } 
} 



//Portfolio and Contact Pages 
body { background: #fbfbfb url("../gallery_gen/33123835311a4a19ce0578c280449a50.png") no-repeat scroll center top; 
    animation: bgSlideOut 1s ease-out; 
    animation-fill-mode: forwards; 
} 

@keyframes bgSlideOut { 
    from { background-position: 0 0; } 
    to { background-position: 0 -370px; } 
} 

jedoch die Portfolio Animation Spielen Sie beim Wechsel von Contact zu Portfolio und umgekehrt. Gibt es eine Möglichkeit, dass ich die Animation nur abspielen kann, wenn ich von Home zu Portfolio/Contact und umgekehrt gehe?

Answer 1

Die Verwendung einer Animation ist nicht der richtige Ansatz für diese Situation.

Verwenden Sie einfach

transition: background-position 1s; 

und stellen die verschiedenen Hintergrund-Positionswerte in den verschiedenen Klassen

Answer 2

Der Übergang CSS ist gut, aber nicht die Kernfrage beantworten - wie diese Seiten wissen, ob den Übergang nicht ausführen? Sie müssen wissen, von welcher Seite der Benutzer "kam". Diese Information muss an die Seite übergeben werden. CSS allein kennt den Browserverlauf nicht.

Wenn Sie Ihr Setup nicht kennen (3 statische HTML-Seiten - Einzelseiten-App, JSP/PHP), müssen Sie festlegen, wie die Home-Seite dies den Seiten mitteilen kann - durch Links zu ihnen (Querystring), UI-Logik Verfolgen von "Verlauf" in demselben DOM oder durch Sitzungsverarbeitung auf dem Server, der die Daten weiterleitet. Daher würden Sie entweder in der Seiteninitialisierung JS oder in der JSP/PHP-Ebene einen CSS- "Hook" wie eine Klasse im body-Tag hinzufügen, der das Übergangs-CSS von der Homepage übernimmt und diese Klasse auslässt wenn Sie von der anderen Inhaltsseite kommen.

Answer 3

Sie würden diese CSS-Animationen wie verschiedene Klassen gesetzt haben und Sie sollten Sie ein Skript verwenden, um die Klassen zu zielen und wechseln, dann sollten Sie die Skripte zu einem Anker-Tag verknüpfen

<a href="/portfolio.com" id="portfolio" onclick="animate">Portfolio</a> 
<style> 
@keyframes bgSlideOut { 
    from { background-position: 0 -370px; } 
    to { background-position: 0 0; } 
} 
@keyframes bgSlideOut2 { 
    from { background-position: 0 0; } 
    to { background-position: 0 -370px; } 
} 
</style> 
<script> 
function animate(){ 
var target = document.getElementById('portfolio'); 
if(target.className == bgSlideOut) 
{ 
target.className = bgSlideOut2; 
} 
} 
</script>