atlanos
Mar 29, 2014, updated at 20:06:03 (UTC)
view3670
view6
0
Goto Top

Fadein fadeout eines bildes

GermanQuestionHTMLDevelopment
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
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 234020

Url: https://administrator.de/contentid/234020

Printed on: April 19, 2024 at 03:04 o'clock

6 Comments
Latest comment
Goto Top
Member: Lochkartenstanzer
Lochkartenstanzer Mar 29, 2014 at 20:30:31 (UTC)
Goto Top
hHast Du mal in SELFHTML reingeschaut?

lks
Member: Atlanos
Atlanos Mar 29, 2014 at 20:42:21 (UTC)
Goto Top
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:
<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>
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....
Member: colinardo
colinardo Mar 31, 2014 updated at 08:35:44 (UTC)
Goto Top
Hallo Atlanos,

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>
Grüße Uwe
heart1
Member: Atlanos
Atlanos Mar 31, 2014 at 08:27:08 (UTC)
Goto Top
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....
Member: Atlanos
Atlanos Mar 31, 2014 at 08:28:52 (UTC)
Goto Top
Nochmal,
das Bild z.b. oben rechts anpassen, z.b. abstand 10 auf a0 px ist ja normaler weg unter position ?
Danke dir nochmals.
Member: colinardo
colinardo Mar 31, 2014 updated at 08:41:32 (UTC)
Goto Top
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)
#inner img { 
  margin-top: -200px; 
  box-shadow: 5px 5px 10px;
}
Der Code ist für die Positionierung horizontal und vertikal zentriert optimiert, lässt sich aber mit dem CSS einfach an die Bedürfnisse anpassen.
heart1
GermanQuestionHTMLDevelopment
Hotly discussed
AlexWishaHow to set up and configure a Linux GRE tunnelAlexWisha - 3 CommentsjstrickerWIREGUARD VPN ON UDM PRO BEHIND FRITZBOX - HANDSHAKE DID NOT COMPLETEjstricker - 1 CommentDaniEnd of Support dates for Office 2016, 2019 Apps und Productivity ServersDani - 1 Comment