Hi,
ich wollte mal fragen ob von euch schon mal an so was gearbeitet hat um den Effekt wie hier hinzukriegen, das die Hintergrundbilder mit unterchiedlichen Scrollgeschwindigkeiten bewegt werden :
Ist das nur mit Programmieren möglich oder kann man da Funktionen des WD10 etwas mehr/weniger verbiegen das es geht??
lg
[...] kann man da Funktionen des WD10 etwas mehr/weniger verbiegen das es geht? [...]
Leider ist das mit dem WD 10 nicht zu machen, zumindest nicht, indem ein bisschen was "verbogen" wird...
An dem von Dir verlinkten Beispiel ist recht gut zu erkennen, dass der Site Ersteller die JQuery Bibliothek benutzt hat, um mit einigen Scripts die darin abgelegten Funktionen für seine Zwecke zu benutzen.
Hier der Aufruf der Bibliotheken:
Und hier die wesentliche Funktion:
-------------------------------------
<script type="text/javascript">
$(document).ready(function(){
$('#nav').localScroll(800);
//.parallax(xPosition, speedFactor, outerHeight) options:
//xPosition - Horizontal position of the element
//inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
//outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
$('#Start').parallax("50%", 0.3, true);
$('#Xocolat-Home').parallax("50%", 0.4, true);
$('#Xocolat').parallax("50%", 0.3, true);
$('#section3').parallax("50%", 0.4, true);
$('#Kontore').parallax("50%", 0.3, true);
$('#section7').parallax("50%", 0.4, true);
$('#Personal').parallax("50%", 0.3, true);
$('#section9').parallax("50%", 0.4, true);
$('#Workshops').parallax("50%", 0.3, true);
$('#section11').parallax("50%", 0.4, true);
$('#Franchise').parallax("50%", 0.3, true);
$('#section15').parallax("50%", 0.4), true;
$('#Kontakt').parallax("50%", 0.3, true);
$('#section17').parallax("50%", 0.4, true);
$('#Media').parallax("50%", 0.3, true);
})
</script>
--------------------------------
Im o. a. Script sind die Namen (IDs) aller Objekte, die mit unterschiedlichen Geschwindigkeiten bewegt werden, als Hashtags ('#name') angelegt. Die in den Zeilen sichtbaren Parameter bestimmen die Geschwindigkeit, abhängig von anderen Objekten.
Soweit die Theorie. Wenn Du die Infos in die Praxis umsetzen willst, brauchst Du "nur" noch die Infos, welche Parameter, wie, für welche Objekte benutzt werden...
Kurzum: Ohne genaue Anleitung nützt Dir die JQuery Bibliothek für Dein Vorhaben nicht viel
Aber vielleicht hast mal ein paar Stunden für Versuche übrig...