• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[JQUERY] Auf Handy angepasstes endlos Panaroma ohne z-Achse

jaxxon1

New member
Perfomantes Panorama bei einfachem Bild auf Mobile

Hallo,

ich benötige mal eure Hilfe.
Ich will ein beliebiges Foto passend auf dem Handy horizontal scrollen.
Das Sichtfeld des Bildes soll anfangs die Mitte des Bildes sein und man soll via Touch nach Links und Rechts sliden können
und an der jeweils anderen Seite des Bildes wieder ankommen.

Ich habe schon viele Panorama Viewer getestet aber die meisten können viel zu viel oder ist WebGL sein - das darf es bei mir nicht weil es am besten auch auf alten Geräten wie Samsung S3 Mini performant laufen soll

Eigentlich soll es noch über den Gyroscope des Handy nach links und Rechts sliden können, der Touch soll nur als Fallback dienen, aber ich wäre vorerst zufrieden wenn es ohne geht.

Was ich bisher habe:
Das Bild wird der Handygröße entsprechend angezeigt, ebenso kann man es Rechts scrollen - es fängt halt leider links an und hört natürlich bei dem Ende des Bildes auf.

Ich brauch auch keinen maßgeschneiderten fertigen Code nur ein Lösungsansatz oder ein Vorschlag für ein geeignetes Plugin.

Mit freundlichem Gruß
 
Zuletzt bearbeitet:
Ich würde das Bild als Hintergrundbild einer Node einbinden und es per background-position in der Mitte positionieren. Wenn dann "gescrollt" wird, musst du die Hintergrundposition per JS ändern.
Per background-repeat wirst du nie ein Ende des Bildes erreichen.
 
Funktioniert Suupaaa ! würd ich gleich nochmal ein like geben :)
Wenn man css animation verwendet braucht es nichtmal JS.
@kkapsner ok gerne
hier der link zum panorama
hier der Quelltext
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Panorama Slide 1.Version</title>
<style>
#panorama{
max-width:800px;
height:352px;
overflow:hidden;
margin:auto;
padding:0;
background:url(pfad zum Panorama Image)top left repeat-x;
background-attachment:scroll;
animation-name: panorama;
animation-delay:3s;
animation-duration:300s;
animation-timing-function:linear;
animation-direction:alternate;
animation-iteration-count:infinite;
}
@keyframes panorama
{
from{background-position :0px;}
to{background-position:1000%;}
}

</style>
</head>

<body>

<div id="panorama"> </div>

</body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
Es wäre noch gut, wenn du deine jetzige Lösung noch hier schreiben könntest. Dann haben kommende Suchende auch was davon.
 
Zurück
Oben