[ERLEDIGT] Probleme beim Animierten Scrollen

ldb · 10 August 2013

Hallo liebe JavaScriptler und HTMLer,
Ich habe vor kurzem gefragt, wie sich der Effekt beim Scrollen auf dieser Seite realisieren lasse:
Hero

Ich bekam daraufhin eine wunderbare Zusammenfassung aller auf der Website verwendeten Codeelemente, die für den Effekt verwendet werden.
Ich habe versucht, die Elemente in einer eigenen HTML-Datei zum laufen zu bekommen, leider ohne Erfolg.

Ich möchte nur testweise das Szenario auf der Website kopieren, danach könnte ich es ja anpassen.
Hier ist mein Code:

Code:

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
///////////////////////////////
// Parallax
///////////////////////////////

// Calcualte the home banner parallax scrolling
  function scrollBanner() {
    //Get the scoll position of the page
    scrollPos = jQuery(this).scrollTop();

    //Scroll and fade out the banner text
    jQuery('#bannerText').css({
      'margin-top' : -(scrollPos/3)+"px",
      'opacity' : 1-(scrollPos/300)
    });
    
    //Scroll the background of the banner
    jQuery('#homeBanner').css({
      'background-position' : 'center ' + (-scrollPos/8)+"px"
    });    
  }
</script>

<style>
#bannerText {
top: 250px;
background-attachment:scroll;
text-align:center;
clear:both;
}

#homeBanner {
background-color: #132b2b;
}    

#homeBanner{
background-image: url(http://themetrust.com/demos/hero/wp-content/uploads/home_banner_mountains_2.jpg);        
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center top;
height:510px;            
}

html {
height: 2000px;
}
</style>

</head>

<body>

<div id='homeBanner'>            
    <div id='bannerText'>
        <h2>WORKBOOK LUKAS BIERI</h2>
        <p>Eine Dokumentation der Lehrjahre 1 & 2</p>
    </div>        
</div>

</body>

</html>

Leider sehe ich nichts von einem Paralaxing-Effekt, wie ich ihn mir wünschen würde...
Hat jemand von euch die zündende Idee?

Ich bin leider in JavaScript überhaupt nicht fit, HTML und CSS gehen so.

Ich danke euch schon jetzt für alle eure Antworten!

Liebe Grüsse us dr Schwiz (aus der Schweiz),
Lukas

Tronjer · 10 August 2013

ldb schrieb:
Hallo liebe JavaScriptler und HTMLer,

Hat jemand von euch die zündende Idee?

Ich bin leider in JavaScript überhaupt nicht fit, HTML und CSS gehen so.

Wie wäre es denn mit lernen? Wer nicht programmieren will, kann auch keine Webseiten bauen. Mit copy & paste und der Bitte um Anpassung des Codes qualifiziert man sich höchstens für die Jobbörse, aber nicht für zielführende Antworten.

Trotzdem nachfolgend ein paar Hints:

- jQuery 1.4.4 ist sowas von 2010.
- die Konsole ist dein Freund.
- ein HTML-Element muss existieren, bevor es per JavaScript angesprochen werden kann.

ldb · 10 August 2013

Hallo Tronjer,
Vielleicht habe ich mich missverständlich ausgedrückt:
HTML und CSS beherrsche ich, JavaScript bin ich am lernen, ich habe dazu aber leider einfach fast keine Zeit, ich betreibe das wirklich nur hobbymässig.

Deine Tipps sind zwar hilfreich, weil ich jetzt ungefähr weiss wo der Fehler liegen könnte.
Ich habe jetzt JQuery aktualisiert und überprüft, ob die HTML-Elemente, die mit JavaScript angesprochen werden vorhanden sind. Sind sie. Was du mit dem Hinweis mit der Konsole bezwecken willst, verstehe ich leider nicht ganz. Da finde ich nichts hilfreiches.

Leider funktioniert das Ganze noch nicht.

Danke für weitere Tipps!

Tronjer · 10 August 2013

Du solltest Firebug installieren und die Konsole nach JavaScript-Fehlern checken. Außerdem muss dein jQuery entweder in einem $(document).ready() gewraped oder nach den angesprochenen HTML-Elementen, idealer Weise direkt vor dem schließenden Body-Tag eingebunden werden.

