Depot43-Unterlagen

Code Elemente - HTML - CSS - JS

            
            

<!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>
	 /* Debugging Anzeige Balken */
	#offset {
	    position: fixed;
	    top: 0;
	    text-align: center;
	    width: 100%;
	    background-color: rgba(0,0,0,0.5);
	    color: #fff;
	    padding: 10px 0;
	    z-index: 999;
	}
	#progressBar {
	    background-color: #f00;
	    height: 10px;
	    width: 10px;
	    position: fixed;
	    top: 0;
	    left: 0;
	    z-index: 2000;
	}

	/*  Layout */
	header {
		background-color: #ccc;
		min-height: 140px;
		padding:24px
	}
	main {
		min-height: 640px;
	}
	  p.text {
	  	max-width:50%;
		margin:auto;
		font-size:3em;
	  }
	footer {
	    background-color: #ccc;
	    min-height: 240px;
	}
	footer p {
	  	color: rgba(0,0,0,0.2);
		font-size:3em;
		text-align:center;
	}
  </style>
  </head>

<!-- HTML *************************** -->
<body data-start="background-color:rgb(239, 46, 62);" data-end="background-color:rgb(111, 168, 220);">

<div id="progressBar" data-0="width:0%;" data-end="width:100%;"></div> 
<div id="offset">10</div>

	<header>
		<h1>Haupttitel</h1>
	</header>
	<main> 
		<p class="text" 
		data-start="color: rgba(255,255,255,0.2)" 
		data-end="color: rgba(255,255,255,1)">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, ipsa, beatae? Doloremque tempore nisi sapiente sequi repellat, quia omnis dicta consectetur esse, debitis voluptatem amet cumque rem alias, delectus necessitatibus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti alias reiciendis ipsam? Eos reprehenderit hic cum aspernatur deserunt doloribus expedita eius, ratione voluptates vel illum voluptatum magni, eum quisquam sequi.</p>
	</main>
	<footer 
		data-100-bottom="background-color: rgba(255,255,255,0.2)" 
		data-bottom="background-color: rgba(255,255,255,1)"> 
		<p 
		data-100-bottom="opacity: 0.2" 
		data-end="opacity:1">footer: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, corrupti.</p>
	</footer>


  <!-- Javascript ************************ -->
  <script type="text/javascript" src="https://depot43.ch/unterlagen/themes/bootstrap/js/skrollr.min.js"></script>
  <!-- jQuery optional -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
  <script type="text/javascript">
  
          var s = skrollr.init({
            //forceHeight: false,
            render: function(data) {

                //console.log(data.curTop);
                jQuery('#offset').text(data.curTop);
            }
        });
  
  </script>
</body>
</html>




            

Hinweis

Farbangaben müssen ausschliesslich in "RGB" oder "RGBA" Schreibweise erfolgen. Farbbezeichnungen oder Hexadezimalwerte können nicht animiert werden.

Transparentzwerte können direkt in die Farbwerte einbezogen werden.

data-start="color: rgba(255,255,255,0.2)" 
data-end="color: rgba(255,255,255,1)"

Farben

Hinweis