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

Frage Parallax Effekt

MapHD

Neues Mitglied
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";
})
 
Werbung:
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".
 
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");
 
Werbung:
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.
 
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";
});
 
Werbung:
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.
 
Werbung:
Werbung:
Zurück
Oben