ldb · 10 August 2013

Firebug ist bereits installiert, die Konsole zeigt mir aber nichts an :?:

Ich habe mal den Code in ein $(document).ready() eingepackt, aber das Endergebnis bleibt gleich :(

Was mache ich falsch?

Ich poste mal den Code:

Code:

<!DOCTYPE html>
<html>

<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function scrollBanner() {
    //Get the scoll position of the page
    scrollPos = jQuery(this).scrollTop();

    //Scroll and fade out the banner text
    jQuery('#bannerText').css({
      'margin-top' : -(scrollPos/3)+"px",
      'opacity' : 1-(scrollPos/300)
    });
    
    //Scroll the background of the banner
    jQuery('#homeBanner').css({
      'background-position' : 'center ' + (-scrollPos/8)+"px"
    });    
  }
)
</script>

<style>
#bannerText {
top: 250px;
background-attachment:scroll;
text-align:center;
}

#homeBanner {
background-color: #132b2b;
}    

#homeBanner{
background-image: url(http://themetrust.com/demos/hero/wp-content/uploads/home_banner_mountains_2.jpg);        
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center top;
height:510px;            
}

html {
height: 2000px;
}
</style>

</head>

<body>

<div id="homeBanner">            
    <div id="bannerText">
        <h2>WORKBOOK LUKAS BIERI</h2>
        <p>Eine Dokumentation der Lehrjahre 1 & 2</p>
    </div>        
</div>

</body>

</html>

Danke für deine Hilfe!

Tronjer · 10 August 2013

Füge nach

Code:

scrollPos = jQuery(this).scrollTop();

mal

Code:

console.log(scrollPos);

und schau in die Konsole.

ldb · 10 August 2013

Es tut mir leid, aber ich sehe in der Konsole wirklich nichts. Ich kann dir auch gerne einen Screenshot anhängen.

Ich habe den Code eingefügt, danach Firebug gestartet und die Seite neugeladen. Nichts.

Was sollte passieren?

ldb · 10 August 2013

Doch, jetzt wird mir 0 angezeigt. Das heisst ja, dass die Scrollposition erkannt wird.

Aber was ist der Grund, dass der Parallaxing-Effekt immer noch nicht funktioniert?

Tronjer · 10 August 2013

Erstens schreibt man ein $(document).ready() als anonyme Funktion.

Code:

$(document).ready(function() {
    // aller jQuery Code hier rein
})

Zweitens gehe mal den Code zeilenweise durch. Das Keyword this ist normaler Weise eine Referenz auf das aktuelle Objekt. Da das hier nicht existiert, liefert es das Window-Object zurück.

Code:

jQuery(this)

ist in diesem Kontext äquivalent zu

Code:

$(window)

Willst du das Window-Object ansprechen, verwende lieber die zweite Syntax.

Deine Variable scrollPos erhält den Wert 0

Code:

scrollPos = $(window).scrollTop();

und wird hier übergeben

Code:

$('#bannerText').css({
    'margin-top' : -(scrollPos / 3) + "px"
});

Gretchenfrage: Welchen Wert hat nun margin-top? ;)

ldb · 10 August 2013

Hallo Tronjer,

Danke vielmals für deine Hilfe, langsam blicke ich etwas mehr durch. Das Problem ist allerdings leider immer noch nicht ganz gelöst.
Ich habe jetzt die von dir vorgeschlagenen Änderungen durchgeführt, allerdings wird mir in der Konsole nichts mehr ausgegeben, ich habe wohl mal wieder etwas falsch gemacht :(

Zu deiner Gretchenfrage: Nach meinem Verständnis müsste jetzt margin-top die angegebene Höhe minus einen Drittel des gescrollten Bereiches sein, oder?

Tut mir echt leid, wenn ich mich so doof anstelle, aber vielleicht hast du nochmals einen Tipp für mich?

Hier wäre der aktualisierte Code:

Code:

<!DOCTYPE html>
<html>

<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
   function scrollBanner() {
    //Get the scoll position of the page
    scrollPos = $(window).scrollTop();
    console.log(scrollPos);

    //Scroll and fade out the banner text
    $('#bannerText').css({
    'margin-top':-(scrollPos/3)+"px",
    ' opacity' : 1 -(scrollPos / 300)
    });
    
    //Scroll the background of the banner
    $('#homeBanner').css({
    'background-position' : 'center ' + (-scrollPos / 8) +"px"
    });
   }
})
</script>

