Depot43-Unterlagen

Code Elemente - HTML - CSS - JS - Cquence

            
            

<!doctype html>
<html lang="de">
<head>
  <meta charset=utf-8>
  <title>HTML5 CSS3 JS</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <!-- CSS *************************** -->
  <style>
	#frame1 img {
		position:absolute;
		top:0;
		left:0;
	}
	#text {
		position: absolute;
		z-index: 99;
 		font-size: 4em;
		color: white;
		text-shadow: 0px 1px 24px;
		top: 20px;
		left: 50px;
		opacity:0;
	}
  </style>
  </head>
  <body>
<!-- HTML *************************** -->

	<div id="container">
		<div id="frame1" class="frame">
			<img id="img1" src="http://depot43.ch/unterlagen/assets/cquence/kerguelen1.jpg" alt="Kerguelen"> 
			<img id="img2" src="http://depot43.ch/unterlagen/assets/cquence/kerguelen2.jpg" alt="Kerguelen"> 
		</div>
		<div id="frame2" class="frame">
			<p id="text">Der Nebel lichtet sich</p>
		</div>
	</div>


  <!-- Javascript ************************ -->
  <script type="text/javascript" src="https://depot43.ch/unterlagen/themes/bootstrap/js/Cquence.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript">
  
                render = Cq.combine( 
		Cq.sequence(
			Cq.sleep( 800 )
		),
		 Cq.sequence(
			Cq.easeOut('img2', 80000, { opacity: 1 }, { opacity: 0 })
		),
		Cq.sequence(
			Cq.sleep( 10000 ),
			Cq.easeIn('text', 5000, { opacity: 0 }, { opacity: 1 })
		)
	);
       Cq.renderloop();
  
  </script>
</body>
</html>




            

Hinweis

Eine ganz unscheinbare Überblendung kann auf einer Website das Tüpfelchen auf dem i sein.

Ein nebliges Bild, über einem klareren Bild, wird langsam ausgeblendet. Ein Titel erscheint ...

Bilder

Hinweis