Svenska ElektronikForumet

Bara lek, men jag får inte till att de tre olika bakgrunderna inte hoppar till när de gjort sin "runda".
Alla bilder är gjorda så att de ska loopa och det gör de.
All kod är i html sidan. https://geekjoan.com/links/tmp1.htm

Jag har inte kodat html seriöst på måååånga år. Visste inte ens att man kunde animera grejer med css. Otroligt.

Snackade med chatgpt för att se om den kunde lösa det och jag tror nästan det! Är detta rätt? Verkar skala lite i Y-ledd istället.. Kanske inte så smart som man kan tro menmen.

http://adent.chroma.se/tmp1.htm

Bifogar snacket.

Detta är en parallax-scroll med tre bilder. Den ska repeteras sömlöst, men hoppar till, varför?

<DIN kod här>

ChatGPT sade:
Anledningen till att din parallax-scroll hoppar istället för att loopa sömlöst är att animationerna flyttar bakgrundsbilden en viss fast längd (t.ex. -100vw) i background-position-x, men inte tar hänsyn till bildens faktiska bredd och hur den upprepar sig.

Här är problemet:

css
Kopiera
Redigera
@keyframes parallaxBackground {
0% { background-position-x: 0; }
100% { background-position-x: -100vw; }
}
Det här fungerar endast om bilden är exakt 100vw bred och sömlös. Men om din bilds bredd i pixlar inte matchar exakt 100vw, så kommer animationen att hoppa eftersom slutpositionen inte linjerar med början på nästa repetition av bilden.

Lösning:
Byt från background-position-x till background-position, och istället för att animera till -100vw, animera över hela bildens egen bredd i pixlar — eller använd en sömlös looping-teknik med background-size + background-repeat.

Alternativ 1: Använd background-size och animera i procent
Om dina bilder är sömlöst upprepbara horisontellt, gör så här:

css
Kopiera
Redigera
.parallax-layer.bakgrund {
background-image: url('game/back.png');
background-repeat: repeat-x;
background-size: cover; /* eller "auto 100%" om du vet höjden */
animation: parallaxBackground 60s linear infinite;
}

@keyframes parallaxBackground {
0% { background-position: 0 0; }
100% { background-position: 100% 0; } /* Animerar hela bildbredden */
}
Byt också 100% till 200% om du vill animera dubbelt så snabbt och säkerställa att det är tillräckligt långt för en komplett loop.

Tips för att lösa hoppet:
Kontrollera att bilderna är exakt sömlösa horisontellt. Öppna back.png, mid.png, front1.png sida vid sida och se om de matchar perfekt i kanten.

Använd background-size och background-position: 0 0 till 100% 0 eller 200% 0.

Undvik att animera med vw om du inte är 100% säker på att bakgrunden upprepar exakt i relation till viewportens bredd.

Vill du att jag hjälper dig justera exakt till dina bilders storlek? Då kan du antingen:

Skicka bildmåtten på back.png, mid.png, front1.png, eller

Ge mig tillgång till dem (eller beskriv hur breda de är i pixlar).







Du sade:
mid.png är 1920x1080
front1.png är 3000x1071
back.png är 1515x1080


ChatGPT sade:
Tack! Nu när vi vet exakta måtten på bilderna (mid.png: 1920px, front1.png: 3000px, back.png: 1515px), kan vi förklara varför det hoppar — och hur vi fixar det.

Problemet
Du animerar med t.ex. -100vw, men:

vw = enhet baserad på viewportens bredd

Bilderna är i fasta pixlar (t.ex. 1515px ≠ 100vw på de flesta skärmar)

Därför "hoppar" animationen när den återgår till början — det linjerar inte exakt med upprepningen av bilden.

Lösningen
1. Låt bakgrundsbilderna scrolla exakt sin egen bredd
Använd background-position-x och animera exakt bildens bredd i pixlar, t.ex. -1515px för back.png.

2. Se till att background-repeat: repeat-x är aktiv (vilket det redan är )
3. Justera background-size så att den inte skalas
Använd background-size: 1515px 100%; istället för auto 100%, så du inte får skalning som påverkar matchningen.

Uppdaterad CSS
css
Kopiera
Redigera
.parallax-layer.bakgrund {
background-image: url('game/back.png');
background-repeat: repeat-x;
background-size: 1515px 100%;
animation: parallaxBackground 30s linear infinite;
}

.parallax-layer.mellangrund {
background-image: url('game/mid.png');
background-repeat: repeat-x;
background-size: 1920px 100%;
animation: parallaxMellangrund 20s linear infinite;
}

.parallax-layer.forgrund {
background-image: url('game/front1.png');
background-repeat: repeat-x;
background-size: 3000px 100%;
animation: parallaxForgrund 10s linear infinite;
}

/* Animationer som flyttar exakt bildens bredd */
@keyframes parallaxBackground {
0% { background-position-x: 0; }
100% { background-position-x: -1515px; }
}

@keyframes parallaxMellangrund {
0% { background-position-x: 0; }
100% { background-position-x: -1920px; }
}

@keyframes parallaxForgrund {
0% { background-position-x: 0; }
100% { background-position-x: -3000px; }
}
Resultat
Med detta:

Animationen rör sig exakt en hel bildbredd

Upprepningen blir sömlös

Ingen "hoppning" i animationens loop

Vill du ha olika hastigheter men samma effekt? Justera animation-duration, inte positionsvärdet.

Vill du att jag genererar en version du kan klistra in direkt i din HTML med detta fixat?

Jag snackade vidare och den förslog detta: http://adent.chroma.se/tmp2.htm

Men nu hoppar det igen

Försökte resonera vidare och fick rätt på skalningen, men då uppstod samma problem som du hade igen :

http://adent.chroma.se/tmp2.htm

Pratade vidare och fick detta, men det verkar helt trasigt.

http://adent.chroma.se/tmp3.htm

Nå ber om ursäkt för nonsens, men har iaf provat lite utan att kunna allt för mycket.

MVH: Mikael

Nice! Tack!

Lekte vidare lite: https://geekjoan.com/links/parallax4.htm

På en iPad Pro ligger klockan strax under ”husgrunden” Gillar titeln på sidan

Klockan far omkring som "Pong" för mig, men skriptet är inte förberett för förändringar av fönsterstorleken, så den vägen kan man få klockan att fastna utanför bilden. Har inte testat hur klockan beter sig med "script disabled".

Jobbar på det.

Nu borde inte klockan fastna. https://geekjoan.com/links/parallax5.htm Nu ska den alltid börja 100x100 in från top/vänster.
Med AI så lär man sig nya saker hela tiden.
Lekte även med en annan variant på bakgrund. https://geekjoan.com/links/bilder.htm

För att undvika hopp kan man göra containern för bilden dubbelt så bred som själva bilden och repetera bilden (som bakgrund). Då har du alltså två bilder och sedan kan du animera från 0% till 50% (av den dubbla storleken). Då kan du dölja hoppet från 50% tillbaka till 0%.