<style>
#bannerText {
top: 400px;
background-attachment:scroll;
text-align:center;
}

#homeBanner {
background-color: #132b2b;
}    

#homeBanner{
background-image: url(http://themetrust.com/demos/hero/wp-content/uploads/home_banner_mountains_2.jpg);        
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center top;
height:510px;            
}

html {
height: 2000px;
}
</style>

</head>

<body>

<div id="homeBanner">            
    <div id="bannerText">
        <h2>WORKBOOK LUKAS BIERI</h2>
        <p>Eine Dokumentation der Lehrjahre 1 & 2</p>
    </div>        
</div>

</body>

</html>

Vielen, vielen Dank!

Tronjer · 10 August 2013

Wenn du deinen Code in scrollBanner() kapselst, musst du die Funktion auch aufrufen, damit sie ausgeführt wird.

Was willst du eigentlich erreichen? Wenn scrollPos den Wert 0 hat, dann ergibt -(scrollPos / 3) den selben Wert. Du machst hier nichts anderes als margin-top: 0px;

ldb · 10 August 2013

Ach so, dann werde ich die Verkapselung einfach entfernen.

Das Ziel der ganzen Aktion wäre eigentlich, diesen Effekt nachzubilden:
Hero

Der Banner sollte also nicht am oberen Seitenrand kleben und beim scrollen diesen Parallaxing-effekt animieren. Das Problem mit dem margin-top: 0px habe ich begriffen, allerdings weiss ich nicht wie ich es lösen kann. Wenn ich dem Element einen margin-top zuweise, ändert sich nichts.

Mein Code:

Code:

<!DOCTYPE html>
<html>

<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
    //Get the scoll position of the page
    scrollPos = $(window).scrollTop();
    console.log(scrollPos);

    //Scroll and fade out the banner text
    $('#bannerText').css({
    'margin-top':-(scrollPos/3)+"px",
    ' opacity' : 1 -(scrollPos / 300)
    });
    
    //Scroll the background of the banner
    $('#homeBanner').css({
    'background-position' : 'center ' + (-scrollPos / 8) +"px"
    });
})
</script>

<style>
#bannerText {
position:relative;
top:200px;
background-attachment:scroll;
text-align:center;
}

#homeBanner {
background-color: #132b2b;
}    

#homeBanner{
background-image: url(http://themetrust.com/demos/hero/wp-content/uploads/home_banner_mountains_2.jpg);        
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center top;
height:510px;            
}

html {
height: 2000px;
}
</style>

</head>

<body>

<div id="homeBanner">            
    <div id="bannerText">
        <h2>WORKBOOK LUKAS BIERI</h2>
        <p>Eine Dokumentation der Lehrjahre 1 & 2</p>
    </div>        
</div>

</body>

</html>

Vielen Dank für deine geduldige Hilfe, irgendwann klappt es bestimmt :)

ldb · 10 August 2013

Hat vielleicht jemand anderes auch noch eine Idee? Ich würde mich wirklich über einen Erfolg freuen!

Liebe Grüsse,
Lukas

Sempervivum · 10 August 2013

Hallo ldb,
Du musst dafür sorgen, dass der Code bei Scrollen auch aufgerufen wird. Dazu benötigt man die jQuery-Funktion scroll(). Den betr. Codeabschnitt hatte ich leider vergessen, als ich es dir kopiert hatte. jQuery-Code muss dann so aussehen:

Code:

<script>

// Calcualte the home banner parallax scrolling
  function scrollBanner() {
    //Get the scoll position of the page
    scrollPos = jQuery(this).scrollTop();

    //Scroll and fade out the banner text
    jQuery('#bannerText').css({
      'margin-top' : -(scrollPos/3)+"px",
      'opacity' : 1-(scrollPos/300)
    });

    //Scroll the background of the banner
    jQuery('#homeBanner').css({
      'background-position' : 'center ' + (-scrollPos/8)+"px"
    });
  }
  $(document).ready(function(){
	jQuery(window).scroll(function() {
	    scrollBanner();
		});
   });
