Dieses Forum nutzt Cookies
Dieses Forum verwendet Cookies, um deine Login-Informationen zu speichern, wenn du registriert bist, und deinen letzten Besuch, wenn du es nicht bist. Cookies sind kleine Textdokumente, die auf deinem Computer gespeichert sind; Die von diesem Forum gesetzten Cookies düfen nur auf dieser Website verwendet werden und stellen kein Sicherheitsrisiko dar. Cookies auf diesem Forum speichern auch die spezifischen Themen, die du gelesen hast und wann du zum letzten Mal gelesen hast. Bitte bestätige, ob du diese Cookies akzeptierst oder ablehnst.

Ein Cookie wird in deinem Browser unabhängig von der Wahl gespeichert, um zu verhindern, dass dir diese Frage erneut gestellt wird. Du kannst deine Cookie-Einstellungen jederzeit über den Link in der Fußzeile ändern.

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
BG / Top nach dem Laden langsam rauszoomen
#1
Hab ein BS4 Standard-Template und oben ein BG-Foto, dass ich gern nach dem Laden der Seite um ca. 50% rauszoomen würde - also man lädt, erhält den Mittelpunkt-Bereich des Fotos in groß und dann zoomt das Bild langsam (4-6 sec. o.ä.) auf Originalgröße/Fullscreen raus.

Bei der Tablett- und Handy-Ansicht soll das BG-Bild in voller Größe (seitenbreit) ohne animtaion angezeigt werden.

Derzeitiger Code ist:

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light bg-white sticky-top bg-white border-bottom box-shadow" id="mainNav">
       <a class="navbar-brand js-scroll-trigger" href="index.html" title="Titeltext> home">Titeltext</a>
       <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
       </button>
       <div class="collapse navbar-collapse" id="navbarResponsive">
               <ul class="navbar-nav ml-auto">
               <p class="nav-link bold">untertiteltext</p>
               </ul>
        </div>
 </nav>

Weiß jemand, wie man so etwas machen kann?
Zitieren
#2
Wo soll das Bild sein? Ich seh hier nur den Code für die Navbar?
Zitieren
#3
sorry Smile

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light bg-white sticky-top bg-white border-bottom box-shadow" id="mainNav">
      <a class="navbar-brand js-scroll-trigger" href="index.html" title="Titeltext> home">Titeltext</a>
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
               <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
              <ul class="navbar-nav ml-auto">
              <p class="nav-link bold">untertiteltext</p>
              </ul>
       </div>
</nav>

<!-- Masterhead -->
   <header class="masthead text-white text-center">
     <div class="overlay"></div>
     <div class="container">
       <div class="row">
         <div class="col-xl-9 mx-auto">
           <h1 class="mb-5 greywhite wide">großer Text</h1>
         </div>
         <div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
 <p class="lead bold greywhite wide">kleinerer Text auf dem Foto<p>
         </div>
       </div>
     </div>
   </header>



---------------------------------------------------
Die CSS
---------------------------------------------------


/* header */

header.masthead {
 position: relative;
 background-color: #990000;
 background: url("../img/bg-masthead.jpg") no-repeat center center;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 padding-top: 8rem;
 padding-bottom: 8rem;
}

header.masthead2 {
 position: relative;
 background-color: #990000;
 background: url("../img/bg-masthead.jpg") no-repeat center center;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 padding-top: 5rem;
 padding-bottom: 5rem;
}

header.masthead .overlay {
 position: absolute;
 background-color: #212529;
 height: 100%;
 width: 100%;
 top: 0;
 left: 0;
 opacity: 0.3;
}

header.masthead h1 {
 font-size: 2rem;
}

@media (min-width: 768px) {
 header.masthead {
   padding-top: 12rem;
   padding-bottom: 16rem;
 }
 header.masthead h1 {
   font-size: 3rem;
 }
}
Zitieren
#4
Ich weis nicht ob ich das richtig verstanden habe.
Meinst du das so
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
[-]
Willkommen im ersten deutschen Bootstrap-Forum
You have to register before you can post on our site.

Benutzername/E-Mail:


Passwort:





[-]
Letzte Beiträge
Schacteln 2er div s nebneinander
Last Post: The-Error
Gestern 11:37
» Replies: 3
» Views: 69
Navbar Dropdown 2 columns funktioniert n...
Last Post: Niamh
Gestern 11:29
» Replies: 2
» Views: 20
PostgreSQL oder mariaDB bei sehr grossen...
Last Post: rustybatman
Gestern 09:18
» Replies: 0
» Views: 8

[-]
Private Messages
Please login or register to use this functionality.

[-]
Statistics
» Members: 271
» Latest member: havor99
» Forum threads: 237
» Forum posts: 962

Full Statistics

[-]
Tutorials
Get Started
Text/Typography
Gridsystem
Dropdowns
Navigation Bar
Modal
Farben
Jumpotron
Popover
Formulare
Carousel (Slider)
Die Höhe von Elementen mit Klassen h-*
Flip Cards
Bild Overlay-Hover-Effekt
Google Fonts einbinden
Flexbox Bootstrap 4
Responsive Breakpoints

[-]
Wer ist online
There are currently no members online.

>