Meine Codepens ,My Codepens ,Klick auf Button und Fenster scrollt runter wie Anker

section_slider.php

Quell Code

<!DOCTYPE html>
<html lang="de">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>jQuery AppLikeOnePage.js Plugin Demo</title>
		<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
		<script src="js/onepage.js"></script>
		<script>
			$(document).ready(function(){
				startOnePage({
					frame: "#view",
					container: "#frame",
					sections: ".op-section",
					radio: "#radio",
					radioOn: "#radioOn",
          nav:".nav",
					speed: 500,
					easing: "swing"
				});
			});
		</script>		
	</head>
	<style>
	* {
	  margin: 0;
	  padding: 0;
	}
	
	/* set overflow-y property to prevent scroll bar mess up the whole layout */
	
	body {
	  margin: 0;
	  padding: 0;
	  overflow-y: hidden;
	  color: #fff;
	}
	
	li { list-style-type: none; }
	
	/* styled just for clear visual division of each areas */
	
	.op-section { background-color: #00a; }
	
	.second { background-color: #55a; }
	
	.third { background-color: #99a; }
	
	.fourth { background-color: #ded6a4; }
	
	.fifth { background-color: #ffcf8a; }
	
	.last { background-color: #779f57; }
	
	#radioWrap {
	  width: 20px;
	  height: 180px;
	  position: absolute;
	  right: 5%;
	  top: 50%;
	  margin-top: -90px;  
	}
	
	#radio {
	  width: 100%;
	  height: 100%;
	  overflow: hidden;
	
	}
	
	#radio li {
	  width: 20px;
	  height: 20px;
	  background-color: rgba(255,255,255, 0.5);
	  text-indent: -10000px;
	  border-radius: 50%;
	  margin-top: 12px;
	  cursor: pointer;
	}
	
	#radio li:first-child { margin-top: 0; }
	
	/* set position to absolute(essential).use margin to adjust gaps between LIs because 	                                               	ApplikeOnePage.js uses .outerHeight(true) method to measure the interval gap to which each radio 	buttons are placed. */
	
	#radioOn {
	  width: 20px;
	  height: 20px;
	  margin-bottom: 12px;
	  position: absolute;
	  top: 0;
	  left: 0;
	  background-color: #fff;
	  border-radius: 50%;
	}
	
	/* Navigation */
	header {
	  background: #c1c1c1;
	}
	a {
	  text-decoration: none;
	  color: #202020;
	  font-weight: 100;
	  font-family: sans-serif, Helvetica;
	}
	.liste {
	  list-style: none;
	  margin-right: 0.6em;
	  padding: 1em 0;
	}
	.liste:nth-child(5) {
	  margin-right: 3em;
	}
	.nav {
	  display: flex;
	  justify-content: flex-end;
	}
	</style>
	<body>
		<header>
			<nav>
				<ul class="nav">
					<li class="liste"><a href="#">willkommen</a></li>
					<li class="liste"><a href="#">ausstellung</a></li>
					<li class="liste"><a href="#">porträt</a></li>
					<li class="liste"><a href="#">kontakt</a></li>
					<li class="liste"><a href="#">impressum</a></li>
				</ul>
			</nav>
		</header>
		<div id="view">
	      <div id="frame">
		    <div class="op-section second">section1</div>
		    <div class="op-section third">section2</div>
		    <div class="op-section fourth">section3</div>
		    <div class="op-section fifth">section4</div>
		    <div class="op-section last">section5</div>
		    <div class="op-section last">section6</div>
	    </div> 
	    
		<div id="radioWrap">
		    <ul id="radio">
			    <li>section0</li>
			    <li>section1</li>
			    <li>section2</li>
			    <li>section3</li>
			    <li>section4</li>
			    <li>section5</li>
			    <li>section6</li>
		  	</ul>
	      <span id="radioOn"></span>
	    </div>
	</body>
</html>
section_slider.php

Quell Code

Add Comment

Comments
