6
Fadein fadeout eines bildes
Hallo Leute,
folgendes, hab ne Seite, nur als Hobby nicht kommerziell, und eine Idee.
Ich Weiss es gibt 1.000.000 dieser Ideen, aber ich hab keine Lösung zu einem einfachem Problem.
Wer kann helfen:
Seite: index.html
da will ich ein Bild ( Größe zu bestimmen) über die Seite ein"faden" also langsam einblenden und auch wieder einfach langsam ausblenden.
z.b. wann,wo das nächste Event stattfindet.
beim einblenden/ausblenden soll die geladene "index.html" in den Schatten gelegt werden, also dunker werden.
habe schon mit lightbox shadowbox.js u.s.w. probiert aber alles auf englisch. ( verstehe leider nur deutsch und französisch)
Wer kann mir helfen?
Momentan klappt es nur mit popup Fenster. ( ist aber meistens bei den Besuchern browserseitig gesperrt......
DANKE
folgendes, hab ne Seite, nur als Hobby nicht kommerziell, und eine Idee.
Ich Weiss es gibt 1.000.000 dieser Ideen, aber ich hab keine Lösung zu einem einfachem Problem.
Wer kann helfen:
Seite: index.html
da will ich ein Bild ( Größe zu bestimmen) über die Seite ein"faden" also langsam einblenden und auch wieder einfach langsam ausblenden.
z.b. wann,wo das nächste Event stattfindet.
beim einblenden/ausblenden soll die geladene "index.html" in den Schatten gelegt werden, also dunker werden.
habe schon mit lightbox shadowbox.js u.s.w. probiert aber alles auf englisch. ( verstehe leider nur deutsch und französisch)
Wer kann mir helfen?
Momentan klappt es nur mit popup Fenster. ( ist aber meistens bei den Besuchern browserseitig gesperrt......
DANKE
Auf Facebook teilen
Auf Twitter teilen
Auf Reddit teilen
Auf Linkedin teilenBitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 234020
Url: https://administrator.de/forum/fadein-fadeout-eines-bildes-234020.html
Ausgedruckt am: 10.01.2025 um 20:01 Uhr
6 Kommentare
Neuester Kommentar
Ja, aber dann lande ich immer bei der einführung von CSS, ich habe schon einen Teil des sripts aber ich kriege den nicht ÜBER die index,html seite gelegt.fahre ja momentan mit popup fenster aberr....
hier mal mein script:
aber genau das Bild soll nach dem laden der index.html datei, über dieser erscheinen, und wieder verschwinden. aber solange soll die index.html im Hintergund sichtbar sein....
hier mal mein script:
<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#Objekt").fadeIn(10000).delay(5000).fadeOut(1000);
});
</script>
<body>
<img id="Objekt" src="images/fenster/lips.jpg" width="600" height="397" alt="">
</body>
</html>
Hallo Atlanos,
Beispiel: =>
Grüße Uwe
Beispiel: =>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Bild einfaden</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
// falls der Nutzer das Bild nicht sehen möchte und auf den Hintergrund klickt, ausblenden ....
$('#outer').click(function() {
$('#outer').fadeOut({queue:false,duration:500});
});
// Bild einblenden, warten und ausblenden
$('#outer').fadeIn(1000).delay(3000).fadeOut(500);
});
</script>
<style type="text/css">
#outer {
display:none;
position: fixed;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-color: RGBA(0,0,0,0.6);
}
#outer #inner {
position:relative;
margin:auto 0;
top:50vh;
text-align:center;
}
#inner img {
margin-top: -200px;
box-shadow: 5px 5px 10px;
}
</style>
</head>
<body>
<div id="lipsum">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra, elit sit amet viverra dictum, arcu felis blandit eros, et condimentum elit eros vitae elit. Proin odio enim, iaculis ullamcorper eros at, vulputate dictum lacus. Nulla id rhoncus lectus, convallis laoreet nisl. Nam volutpat sollicitudin laoreet. Cras luctus convallis mauris. Phasellus tincidunt tellus sit amet sapien ultricies lobortis. Vestibulum venenatis pharetra augue nec tempor. Nulla convallis leo vitae massa malesuada, a tincidunt erat accumsan. Etiam rutrum, nunc eu mollis hendrerit, sapien lorem malesuada massa, ultrices consequat orci metus vitae nisl. </p>
<p> Nam condimentum sem eu dolor elementum, ac congue lacus varius. Aenean semper eu felis vitae interdum. Vivamus id libero vel magna adipiscing malesuada quis sit amet magna. Pellentesque id euismod lectus. Vivamus vitae mi ante. Morbi id nisl egestas metus venenatis mattis vitae in velit. Nulla facilisi. Duis massa ipsum, accumsan at auctor condimentum, bibendum at turpis. Praesent luctus lacus nec lacus venenatis euismod vel a est. Donec vel arcu non odio pellentesque adipiscing. Nunc a condimentum orci. Sed sed erat risus. </p>
<p> Ut semper imperdiet enim ut dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut tortor rutrum, ornare tellus nec, convallis dui. Pellentesque auctor at nisi non dictum. Pellentesque luctus mi vel odio condimentum, id porta lorem interdum. Duis orci arcu, malesuada et dui eget, ornare volutpat eros. Vivamus quis elit in eros egestas euismod sed at dui. Nam at elit posuere, dictum leo sed, accumsan leo. </p>
<p> Suspendisse mollis sed nunc cursus elementum. Vestibulum consectetur odio nec mi pellentesque, id adipiscing elit aliquam. Phasellus in auctor sem. Mauris dui ligula, ultricies et consectetur at, condimentum in dui. Morbi semper, quam scelerisque vestibulum ornare, lorem elit tristique lorem, sed tempor neque sapien eget velit. Curabitur ultrices eros ut lacus dapibus mattis. Nullam ac dapibus odio. Maecenas nec viverra elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor magna purus, a dignissim nulla dictum id. Donec quis ante volutpat mi tristique volutpat. </p>
<p> Ut accumsan auctor purus, eget ultrices dui porttitor ac. Aenean ut quam non arcu fermentum pretium. Maecenas eget massa luctus, ultricies felis sed, lobortis mi. Morbi convallis eleifend gravida. Duis at nulla diam. Sed malesuada dui nisi, eu consectetur est ornare sit amet. Sed eleifend pellentesque sem et rutrum. Aenean quis arcu quis enim pharetra posuere. Duis eu diam hendrerit, mollis libero sit amet, aliquam ligula. Suspendisse nibh orci, tincidunt venenatis aliquam sit amet, egestas nec nulla. Quisque ut mauris auctor, feugiat metus et, egestas velit. Aenean at ipsum tincidunt, sollicitudin metus a, porttitor velit. Mauris quis nibh ac nunc imperdiet gravida eget a felis. </p>
</div>
<div id="outer">
<div id="inner">
<img src="http://www.manualpraxis.ch/Praxis/images/stories/Grafiken/aloe_pflanze.jpg" />
</div>
</div>
</body>
</html>
1
Uwe,
du bist mein Held.
genau DAS hab ich gesucht........
fantastisch
muss ich nur noch anpassen, sogar das Bild passt.
Wahnsinn. Du hast was gut bei mir, solltest du mal nach LX kommen melde dich auf meiner Email
Danke....
du bist mein Held.
genau DAS hab ich gesucht........
fantastisch
muss ich nur noch anpassen, sogar das Bild passt.
Wahnsinn. Du hast was gut bei mir, solltest du mal nach LX kommen melde dich auf meiner Email
Danke....
Nochmal,
das Bild z.b. oben rechts anpassen, z.b. abstand 10 auf a0 px ist ja normaler weg unter position ?
Danke dir nochmals.
das Bild z.b. oben rechts anpassen, z.b. abstand 10 auf a0 px ist ja normaler weg unter position ?
Danke dir nochmals.
Zitat von @Atlanos:
das Bild z.b. oben rechts anpassen, z.b. abstand 10 auf a0 px ist ja normaler weg unter position ?
?? Du setzt dein Bild rein, dann solltest du eigentlich nur noch den CSS-Code zur vertikalen Positionierung des Bildes anpassen (margin-top auf die hälfte der Bildhöhe deines Bildes setzen / bei 400px Bildhöhe also -200px)das Bild z.b. oben rechts anpassen, z.b. abstand 10 auf a0 px ist ja normaler weg unter position ?
#inner img {
margin-top: -200px;
box-shadow: 5px 5px 10px;
}
