Hallo zusammen,
womit könnte ich folgendes realisieren:
Die Website wird aufgerufen, am Start hängt ein Bild vom Vorhang davor und öffnet sich nach 2 Sekunden. Dahinter ist dann die eigentliche Website zu sehen.
Es ist eine Art Vorhang. Es soll ein einfaches Bild sein, welchen sich nach oben weg slidet.
Herzlichen Dank
Es gibt einen hook, in den du ein Bild oder eventuell besser noch ein svg setzen könntest: wp_body_open
Es sollte nicht schwer sein das Bild so mit einem z-index zu belegen, der dann den eigentlichen Inhalt überdeckt. Eine getimete Animation der Transformation sollte dann auch möglich sein.
Also für die child-theme functions.php:
add_action('wp_body_open', function() {
if(is_front_page()){
echo '<div class="body-overlay"></div>';
}
});
für das Quick css:
.body-overlay {
position: fixed;
display: block;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
z-index: 5000;
animation: transformUp 3s ease 2s forwards; /** for shortform see: https://www.w3schools.com/cssref/css3_pr_animation.php ***/
}
.body-overlay {
background-image: url(/wp-content/uploads/test-london.jpg);
background-repeat: no-repeat;
background-size: cover;
}
@keyframes transformUp {
0% {
transform: translate(0px, 0px);
}
100% {
transform: translate(0px, -102vh);
}
}
Das sollte man noch ein wenig verfeinern, und auch browser übergreifend – zumindest mit -webkit prefix machen.
Das animation timing – eventuell mit bezier Kurve animieren.
I take my example page offline again. It was probably not that urgent.