HTML „Intro Bild“?
Hallo Leute,
in meiner Schule sollen wir als Langzeitprojekt eine Seite mit HTML Programmieren. Meine Frage nun: ich will dass wenn man die Seite öffnet das ein Bild kurzzeitig eingeblendet wird bei meinem Thema Flugzeug halt ein Flugzeug möglichst als gif oder Video. Also als kleiner opener für das Thema. Hat jemand eine Idee wie das geht oder hat vielleicht sogar einen Code?
Danke im voraus
LG Leon
4 Antworten
Du könntest eine eigenständige Seite mir nur dem Bild/Video machen. Über eine automatische Weiterleitung kannst du dann zu deier nächsten Seite wechseln.
Hier der Beispielcode, welcher in den head-Bereich der Seite kommt. Die Weiterleitung wird hier nach 3 Sekunden duchgeführt.
<meta http-equiv="refresh" content="3; URL=http://localhost/seite2.html">
Du könntest JavaScript nutzen. Hier gibt es verschiedene Möglichkeiten.
Zum Beispiel legst du einen Bereich mit dem Bild/Video über die Seite und blendest diesen nach einer gewissen Zeit aus oder du nutzt merere DIV-Container. In einem Ist dann das Bild/Video und in dem anderen der Rest deiner Seite. Beim Aufrufen ist der DIV-Container mit dem Rest deiner Seite unsichtbar, so dass man nur das Bild/Video soeht. Mit JavaScript wechselst du dann nach einer bestimmten Zeit die Sichtberkeit der beiden DIV-Container, so das das Vild/Video ausgeblendet wird und der eigentliche Content deiner Seite eingeblendet wird.
Es ist nicht notwendig, auf eine andere Seite zu wechseln. Sie können einen Intro-Block direkt zur Hauptseite hinzufügen.
- Wir setzen die Eigenschaft „overflow: hidden;“ für das Tag „body“, damit die Bildlaufleiste ausgeblendet wird.
- Wir schließen die Seite mit einem Intro-Block mit Hintergrundbild, Video, Countdown oder etwas anderem. Dafür verwenden wir eine feste Positionierung.
- Nach der erforderlichen Anzahl von Sekunden blendet das Skript den Intro-Block aus und entfernt die Eigenschaft "overflow: hidden;" aus dem "body" -Tag.
Mit dieser Lösung können Sie Effekte hinzufügen. Zum Beispiel kann ein Intro-Block allmählich verblassen.
Demo: https://codepen.io/glebkema/pen/NmVOWG
HTML:
<body class="locked">
<div class="intro">
<div class="intro-counter"></div>
</div>
<div class="content">
<h1>Header</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga officiis nisi doloremque quaerat fugiat magni rem consectetur, eum facere eveniet corporis maiores voluptatibus, unde animi itaque repellendus fugit iste sint?</p>
</div>
</body>
CSS:
.intro {
background: url(http://glebkema.ru/images/glebkema_iphone_9427_w1000.jpgg') center/cover no-repeat, #69c;
outline: none;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
overflow: hidden;
z-index: 10000;
}
.locked {
overflow: hidden;
}
Javascript (jQuery):
jQuery(document).ready(function($) {
var $counter = $('.intro-counter'),
counter = 5,
timerId = setInterval(countDown, 1000);
function countDown() {
if (counter > 0) {
$counter.text(counter--);
} else {
clearInterval(timerId);
$('.intro').fadeOut();
$('body').removeClass('locked');
}
}
});
- Du baust eine Introseite (index.html), auf welcher das entsprechende GIF eingebaut ist.
<img src="bilder/flugzeug_animiert.gif" alt="animiertes Flugzeug">
- Die Introseite hat eine automatische Weiterleitung nach 5 Sekunden auf die Hauptseite (flugzeuge.html). Den folgenden Code baust Du in deinen HEAD-Bereich des HTML-Dokuments von der index.html ein.
<meta http-equiv="refresh" content="5; URL=http://www.deineseite.de/flugzeuge.html">
!!!Html ist keine Programmiersprache also kann man damit auch nicht programmieren!
Ich würde zu erst eine Seite mit dem bild und von der dann automatisch nach einer gewissen Zeit weiterleiten
Ich könnte dir jetzt einen code schicken aber du würdest ihn vermutlich nur kopieren und nichts lernen
Mit dem wissen was ich dir gegeben habe kannst du es leicht per Google herausfinden