Stoppen Sie alle Transformationen, bevor Sie eine neue anwenden

Question

Also im Grunde habe ich ein Floating-Objekt, das über das parallaxify js-Plugin erfolgt. Es fügt translatex & y-Werte zu meinem Objekt hinzu.

Wenn ich jetzt ein Ereignis triggere, möchte ich, dass das Objekt den Bildschirm verlässt. Dafür verwende ich einen negativen Übersetzungswert und einige Übergänge.

Das Problem hier ist, manchmal bleibt das Objekt stecken, während es aus dem Fenster fliegt. Ganz sicher liegt es daran, dass positive und negative x-Werte zur selben Zeit hinzugefügt werden.

Ich habe versucht, den Übergang auf keine, bevor ich das Ereignis auslösen, funktioniert nicht. Das Gleiche gilt für den Datenparallaxifikationsbereich, der den Bereich angibt, in dem sich das Objekt auf dem Bildschirm bewegt. Wenn der Wert 0 ist, wird das Objekt nicht verschoben. Wenn ich dieses Attribut jedoch vollständig lösche, bewegt sich das Objekt immer noch. Ich verstehe das auch, weil parallaxify beim Laden der Seite instanziiert wird, so dass es eine Seitenaktualisierung benötigt, um zu funktionieren, aber das würde auch nicht funktionieren.

Also, wie kann ich dieses Problem lösen? Ich möchte wirklich, dass beide Effekte passieren.

Danke

/E:

HTML:

<img id="ufo" src="<?php bloginfo('template_directory'); >/images/blank.gif" data-parallaxify-range="30"></img> 

CSS:

#ufo { z-index: 2; width: 25%; height:  25%;background:url('../images/ufo.svg') bottom left no-repeat;position: absolute; top: 50%; left:10%; -webkit-transition: all 1000ms cubic-bezier(0.490, 0.585, 0.505, 1); -webkit-transition: all 1000ms cubic-bezier(0.490, 0.585, 0.505, 1.365); -moz-transition: all 1000ms cubic-bezier(0.490, 0.585, 0.505, 1.365); -o-transition: all 1000ms cubic-bezier(0.490, 0.585, 0.505, 1.365); transition: all 1000ms cubic-bezier(0.490, 0.585, 0.505, 1.365); -webkit-transition-timing-function: cubic-bezier(0.490, 0.585, 0.505, 1); -webkit-transition-timing-function: cubic-bezier(0.490, 0.585, 0.505, 1.365); -moz-transition-timing-function: cubic-bezier(0.490, 0.585, 0.505, 1.365); -o-transition-timing-function: cubic-bezier(0.490, 0.585, 0.505, 1.365); transition-timing-function: cubic-bezier(0.490, 0.585, 0.505, 1.365); } 

Css-notransition:

.notransition { 
-webkit-transition: none !important; 
-moz-transition: none !important; 
-o-transition: none !important; 
-ms-transition: none !important; 
transition: none !important; 
} 

jQuery, wird auf Rolle ausgelöst:

$('#ufo').addClass('notransition'); 
$('#ufo').removeClass('notransition'); 
$('#ufo').removeAttr("data-parallaxify-range"); 
$('#ufo').css({ 'transform' : 'translate(-'+ 150 +'%, 0px)'}); 
$('#ufo').attr("data-parallaxify-range", "30"); 

Answer 1

ich es gerade herausgefunden! Ich habe herausgefunden, dass ich Parallaxify deaktivieren kann. Ich verwende ein einseitiges Scroll-Plugin, das Ereignisse zum Verlassen der aktuellen Seite mit dem Index und dem Index der nächsten Seite enthält.

Da die Parallaxe ist nur auf der ersten Seite, die „Header“, ich bin jetzt mit:

onLeave: function(index, nextIndex, direction){ 
    if(index == 1 && nextIndex == 2){ 
    $('#background').parallaxify('destroy'); 
     $('#ufo').css({ 
     'transform' : 'translate(-'+ 150 +'%, 0px)' 
     }); 
    } else if(index == 2 && nextIndex == 1){ 
    $('#ufo').css({ 
     '-webkit-transform' : 'translate('+ 0 +'%, 0px)' 
     }); 
     setTimeout(function(){ 
     $('#background').parallaxify({ 
       positionProperty: 'transform', 
       responsive: true, 
       motionType: 'natural', 
       mouseMotionType: 'gaussian', 
       motionAngleX: 80, 
       motionAngleY: 80, 
       alphaFilter: 0.5, 
       adjustBasePosition: true, 
       alphaPosition: 0.025, 
     }); 
     }, 1000); 

Die Dauer für die Seite Scrollen ist 1 Sekunde, wenn ich von Seite 2 zum geh erste Seite, ich aktiviere die Parallaxe mit einem Timeout von 1 Sekunde. Ohne Zeitüberschreitung bleibt das Flugobjekt beim Scrollen der Seite hängen.

Funktioniert wie ein Charme.

Vielen Dank für Ihre Hilfe!