/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Seiten-Slider</title>
<style id="jsbin-css">
/* in diesem div werden die anderen
   Artikel versteckt.*/
div#arts { display: none }

/* alles, was sich im main befindet,
   muss wieder angezeigt werden. */
main * { display: inherit }

/* Artikel sollten über die komplette Breite
   und Höhe gehen, dass das Sliden besser
   funktioniert. */
article
{
  width: 100%;
  height: 100%;
}

/* feste breite und höhe, dass man das
   Sliden besser sehen kann. */
main
{
  width: 800px;
  height: 500px;
}

/* Farbe, dass man das Sliden besser sieht.
   Mit Inhalt kann es natürlich gelöscht
   werden. */
#a1 { background: red }
#a2 { background: yellow }
#a3 { background: green }
#a4 { background: blue }
#a5 { background: pink }
#a6 { background: lime }
#a7 { background: orange }
</style>
</head>
<body>
  <!--
        Klicks auf Links in der Navigation (nav)
        werden mit JavaScript abgefangen und an
        die Funktion showArt(id) umgeleitet.
  -->
  <nav>
    <a href="#a1">Link #1</a>
    <a href="#a2">Link #2</a>
    <a href="#a3">Link #3</a>
    <a href="#a4">Link #4</a>
    <a href="#a5">Link #5</a>
    <a href="#a6">Link #6</a>
    <a href="#a7">Link #7</a>
  </nav>
  <!--
      im main-tag wird immmer eine Seite angezeigt.
      Die Höhe könnte beispielsweise 90% sein und
      die Breite ca. 700px - 800px.
  -->
  <main id="main">
    <!--
         Hier ist der erste angezeigte Artikel.
         Dieser Tag muss auch das Attribut
         active="true" haben.
    -->
    <article id="a1" active="true">Artikel 1 blablabla</article>
  </main>
  <div id="arts">
    <!--
         Hier werden die anderen Seiten/Artikel
         gespeichert. Jeder einziger braucht eine
         eindeutige ID, über die er aufgerufen
         werden kann (mit der JS-Funktion showArt(id)).
    -->
    <article id="a2">Artikel 2 blablabla</article>
    <article id="a3">Artikel 3 blablabla</article>
    <article id="a4">Artikel 4 blablabla</article>
    <article id="a5">Artikel 5 blablabla</article>
    <article id="a6">Artikel 6 blablabla</article>
    <article id="a7">Artikel 7 blablabla</article>
  </div>
<script id="jsbin-javascript">
//Links, von denen Klicks abgefangen werden
var nav = document.querySelector('nav').children
for(var i = 0; i < nav.length; i++) if(nav[i].href.split('#').length === 2) nav[i].addEventListener('click', function(event){
  event.preventDefault();
  showArt(this.href.split('#')[1]);
})

function showArt(id){
  //wichtige Variablen setzen
  var art = document.querySelector('#' + id);
  var active = document.querySelector('main [active="true"]');
  var hidden = art.parentNode;

  //Falls ein Link auf die aktuelle Seite angeklickt
  // wurde, wird der Klick ignoriert
  if(active === art) return;

  //alte Seite nach oben verschieben (Ausgleich)
  active.style.position = 'relative';
  active.style.top = '-100%';
  active.style.left = '0%';

  //neue Seite vor alte verschieben
  art.style.position = 'relative';
  art.style.left = '-100%';

  //neue Seite als aktiv markieren
  art.setAttribute('active', 'true');

  //alte Seite als 'nicht aktiv' markieren
  active.setAttribute('active', 'false');

  //Element der neuen Seite in aktuelle Seite verschieben
  active.parentNode.insertBefore(art, active);

  //Scrollbalken und überstehenden Inhalt verstecken
  document.querySelector('main').style.overflow = 'hidden';

  //Seiten verschieben
  var i = 0;
  while(i < 101){
    (function(i){
      setTimeout(function(){
        active.style.left = i + '%';
        art.style.left = '-' + (100 - i) + '%';
      }, i * 10);
    })(i++)
  }

  //nach dem verschieben (1Sek)
  setTimeout(function(){

    //alte Seite verstecken
    hidden.appendChild(active);

    //nicht mehr genutzte Attribute löschen
    active.removeAttribute('style');
    active.removeAttribute('active');
    art.style.top = '';

    //Scrollbalken wieder anzeigen lassen
    document.querySelector('main').style.overflow = 'auto';

  }, 1000)
}
</script>


<script id="jsbin-source-css" type="text/css">/* in diesem div werden die anderen
   Artikel versteckt.*/
div#arts { display: none }

/* alles, was sich im main befindet,
   muss wieder angezeigt werden. */
main * { display: inherit }

/* Artikel sollten über die komplette Breite
   und Höhe gehen, dass das Sliden besser
   funktioniert. */
article
{
  width: 100%;
  height: 100%;
}

/* feste breite und höhe, dass man das
   Sliden besser sehen kann. */
main
{
  width: 800px;
  height: 500px;
}

/* Farbe, dass man das Sliden besser sieht.
   Mit Inhalt kann es natürlich gelöscht
   werden. */
#a1 { background: red }
#a2 { background: yellow }
#a3 { background: green }
#a4 { background: blue }
#a5 { background: pink }
#a6 { background: lime }
#a7 { background: orange }</script>

<script id="jsbin-source-javascript" type="text/javascript">//Links, von denen Klicks abgefangen werden
var nav = document.querySelector('nav').children
for(var i = 0; i < nav.length; i++) if(nav[i].href.split('#').length === 2) nav[i].addEventListener('click', function(event){
  event.preventDefault();
  showArt(this.href.split('#')[1]);
})

function showArt(id){
  //wichtige Variablen setzen
  var art = document.querySelector('#' + id);
  var active = document.querySelector('main [active="true"]');
  var hidden = art.parentNode;

  //Falls ein Link auf die aktuelle Seite angeklickt
  // wurde, wird der Klick ignoriert
  if(active === art) return;

  //alte Seite nach oben verschieben (Ausgleich)
  active.style.position = 'relative';
  active.style.top = '-100%';
  active.style.left = '0%';

  //neue Seite vor alte verschieben
  art.style.position = 'relative';
  art.style.left = '-100%';

  //neue Seite als aktiv markieren
  art.setAttribute('active', 'true');

  //alte Seite als 'nicht aktiv' markieren
  active.setAttribute('active', 'false');

  //Element der neuen Seite in aktuelle Seite verschieben
  active.parentNode.insertBefore(art, active);

  //Scrollbalken und überstehenden Inhalt verstecken
  document.querySelector('main').style.overflow = 'hidden';

  //Seiten verschieben
  var i = 0;
  while(i < 101){
    (function(i){
      setTimeout(function(){
        active.style.left = i + '%';
        art.style.left = '-' + (100 - i) + '%';
      }, i * 10);
    })(i++)
  }

  //nach dem verschieben (1Sek)
  setTimeout(function(){

    //alte Seite verstecken
    hidden.appendChild(active);

    //nicht mehr genutzte Attribute löschen
    active.removeAttribute('style');
    active.removeAttribute('active');
    art.style.top = '';

    //Scrollbalken wieder anzeigen lassen
    document.querySelector('main').style.overflow = 'auto';

  }, 1000)
}</script></body>
</html>

## jsbin.vonafixale.css
/* in diesem div werden die anderen
   Artikel versteckt.*/
div#arts { display: none }

/* alles, was sich im main befindet,
   muss wieder angezeigt werden. */
main * { display: inherit }

/* Artikel sollten über die komplette Breite
   und Höhe gehen, dass das Sliden besser
   funktioniert. */
article
{
  width: 100%;
  height: 100%;
}

/* feste breite und höhe, dass man das
   Sliden besser sehen kann. */
main
{
  width: 800px;
  height: 500px;
}

/* Farbe, dass man das Sliden besser sieht.
   Mit Inhalt kann es natürlich gelöscht
   werden. */
#a1 { background: red }
#a2 { background: yellow }
#a3 { background: green }
#a4 { background: blue }
#a5 { background: pink }
#a6 { background: lime }
#a7 { background: orange }

## jsbin.vonafixale.js
//Links, von denen Klicks abgefangen werden
var nav = document.querySelector('nav').children
for(var i = 0; i < nav.length; i++) if(nav[i].href.split('#').length === 2) nav[i].addEventListener('click', function(event){
  event.preventDefault();
  showArt(this.href.split('#')[1]);
})

