Wie kann ich einen anderen Bildübergangseffekt verkleinern?

8

Ich möchte Bilder mit Verkleinerung auf das 2. Bild, das 3. Bild usw. übertragen. Ich habe versucht, es mit einigen Keyframes über Hintergrundbild und Skalierung selbst zu machen, und es hat anständig funktioniert, außer es gab zwei Probleme. 1. Mein Text und meine Schaltflächen wurden ebenfalls skaliert. 2. Die Dauer der Bilder war zu kurz. Ich würde es einschließen, aber ich habe es gelöscht, da es nicht das war, wonach ich gesucht habe. Ich bin mir nicht sicher, ob dies mit reinem CSS möglich ist, zumindest nicht einfach. Also neige ich dazu, JS verwenden zu müssen? Hier ist mein aktueller Code.

.jumbo {
  display: flex;
  flex-direction: column;
  justify-content: Center;
  margin: 0;
  width: 100vw;
  height: 100vh;
  min-height:100vh;
  background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.3)),
    url("images/j-img1.png");
  background-repeat:no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.jumbo-text {
  text-align: center;
  color: white;
  font-weight: 600;
}

/* Jumbo button */
.vmore-button {
  text-align: center;
  border: 2px solid white;
  text-transform: uppercase;
  padding: 16px;
  align-self: Center;
  margin: 20px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 24px;
  transition: 0.5s ease;
  color: white;
  max-height: 70px;
  cursor:pointer;
}
    <div class="jumbo">
      <h2 class="jumbo-text">
        Welcome to LLG
      </h2>
      <h3 class="jumbo-text animated slideInLeft delay-1s" style="color:#e8e8e8; font-weight:500;">
        Memorable Gaming Experience, High Quality Servers.
      </h3>
      <a class="vmore-button hvr-icon-pulse-shrink" href="#viewmore">View more<br><i class="fas fa-arrow-circle-down hvr-icon"></i></a>
    </div>
Erweitern Sie das Snippet

html css Tim
quelle
Ich denke, es war besser, wenn Sie den Code angegeben haben, den Sie versucht haben. Ich kann nicht sehen, worüber Sie sprechen. Oder vielleicht ist mein Englisch nicht gut
Ayman Morsy
Ich bin gespannt auf die +8 bei dieser unklaren Frage, bei der es keinen Code für eine Animation gibt
Temani Afif

Antworten:

2

Sie benötigen einen Container-Div und zwei untergeordnete Teiler. Das erste Kind sollte Bilder zoomen / übergehen, das zweite Kind sollte Ihren Text enthalten. Sowohl die Bild- als auch die Textteiler sollten absolut so positioniert sein, dass sie übereinander liegen. Sie können ändern, welche Bereiche / Bilder aktiv / sichtbar sind, indem Sie eine bestimmte Klasse auf den übergeordneten Container anwenden.

<div class="container">
  <div class="images">
    <img>
    <img>
    <img>
  </div>
  <div class="text">
    <span>TextA</span>
    <span>TextB</span>
    <span>TextC</span>
  </div>
</div>
Tom Shaw
quelle
Danke, ich denke, dies wird ein guter Ausgangspunkt für das sein, was ich erreichen möchte.
Tim
1
Nur noch ein paar Fragen. Ich sollte sowohl auf Bilder als auch auf Text absolut anwenden. Ich habe damit rumgespielt und das getan, und Text erscheint über den Bildern. Die Bilder befinden sich jedoch immer noch im normalen Dokumentenfluss. Erst wenn ich die eigentlichen Bilder selbst absolut betrachte und wenn ich das tue, liest es sie von unten nach oben. Und ich muss JS, um die sichtbaren Klassen anzuwenden, oder?
Tim
1
Das ist eine ausgezeichnete Frage. Die Bilder können absolut gestylt werden und Sie können einen Opazitätsauflösungseffekt erzielen oder sie können in einem Inline-Block angezeigt werden, in dem die Bilder von den Seiten hineingleiten, oder Sie können einen Block anzeigen und animieren, indem Sie translateY von unten nach oben drehen. Schauen Sie sich diese youtu.be/tkXUzVNl6Rw?t=68
Tom Shaw
Hört sich gut an. Aber haben Sie eine Idee, warum die Bilder vom letzten zum ersten angezeigt werden?
Tim
0

Ich weiß nicht, ob Sie das mit Ihrer Anfrage meinen oder nicht

.jumbo {
  display: flex;
  flex-direction: column;
  justify-content: Center;
  margin: 0;
  width: 100vw;
  height: 100vh;
  min-height:100vh;
  background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.3)),
    url("https://img.freepik.com/free-vector/abstract-colorful-flow-shapes-background_23-2148258092.jpg");
  background-repeat:no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.jumbo-text {
  text-align: center;
  color: white;
  font-weight: 600;
}

/* Jumbo button */
.vmore-button {
  text-align: center;
  border: 2px solid white;
  text-transform: uppercase;
  padding: 16px;
  align-self: Center;
  margin: 20px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 24px;
  transition: 0.5s ease;
  color: white;
  max-height: 70px;
  cursor:pointer;
}
@media only screen and (max-width: 600px) {
  .jumbo {
    background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.3)),
    url("https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg");
  }
}
<div class="jumbo">
  <h2 class="jumbo-text">
    Welcome to LLG
  </h2>
  <h3 class="jumbo-text animated slideInLeft delay-1s" style="color:#e8e8e8; font-weight:500;">
    Memorable Gaming Experience, High Quality Servers.
  </h3>
  <a class="vmore-button hvr-icon-pulse-shrink" href="#viewmore">View more<br><i class="fas fa-arrow-circle-down hvr-icon"></i></a>
</div>
Erweitern Sie das Snippet

Ein Bild wird platziert, wenn die Breite 600 und weniger beträgt. Sie können es testen

Hesham Mohamed
quelle