Frage Parallax Effekt

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

MapHD

Neues Mitglied
23 Dezember 2017
17
0
1
14
#1
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

Aktives Mitglied
6 Oktober 2015
931
183
43
17
#2
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
17
0
1
14
#3
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

Aktives Mitglied
6 Oktober 2015
931
183
43
17
#4
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
17
0
1
14
#5
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
707
65
28
37
Minden
chat.sebastian1012.bplaced.net
#9
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.
 

basti1012

Aktives Mitglied
26 November 2017
707
65
28
37
Minden
chat.sebastian1012.bplaced.net
#14