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

Frage Parallax Effekt

M

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";
})
 
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".
 
Aaron3219 schrieb:
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".
Zum Vergrößern anklicken....
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");
 
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.
 
Aaron3219 schrieb:
Aha, du kannst das const auch durch ein "var" ersetzen.
Zum Vergrößern anklicken....

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";
});
 
MapHD schrieb:
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.
Zum Vergrößern anklicken....
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.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben