Parallax

Als Parallaxe (von altgriechisch παράλλαξις parállaxis „Veränderung, Hin- und Herbewegen“) bezeichnet man die scheinbare Änderung der Position eines Objektes, wenn der Beobachter seine eigene Position verschiebt.

Sektion 2

Sektion3

Hebt man z. B. den Daumen hoch und betrachtet ihn abwechselnd mit dem linken und dem rechten Auge, so verschiebt sich sein Bild vor dem weiter entfernten Hintergrund. Die Basis ist hier der Augenabstand, die Methode heißt Daumensprung. Der Winkel ist bei durchschnittlicher Armlänge etwa 6 Grad. Die Parallaxe ist umso größer, je näher sich das beobachtete Objekt befindet und je länger die Basislinie ist.

Sektion 4

Das im Alltag kaum bewusste Phänomen der Parallaxe erlaubt die freiäugige Abschätzung von Entfernungen und ist die Grundlage des räumlichen Sehens. Bestimmt man die Parallaxe mit einem Sensor oder Messfernrohr und ist die Basislinie bekannt, lässt sich die Entfernung zum Zielpunkt genau berechnen. Dies wird u. a. bei Fotoapparaten angewandt, und mit höchster Messgenauigkeit in der Geodäsie und Astronomie.

So setzt ihr das um:

CSS-Code

Diesen Code per Einstellungen > CSS einfügen und anpassen.

.pfeil {
	text-align: center;
	position: absolute;
	bottom: 5%;
	left: 25%;
	width: 50%;
	z-index: 2;
}
@media (max-width: 500px) {
.pfeil {
	bottom: 0;
}}
.schweben {margin:0 10px 25px 0;}
.hovering {
animation-name: hovering;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes hovering {
from {transform:translate(0, 0px);}
20% {transform:translate(0, -25px);}
80% {transform:translate(0, -25px);}
to {transform: translate(0, -0px);}
}
.navi {
	position: fixed;
	top: 25%;
	left: 50%;
	margin-left: 600px;
	background: rgba(0,0,0,0.8); 
	padding: 8px;
	border-radius: 10px;
	transition: all 0.3s ease;
}
.navi:hover {
	background: rgba(0,0,0,9); 
}
.navi a {
	color: #fff; 
	font-size: 1.2em;
	transition: all 0.2s ease;
}
.navi:hover a {
	color: rgba(255,255,255,0.7); 
	font-size: 1.2em;
}

@media (max-width: 1280px) {
.navi{
	left: 97%;
	margin-left: 0;
}}
@media (max-width: 980px) {
.navi{
	display: none;
}}
</style>

Quellcode markieren & kopieren

Quelltext

Diesen Code per Widget > Quelltext einfügen und anpassen.

<div class="sektion">
		<div class="hintergrundbild" id="001">
			<img class="stretch" src="http://zella.de/code/hg-wechsel/1.jpg" alt=""/>
		</div>
		<div class="text">
			<h1>Parallax </h1>
			<p>Als Parallaxe (von altgriechisch παράλλαξις parállaxis „Veränderung, Hin- und Herbewegen“) bezeichnet man die scheinbare Änderung der Position eines Objektes, wenn der Beobachter seine eigene Position verschiebt.</p>
			<img src="http://zella.de/code/hg-wechsel/handy2.jpg" alt="">
		</div>
<div class="pfeil"><a href="#002"><img class="schweben hovering" src="http://zella.de/bilder/pfeil14.png" alt="" /></a></div>
	</div>

<div class="sektion" id="002">
		<div class="hintergrundbild">
			<img class="stretch" src="http://zella.de/code/hg-wechsel/2.jpg" alt=""/>
		</div>
		<div class="text">
			<h2>Sektion 2</h2>
			<iframe width="560" height="315" src="https://www.youtube.com/embed/XdYEzui3Ttc" frameborder="0" allowfullscreen></iframe>
		</div>
<div class="pfeil"><a href="#003"><img class="schweben hovering" src="http://zella.de/bilder/pfeil14.png" alt="" /></a></div>
	</div>

<div class="sektion" id="003">
		<div class="hintergrundbild">
			<img class="stretch" src="http://zella.de/code/hg-wechsel/3.jpg" alt=""/>
		</div>
		<div class="text">
			<h2>Sektion3</h2>
			<p>Hebt man z. B. den Daumen hoch und betrachtet ihn abwechselnd mit dem linken und dem rechten Auge, so verschiebt sich sein Bild vor dem weiter entfernten Hintergrund. Die Basis ist hier der Augenabstand, die Methode heißt Daumensprung. Der Winkel ist bei durchschnittlicher Armlänge etwa 6 Grad. Die Parallaxe ist umso größer, je näher sich das beobachtete Objekt befindet und je länger die Basislinie ist.</p>	
		</div>
<div class="pfeil"><a href="#004"><img class="schweben hovering" src="http://zella.de/bilder/pfeil14.png" alt="" /></a></div>
	</div>

<div class="sektion" id="004">
		<div class="hintergrundbild">
			<img class="stretch" src="http://zella.de/code/hg-wechsel/5.jpg" alt=""/>
		</div>
		<div class="text">
			<h2>Sektion 4</h2>
			<p>Das im Alltag kaum bewusste Phänomen der Parallaxe erlaubt die freiäugige Abschätzung von Entfernungen und ist die Grundlage des räumlichen Sehens. Bestimmt man die Parallaxe mit einem Sensor oder Messfernrohr und ist die Basislinie bekannt, lässt sich die Entfernung zum Zielpunkt genau berechnen. Dies wird u. a. bei Fotoapparaten angewandt, und mit höchster Messgenauigkeit in der Geodäsie und Astronomie.</p>	
		</div>
<div class="pfeil"><a href="LINK"><img class="schweben hovering" src="http://zella.de/bilder/pfeil14.png" alt="" /></a></div>
	</div>

Quellcode markieren & kopieren

Anschließend im Artikel unten links auf das Mischpult > Mehr. Hier tragt ihr unter CSS-Klasse "zpBreakout" ein und unter Inline-CSS "margin-top:-224px;". Beides ohne die Gänsefüßchen. Den Wert "margin-top:-224px;" müsst ihr je nach Layout-Einstellungen anpassen.

Script

Diesen Code am Ende der Seite per Widget > Quelltext einfügen und anpassen.

// Berechnet die Hoehe des Fensters und der Seite
function bezieheDimensionen() {
	fensterHoehe = $( window ).height(),
	seitenHoehe = $( document ).height();
    $( '.sektion' ).css('height', fensterHoehe );
}

function parallaxeVerschiebung() {

// Prueft die aktuelle Scrollposition
	var gescrollt = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop,
	
	// Berechnet die gegenwaertige Sektion
	gegenwaertigeSektion = Math.ceil( gescrollt  / fensterHoehe  ),
	
	// Berechnet den scrollabstand zur naechsten Sektion
	gescrolltInSektion = gescrollt - ( Math.ceil ( fensterHoehe * gegenwaertigeSektion ) ),
	
	// Berechnet Position des Blocks mit der Klasse "hintergrundbild" fuer die gegenwaertige Sektion
	bewegungAktiv= Math.round( ( gescrolltInSektion / bewegungsTeiler ) + ( fensterHoehe / bewegungsTeiler ) ),
	
	// Berechnet Position des Blocks mit der Klasse "hintergrundbild" fuer die kommende Sektion
	bewegungProaktiv = Math.round( gescrolltInSektion / bewegungsTeiler );
		
	// Prueft in welcher Sektion wir uns befinden, repositioniert den inneliegenden Block mit der Klasse "hintergrundbild"
	if ( gegenwaertigeSektion == 1 ) {
		$( '#001 .hintergrundbild' ).css( 'top', bewegungAktiv );
	} else {
		$( '#001 .hintergrundbild' ).css( 'top', bewegungProaktiv );
	};
	if ( gegenwaertigeSektion == 2 ) {
		$( '#002 .hintergrundbild' ).css( 'top', bewegungAktiv );
	} else {
		$( '#002 .hintergrundbild' ).css( 'top', bewegungProaktiv );
	};
	if ( gegenwaertigeSektion == 3 ) {
		$( '#003 .hintergrundbild' ).css( 'top', bewegungAktiv );
    } else {
		$( '#003 .hintergrundbild' ).css( 'top', bewegungProaktiv );
	};
	if ( gegenwaertigeSektion == 4 ) {
		$( '#004 .hintergrundbild' ).css( 'top', bewegungAktiv );
    } else {
		$( '#004 .hintergrundbild' ).css( 'top', bewegungProaktiv );
	};
}

// Startet unsere Funktionen nachdem HTML geladen wurde
$( document ).ready(function() {

// Bezieht die Dimensionen fÃ¼r die Berechnung der Parallaxen Verschiebung
	bezieheDimensionen();

// Fuehrt die Funktion fuer Parallaxe Verschiebung beim scrollen aus
	$( window ).scroll(function() {
		parallaxeVerschiebung();
	});
});

// Bezieht neue Dimensionen bei Reskalierung des Browsers
$( window ).resize( function() {
	bezieheDimensionen();
});

// Smooth Scroll to Top
$(document).ready(function() {
$('a[href*=#]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top ;
$('html,body').animate({scrollTop: targetOffset}, 700);
return false;
}
}
});
});
</script>

Quellcode markieren & kopieren

Um die Navigation am rechten Bildschirmrand einzufügen erstellt ihr am unteren Ende der Seite wiederum einen Textartikel. Hier habe ich folgende Symbole eingefügt "🔝🔘" und mit den entsprechenden Artikeln Verlinkt. Dieser Artikel erhält die CSS-Klasse "navi".

🔝

🔘

script

NEUE BEITRÄGE

OnePage
Hover 09/16-1
Hover 09/16-2
Container 100% Höhe
Fullpagemenü
Container 100% Höhe
Weiter im Header
Weiter unter Header
HOVER 04/16-4
HOVER 04/16-2
HOVER 04/16
Slide Out