function showArt(id){
  //wichtige Variablen setzen
  var art = document.querySelector('#' + id);
  var active = document.querySelector('main [active="true"]');
  var hidden = art.parentNode;

  //Falls ein Link auf die aktuelle Seite angeklickt
  // wurde, wird der Klick ignoriert
  if(active === art) return;

  //alte Seite nach oben verschieben (Ausgleich)
  active.style.position = 'relative';
  active.style.top = '-100%';
  active.style.left = '0%';

  //neue Seite vor alte verschieben
  art.style.position = 'relative';
  art.style.left = '-100%';

  //neue Seite als aktiv markieren
  art.setAttribute('active', 'true');

  //alte Seite als 'nicht aktiv' markieren
  active.setAttribute('active', 'false');

  //Element der neuen Seite in aktuelle Seite verschieben
  active.parentNode.insertBefore(art, active);

  //Scrollbalken und überstehenden Inhalt verstecken
  document.querySelector('main').style.overflow = 'hidden';

  //Seiten verschieben
  var i = 0;
  while(i < 101){
    (function(i){
      setTimeout(function(){
        active.style.left = i + '%';
        art.style.left = '-' + (100 - i) + '%';
      }, i * 10);
    })(i++)
  }

  //nach dem verschieben (1Sek)
  setTimeout(function(){

    //alte Seite verstecken
    hidden.appendChild(active);

    //nicht mehr genutzte Attribute löschen
    active.removeAttribute('style');
    active.removeAttribute('active');
    art.style.top = '';

    //Scrollbalken wieder anzeigen lassen
    document.querySelector('main').style.overflow = 'auto';

  }, 1000)
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Seiten-Slider</title>
	<style id="jsbin-css">
	/* in diesem div werden die anderen
	Artikel versteckt.*/
	div#arts { display: none }

	/* alles, was sich im main befindet,
	muss wieder angezeigt werden. */
	main * { display: inherit }

	/* Artikel sollten über die komplette Breite
	und Höhe gehen, dass das Sliden besser
	funktioniert. */
	article
	{
	width: 100%;
	height: 100%;
	}

	/* feste breite und höhe, dass man das
	Sliden besser sehen kann. */
	main
	{
	width: 800px;
	height: 500px;
	}

	/* Farbe, dass man das Sliden besser sieht.
	Mit Inhalt kann es natürlich gelöscht
	werden. */
	#a1 { background: red }
	#a2 { background: yellow }
	#a3 { background: green }
	#a4 { background: blue }
	#a5 { background: pink }
	#a6 { background: lime }
	#a7 { background: orange }
	</style>
	</head>
	<body>
	<!--
	Klicks auf Links in der Navigation (nav)
	werden mit JavaScript abgefangen und an
	die Funktion showArt(id) umgeleitet.
	-->
	<nav>
	<a href="#a1">Link #1</a>
	<a href="#a2">Link #2</a>
	<a href="#a3">Link #3</a>
	<a href="#a4">Link #4</a>
	<a href="#a5">Link #5</a>
	<a href="#a6">Link #6</a>
	<a href="#a7">Link #7</a>
	</nav>
	<!--
	im main-tag wird immmer eine Seite angezeigt.
	Die Höhe könnte beispielsweise 90% sein und
	die Breite ca. 700px - 800px.
	-->
	<main id="main">
	<!--
	Hier ist der erste angezeigte Artikel.
	Dieser Tag muss auch das Attribut
	active="true" haben.
	-->
	<article id="a1" active="true">Artikel 1 blablabla</article>
	</main>
	<div id="arts">
	<!--
	Hier werden die anderen Seiten/Artikel
	gespeichert. Jeder einziger braucht eine
	eindeutige ID, über die er aufgerufen
	werden kann (mit der JS-Funktion showArt(id)).
	-->
	<article id="a2">Artikel 2 blablabla</article>
	<article id="a3">Artikel 3 blablabla</article>
	<article id="a4">Artikel 4 blablabla</article>
	<article id="a5">Artikel 5 blablabla</article>
	<article id="a6">Artikel 6 blablabla</article>
	<article id="a7">Artikel 7 blablabla</article>
	</div>
	<script id="jsbin-javascript">
	//Links, von denen Klicks abgefangen werden
	var nav = document.querySelector('nav').children
	for(var i = 0; i < nav.length; i++) if(nav[i].href.split('#').length === 2) nav[i].addEventListener('click', function(event){
	event.preventDefault();
	showArt(this.href.split('#')[1]);
	})

	function showArt(id){
	//wichtige Variablen setzen
	var art = document.querySelector('#' + id);
	var active = document.querySelector('main [active="true"]');
	var hidden = art.parentNode;

	//Falls ein Link auf die aktuelle Seite angeklickt
	// wurde, wird der Klick ignoriert
	if(active === art) return;

	//alte Seite nach oben verschieben (Ausgleich)
	active.style.position = 'relative';
	active.style.top = '-100%';
	active.style.left = '0%';

	//neue Seite vor alte verschieben
	art.style.position = 'relative';
	art.style.left = '-100%';

	//neue Seite als aktiv markieren
	art.setAttribute('active', 'true');

	//alte Seite als 'nicht aktiv' markieren
	active.setAttribute('active', 'false');

	//Element der neuen Seite in aktuelle Seite verschieben
	active.parentNode.insertBefore(art, active);

	//Scrollbalken und überstehenden Inhalt verstecken
	document.querySelector('main').style.overflow = 'hidden';

	//Seiten verschieben
	var i = 0;
	while(i < 101){
	(function(i){
	setTimeout(function(){
	active.style.left = i + '%';
	art.style.left = '-' + (100 - i) + '%';
	}, i * 10);
	})(i++)
	}

	//nach dem verschieben (1Sek)
	setTimeout(function(){

	//alte Seite verstecken
	hidden.appendChild(active);

	//nicht mehr genutzte Attribute löschen
	active.removeAttribute('style');
	active.removeAttribute('active');
	art.style.top = '';

	//Scrollbalken wieder anzeigen lassen
	document.querySelector('main').style.overflow = 'auto';

	}, 1000)
	}
	</script>


	<script id="jsbin-source-css" type="text/css">/* in diesem div werden die anderen
	Artikel versteckt.*/
	div#arts { display: none }

	/* alles, was sich im main befindet,
	muss wieder angezeigt werden. */
	main * { display: inherit }

	/* Artikel sollten über die komplette Breite
	und Höhe gehen, dass das Sliden besser
	funktioniert. */
	article
	{
	width: 100%;
	height: 100%;
	}

	/* feste breite und höhe, dass man das
	Sliden besser sehen kann. */
	main
	{
	width: 800px;
	height: 500px;
	}

	/* Farbe, dass man das Sliden besser sieht.
	Mit Inhalt kann es natürlich gelöscht
	werden. */
	#a1 { background: red }
	#a2 { background: yellow }
	#a3 { background: green }
	#a4 { background: blue }
	#a5 { background: pink }
	#a6 { background: lime }
	#a7 { background: orange }</script>

	<script id="jsbin-source-javascript" type="text/javascript">//Links, von denen Klicks abgefangen werden
	var nav = document.querySelector('nav').children
	for(var i = 0; i < nav.length; i++) if(nav[i].href.split('#').length === 2) nav[i].addEventListener('click', function(event){
	event.preventDefault();
	showArt(this.href.split('#')[1]);
	})

	function showArt(id){
	//wichtige Variablen setzen
	var art = document.querySelector('#' + id);
	var active = document.querySelector('main [active="true"]');
	var hidden = art.parentNode;

	//Falls ein Link auf die aktuelle Seite angeklickt
	// wurde, wird der Klick ignoriert
	if(active === art) return;

	//alte Seite nach oben verschieben (Ausgleich)
	active.style.position = 'relative';
	active.style.top = '-100%';
	active.style.left = '0%';

	//neue Seite vor alte verschieben
	art.style.position = 'relative';
	art.style.left = '-100%';

	//neue Seite als aktiv markieren
	art.setAttribute('active', 'true');

	//alte Seite als 'nicht aktiv' markieren
	active.setAttribute('active', 'false');

	//Element der neuen Seite in aktuelle Seite verschieben
	active.parentNode.insertBefore(art, active);

	//Scrollbalken und überstehenden Inhalt verstecken
	document.querySelector('main').style.overflow = 'hidden';

	//Seiten verschieben
	var i = 0;
	while(i < 101){
	(function(i){
	setTimeout(function(){
	active.style.left = i + '%';
	art.style.left = '-' + (100 - i) + '%';
	}, i * 10);
	})(i++)
	}

	//nach dem verschieben (1Sek)
	setTimeout(function(){

	//alte Seite verstecken
	hidden.appendChild(active);

	//nicht mehr genutzte Attribute löschen
	active.removeAttribute('style');
	active.removeAttribute('active');
	art.style.top = '';

	//Scrollbalken wieder anzeigen lassen
	document.querySelector('main').style.overflow = 'auto';

	}, 1000)
	}</script></body>
	</html>