0
Ich habe ein Bild, wo ich möchte, dass es nach unten rechts geht, wenn ich daran vorbei blättern und animieren, wie es dort geht. Dieser Teil funktioniert.CSS-Animation wird beim Entfernen der Klasse nicht animiert
Während ich zurück scrolle, möchte ich, dass es auf die gleiche Weise zurück zum ursprünglichen Ort animiert wird. Hier brauche ich Hilfe.
Es springt einfach zurück zum ursprünglichen Punkt ohne den Übergang. Wie kann ich das richtig funktionieren lassen?
var $window \t \t = $(window);
var $container \t \t = $('.container');
var containerTop \t = $container.offset().top;
$window.scroll(function() {
\t if($window.scrollTop() > containerTop) {
\t \t pullContainer();
\t } else {
\t \t revertContainer();
\t }
});
function pullContainer () {
\t $('.container').addClass('move');
\t console.log('pullContainer');
}
function revertContainer () {
\t $('.container').removeClass('move');
\t console.log('revertContainer');
}#header, #content, #footer {
\t height: 75vh;
}
#header {
\t background: #ccc;
}
#content {
\t background: #666;
}
#footer {
\t background: #999;
}
.container {
\t position: static;
\t left: 0;
\t top: 0;
\t transition: all 1s ease;
}
.move{
\t position: fixed;
\t left: calc(100vw - 400px);
\t top: calc(100vh - 400px);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header"></div>
\t <div id="content">
\t \t <div class="container">
\t \t \t <img src="http://lorempixel.com/400/400" />
\t \t </div>
\t </div>
\t <div id="footer"></div>
Ich würde raten, weil Sie von 'festen' zu 'statischen' wechseln, so dass es nur auf 0 0 zurückschnappt. Sie müssten zuerst die Positionswerte umstellen ... und dann die Positionseigenschaft ... Ich denke mal. –
** 1 - ** Entferne das 'position'-Attribut aus der .move-Klasse ** 2 - ** ändere dann die .container-Position von' static 'auf' relative ' –
Ich stimme mit @Paulie_D überein. Sehen Sie sich dies an: https://jsfiddle.net/84s4twer/ – Mojtaba