CSS/JS- Bild in zwei Animationen aufteilen

Question

Ich würde gerne meine Webseite mit CSS und JS animieren. Meine erste Webseite besteht aus einem Bild, das horizontal und vertikal zentriert ist, und ich würde es lieben, wenn ich dieses Bild in zwei Bilder aufteilen würde, eines, das nach oben und unten geht, so dass meine zweite Webseite erscheint. Ich weiß nur nicht, wie ich mein Bild in zwei teilen kann.

ist mein HTML grundsätzlich von

<div class="page1"> 
     <img src="img/LogoEpaissiBlanc.png" alt="Logo" id="logoindex1"> 
</div> 

und meine CSS gemacht:

.page1 { 
height: 723px; 
display: table-cell; 
vertical-align: middle; 
} 


#logoindex1{ 
    margin: auto; 
    display: block; 
width: 30%; 
} 

Answer 1

zu tun, dass Sie das Bild in zwei mit Photoshop oder ein ähnliches Werkzeug und halten die aufspalten müssen werde Bilder zusammen mit CSS. Fügen Sie dann einen Übergang hinzu, der bewirkt, dass sich die eine Hälfte in die eine Richtung und die andere in die andere Richtung bewegt.

Diese link könnte helfen.

Answer 2

Anstatt Ihr Bild in zwei aufzuteilen, können Sie es als Hintergrund für zwei div s einstellen könnte, jede Größe die Hälfte der Größe des gesamten Bildes zu sein. Das linke Bild background-position: left und das rechte Bild background-position: right;

Hier ist eine Geige Sie begonnen hätte hätte zu bekommen: https://jsfiddle.net/tf45z2cy/

#img-left, #img-right { 
    background-image: url("http://placehold.it/100/100"); 
    width: 50px; 
    height: 100px; 
    float: left; 
} 
#img-right { 
    background-position: right; 
} 

Answer 3

Ich würde gerne wissen, was Sie wirklich tun mögen, teilen ein Bild in zwei Stück? oder zwei Bilder eins geht nach oben und eins geht unter?

Wenn der Fall mit zwei Bildern können Sie diese link besuchen, in den Antworten, werden Sie sehen, wie man Bilder teilen, das so etwas wie:

#image { 
 
    position: relative; 
 
\t width: 200px; 
 
    \t } 
 

 
    \t #half-image { 
 
    \t \t position: absolute; 
 
    \t \t top: 0; 
 
    \t \t left: 0; 
 
    \t \t width: 50%; 
 
    \t \t overflow: hidden; 
 
    \t }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="image"> 
 
\t <img src='https://placehold.it/200x200' id='outer' class='img-responsive'> 
 
\t <div id = "half-image"> 
 
\t \t <img src='https://placehold.it/200/e8117f' id = 'inner'> 
 
\t </div> 
 
</div>

Dann sind Sie Um Ihre Bilder animieren zu können, müssen Sie animate.css zu Ihren Bildern verwenden. Zeigen Sie den Quellcode auf GitHub here an. In der Datei README erklärt er, wie man es benutzt!

#image { 
 
    position: relative; 
 
    top: 0; 
 
    \t left: 0; 
 
\t width: 200px; 
 
    \t } 
 

 
    \t #half-image { 
 
    \t \t position: absolute; 
 
    \t \t top: 0; 
 
    \t \t left: ; 
 
    \t \t width: 50%; 
 
    \t \t overflow: hidden; 
 
    \t } 
 
    
 
    img { 
 
    position: fixed; 
 
} 
 
.fadeOutDown { 
 
-webkit-animation-name: fadeOutDown; 
 
-moz-animation-name: fadeOutDown; 
 
animation-delay: 2s; 
 
} 
 
.fadeOutUp { 
 
-webkit-animation-name: fadeOutUp; 
 
-moz-animation-name: fadeOutUp; 
 
animation-delay: 2s; 
 
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css"> 
 

 
<div id="image"> 
 
\t <img src='https://s19.postimg.org/t63mp4f1f/left-half.png' class="animated fadeOutDown" > 
 
\t <div id = "half-image"> 
 
\t \t <img src='https://s19.postimg.org/7jom81ygj/right-half.png' class="animated fadeOutUp" > 
 
\t </div> 
 
</div>

Blick auf jsfiddle.net