Frage Parallax Effekt

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

MapHD

Neues Mitglied
23 Dezember 2017
24
0
1
14
Was ist daran falsch das es nicht funktioniert.
JavaScript:
const parallax = document.getElementById ("parallax");
window.addEventListener ("scroll",function(){
    let offset = window.pageYOffset;
    parallax.style.backgroundPositionY = offset * 0.5 + "px";
})
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.018
200
63
17
Ich schätze dann einfach mal dein CSS??? Oder du hast keine ID, die "parallax" heißt. Was sagt die Konsole?
http://jsfiddle.net/Aaron3219/jpg5nxao/
Bei mir funktioniert es einwandfrei.
Willst du denn nur das Hintergrundbild oder den gesamten Container verschieben?
Im 2. Falle, setzt du die position des Containers auf relative und ersetzt "backgroundPositionY" mit "top".
 

MapHD

Neues Mitglied
23 Dezember 2017
24
0
1
14
Ich schätze dann einfach mal dein CSS??? Oder du hast keine ID, die "parallax" heißt. Was sagt die Konsole?
http://jsfiddle.net/Aaron3219/jpg5nxao/
Bei mir funktioniert es einwandfrei.
Willst du denn nur das Hintergrundbild oder den gesamten Container verschieben?
Im 2. Falle, setzt du die position des Containers auf relative und ersetzt "backgroundPositionY" mit "top".
Bei mir funktioniert der Code der in der Website stand die du geschickt hast auch nicht und bei mir wird bei meinem Coder Programm (Brackets) bei const ein Fehler angezeigt:
1

ERROR: Parsing error: The keyword 'const' is reserved const parallax = document.getElementById ("parallax");
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.018
200
63
17
Aha, du kannst das const auch durch ein "var" ersetzen.
Das wird das Problem wahrscheinlich lösen, aber dennoch erklärt sich mir nicht ganz, warum er überhaupt diesen Fehler ausspuckt...
Welchen Browser verwendest du?
Falls du dieses live-preview feature verwendest, kann ich dir leider nicht weiterhelfen. Ich habe brackets noch nie verwendet. Bei mir hat es mit IE, Edge, Firefox und Chrome funktioniert.
Google spuckt aber auch 1000 threads für deinen Fehler aus. Scheint bei Brackets also kein unbekanntes Problem zu sein.
 

MapHD

Neues Mitglied
23 Dezember 2017
24
0
1
14
Aha, du kannst das const auch durch ein "var" ersetzen.
Ich schick dir mal alle Codes, den es funktioniert noch immer nicht. Vielleicht habe ich bei einem anderen Code etwas falsch.
HTML:
<!DOCTYPE html>
<html lang="de">


<title>Bewerbung</title>

<link rel="stylesheet" href="style.css">

<body>
<div><h3>Div 1</h3></div>
<div><h4>Div 2</h4></div>   
    </body>
    
    
    
    
    <script src="main.js"></script>





</html>

CSS:
*{
    border: 0;
    padding: 0;
    margin: 0;
    
}
div {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-family: Comic Sans MS;
    width: 100%;
    height: 100vh;
    background-image: url(bgm1.jpg);
}

h3{
    font-size: 40px;
    background: #eee;
    padding: 8px 24px;
    border-radius: 16px;
    
}

h4{
    font-size: 25px;
    background: #eee;
    padding: 8px 24px;
    border-radius: 16px;}

div:nth-child(1){
    background-image: url(bgm1.jpg);
    background-size: cover;
    background-attachment: inherit
}

div:nth-child(2){
    background: white;
}
JavaScript:
var parallax = document.getElementById("parallax");
window.addEventListener("scroll",function(){
    let offset = window.pageYOffset;
    parallax.style.backgroundPositionY = offset * 0.5 + "px";
});
 

basti1012

Aktives Mitglied
26 November 2017
760
70
28
38
Minden
sebastian1012.bplaced.net
Danke jetzt funktioniert es.

Aber ich habe jetzt das Problem das wenn ich den Div 2 nach links versetze und dann mit margin left verschiebe kommt unten ein Balken zum verschieben und es verschiebt sich nicht.
Zeig doch mal deinen Code wie du was verschoben hast und wie das jetzt aussieht bei dir?
Die Balken zum verschieben kommen ja erst wenn die Breite größer als der Bildschirm ist. Kann man auch mit overflow:hidden ausblenden aber meistens geht es auch anders.
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.018
200
63
17
Das sieht mir nach großen Problemen im CSS und vielleicht auch im HTML-Code aus. Link zur Seite? Oder kompletter Code?
 

basti1012

Aktives Mitglied
26 November 2017
760
70
28
38
Minden
sebastian1012.bplaced.net
Werbung:

Latest posts