Animierter Header

Dieser Header zoomt automatisch langsam ein und wieder aus.
Unten bekommt der Header einen Farbverlauf. Somit haben wir einen fließenden Übergang zum Inhalt der Seite.
"Scroll-Effekt" Beim scrollen bewegt sich das Header-Bild nach unten.
Zusätzlich wurden eine H1-Überschrift mit transparenter Hintergrundfarbe, ein Button, sowie ein H4-Link eingefügt.
Natürlich könnt ihr alle Farben anpassen, oder nicht benötigten Code aus dem CSS entfernen.

CSS-Code

Diesen Code per Einstellungen > CSS einfügen und anpassen.

.info{
  width:100%;
  padding:20% 10% 0 10%;
  text-align:center;
  text-shadow:0 2px 3px rgba(0,0,0,0.2)
}

.info h4, .meta{
  font-size:0.7em
}
.meta{
  font-style:italic;
}
@keyframes grow{
  0% { transform:scale(1)}
  50% { transform:scale(1.2)}
}

.button1 {
display: inline-block;
padding: 6px 16px;
color: #fff;
background-color: transparent;
border: 1px solid #fff;
text-align: center;
outline: none;
margin-top: 10px;
text-decoration: none;
transition: background-color 0.2s ease-out,
border 0.2s ease-out,
color 0.2s ease-out;
}

.button1:hover,
.button1:active {
background-color: rgba(0, 0, 0, 0.4);
color: #ff0000;
border: 1px solid #ff0000;
text-decoration: none;
transition: background-color 0.2s ease-in,
border 0.2s ease-in,
color 0.2s ease-in;
}
</style>

Quellcode markieren & kopieren

Quelltext

Diesen Code per Widget > Quelltext einfügen und anpassen.

Quellcode markieren & kopieren

Das Widget Quelltext erhält die CSS-Klasse: zpBreakout

Hinterlassen sie einen Kommentar zu diesem Code.

ANIMIERTER HEADER

code.zella.de

CSS-Code

Quelltext

NEUE BEITRÄGE