Ich brauche wirklich deine Hilfe. Ich erstelle einen Seitenübergang wie diesen: Ссылка
Aber ich folge dieser Animation meinem eigenen Design: Ссылка
Bisher habe ich hier experimentiert: Ссылка
Und es folgt meinem Design noch nicht. Um mein aktuelles JSFIDDLE zu sehen, prüfe es hier: Ссылка
Was mein HTML enthält, ist, dass ich zwei Divs mit der Hauptseite und der nächsten Seite von ID erstellt habe. Die erste Seite ist rot und die nächste Seite ist grün. Standardmäßig blende ich die nächste Seite div. Schau dir meinen HTML an:
%Vor%Jetzt für mein CSS repariere ich ihr Design, um die ganze Seite zusammenzubringen:
%Vor%Basierend auf meinem Experiment hier: Ссылка
Wenn ich auf das Wort klicke, hier klicken, was ein Link ist, muss es die Seite auf die nächste Seite umbrechen und genau diesem Design folgen: Ссылка
Ich habe versucht, die erste Phase der Animation zu überarbeiten, aber ich weiß nicht, wie ich mit der nächsten weitermachen soll. Ich verstehe, dass ich jQuery auf diesem verwenden muss, aber wie kann ich? Kann mir jemand helfen.
Hier ist der JSFIDDLE meiner eigenen: Ссылка
So gefunden Ihre Lösung, überprüfen Sie es hier: Ссылка
test1 = halbe Seite, test2 = ganze Seite, test3 = einzelne Seite
In diesem Beispiel gibt es zwei Hauptobjekte: #main-page und #next-page , beide haben die gleichen Standardeigenschaften außer ihrer Hintergrundfarbe: '
Ich verwende position: absolute; und die Ränder, um das Objekt zu zentrieren. Um es zu verbergen, setze ich display auf none; .
Beim Laden der Seite setze ich zunächst alle Eigenschaften des Hauptobjekts zurück und blende es ein, wie Sie unten sehen können.
Wenn .linkmain oder .linknext angeklickt wird, führen beide die gleiche Funktion aus, aber für ein anderes Objekt (main oder next).
Die Funktion blendet zuerst den Text im Hauptobjekt aus und verkleinert dieses Objekt. Nachdem beide beendet sind, rotiert das Objekt mit einer Funktion zum Übergang der Rotation.
Nachdem all dies beendet ist, blendet die Funktion das Objekt aus und klickt auf, um das neue Objekt anzuzeigen.
Nächster Schritt, der das neue Objekt zeigt:
Auch hier setze ich zuerst alle Eigenschaften des Objekts zurück und lasse es einblenden.
Als nächstes ändere ich die Hintergrundfarbe des Objekts, das mit dem des neuen Objekts übereinstimmt.
Nachdem dies abgeschlossen ist, animiere ich die Höhe, entweder die Breite, und schließe zuletzt den Inhalt des neuen Objekts ein.
JS
%Vor%Grundkonzept:
.done function eine Antwort erhalten haben, extrahieren Sie den Inhalt des main div aus der Antwort, ersetzen Sie ihn durch den aktuellen Inhalt und spielen Sie die zweite Animation ab. Sie können Ihre Animation abspielen, indem Sie die Eigenschaften einer Klasse einrichten und sie dann der Funktion addclass hinzufügen.
Es kann jedoch ein Problem geben, wenn auf verschiedenen Seiten unterschiedliche js-Skripte verwendet werden.
Es gibt auch Skripte, die diese Dinge automatisieren können, aber ich kenne sie leider nicht.
HTML:
%Vor%CSS:
%Vor%Und ein bisschen jQuery, um die CSS3 overlayAnimation Klasse auszulösen:
%Vor%