</script>

Und beim Text-Kontainer muss man position:relative hinzufügen. Auf deiner Musterseite erbt er das von einem umgebenden Element.
Leider wird das margin-top beim Text-Kontainer nicht wirksam, so dass der Text schnell nach oben verschwindet. Woran das liegt, konnte ich leider noch nicht herausfinden. Vielleicht hat jemand anders dazu noch eine Idee. Denselben Effekt hat es jedoch, wenn Du

Code:

'margin-top' : -(scrollPos/3)+"px",

durch

Code:

'top' : 250 + (scrollPos/3)+"px",

ersetzt. Damit funktioniert es dann so wie auf deiner Beispielseite.

ldb · 10 August 2013

Hallo Sempervivum,

Vielen, vielen Dank für deine hilfreiche Antwort!
Jetzt funktioniert alles so, wie ich es mir wünschen würde, das einzige Problem ist, dass der Text beim ersten scrollen in der vertikalen Position um ca. 100px nach unten springt.

Woran könnte das liegen? Vielleicht sollte ich doch mit margin-top arbeiten, aber dann verschiebt sich ja alles mit...

Hast du da vielleicht noch eine Idee?

Du hast dir auf jeden Fall erneut ein "Danke" verdient!

Liebe Grüsse und Danke auch an Tronjer für seine wertvollen Tipps!

Mein Code sieht jetzt so aus:

Code:

<!DOCTYPE html>
<html>

<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>

// Calcualte the home banner parallax scrolling
function scrollBanner() {
//Get the scoll position of the page
scrollPos = jQuery(this).scrollTop();

//Scroll and fade out the banner text
jQuery('#bannerText').css({
'top' : 250 + (scrollPos/3)+"px",
'opacity' : 1-(scrollPos/200)
});

//Scroll the background of the banner
jQuery('#homeBanner').css({
'background-position' : 'center ' + (-scrollPos/8)+"px"
});
}
$(document).ready(function(){
jQuery(window).scroll(function() {
scrollBanner();
});
});
</script>

<style>
#bannerText {
position:relative;
top:150px;
background-attachment:scroll;
text-align:center;
}

#homeBanner {
background-color: #132b2b;
}    

#homeBanner{
background-image: url(http://themetrust.com/demos/hero/wp-content/uploads/home_banner_mountains_2.jpg);        
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center top;
height:510px;            
}

html {
height: 2000px;
}
</style>

</head>

<body>

<div id="homeBanner">            
    <div id="bannerText">
        <h2>WORKBOOK LUKAS BIERI</h2>
        <p>Eine Dokumentation der Lehrjahre 1 & 2</p>
    </div>        
</div>

</body>

</html>

Sempervivum · 10 August 2013

das einzige Problem ist, dass der Text beim ersten scrollen in der vertikalen Position um ca. 100px nach unten springt.
Woran könnte das liegen?

Das liegt daran, dass die Position im jQuery-Code (250) bei dir von der im CSS (150) abweicht. Wenn Du beides gleich setzt, tritt kein Sprung auf.

ldb · 10 August 2013

Oh, das hatte ich total übersehen!

Vielen, vielen Dank, jetzt funktioniert alles so, wie ich es mir gewünscht habe :)

Das ist das fantastische an diesem Forum: Wenn man ein Problem hat, ist es innert 24 Stunden gelöst!

Mersi viu mau (danke vielmals)!

Grüsse aus der Schweiz,

Lukas

[ERLEDIGT] Probleme beim Animierten Scrollen

ldb

Mitglied

Tronjer

Senior HTML'ler

ldb

Mitglied

Tronjer

Senior HTML'ler

ldb

Mitglied

Tronjer

Senior HTML'ler

ldb

Mitglied

ldb

Mitglied

Tronjer

Senior HTML'ler

ldb

Mitglied

Tronjer

Senior HTML'ler

ldb

Mitglied

ldb

Mitglied

Sempervivum

Guest

ldb

Mitglied

Sempervivum

Guest

ldb

Mitglied

Neueste Beiträge