WebSite X5Help Center

 
Steffen U.
Steffen U.
User

Parallaxe Hintergrundeffekt auf mobilen Geräten  de

Auteur : Steffen U.
Visité 932, Followers 1, Partagé 0  

Hallo zusammen,

wie ich feststellen musste, wurde mit der neuensten Version von WSX5 der Parallaxeneffekt im Hintergrund für mobile Geräte (Handy, Tablet) komplett abgeschaltet, zuvor hat es zumindest auf dem Tablet noch funktioniert. Es sollte doch inzwischen möglich sein diesen Effekt auch auf den mobilen Geräten umzusetzen. Zumal nach meiner Einschätzung heutzutage min. 70-80% der User über mobile Geräte auf Internetseiten zugreifen. Nur auf dem Desktop am PC bringt da leider nicht viel und man kann sich das ganze auch sparen, schade. Oder gibt es da eine Möglichkeit die ich bisher noch nicht entdeckt habe?

Schöne Grüße, StU

https://www.blasorchester-sand.de/

Posté le
21 RéPONSES - 7 UTILE - 1 CORRECT
Daniel W.
Daniel W.
User
Meilleur utilisateur du mois EN

Nicht WebSite X5 hat den Parallaxeneffekt abgeschaltet, sondern die Smartphone-Hersteller.

Wenn ich die Website auf meinem Notebook in Firefox im Modus "Smartphone hochkant" teste, dann funktioniert der Parallaxeneffekt im Hintergrund.

Lire plus
Posté le de Daniel W.
Daniel W.
Daniel W.
User
Meilleur utilisateur du mois EN

Mit der Pro-Version von WebSite X5 kann man einen zusätzlichen Umbruchpunkte bei 320px hinzufügen, damit soll (laut KolAsim) auf Smartphones der Parallaxeneffekt im Hintergrund funktionieren.

Ich habe zwar die Pro-Version, aber kein Smartphone zum Testen.

Lire plus
Posté le de Daniel W.
Steffen U.
Steffen U.
User
Auteur

Ja, anscheinend unter Windows auf PC und Laptop/Notebook ist alles top, aber auf Tablet und Handy (bei mir Android) funktioniert es nicht bzw. nicht mehr. Wie es bei Apple aussieht kann ich leider nicht sagen und müsste ich noch testen.

Kennt jemand eine Website (nicht mit WSX5 erstellt) bei dem ein Parallaxeneffekt/fixierter Hintergrund oder ähnliches verwendet wird und auch auf Smartphone oder Tablet funktioniert?

Lire plus
Posté le de Steffen U.
Daniel W.
Daniel W.
User
Meilleur utilisateur du mois EN

Vielleicht hilft dieser Post, siehe

-----

KolAsim (Moderator)

(It > De)  ... für einen festen Para-Parallax-Effekt schauen Sie sich diese LINKS unserer Benutzer an:
- (Jens H. - DE) >>https://www.oedemzentrum-flow-motion.de/
- (Bahadır A. - EN) >> http://www.indesbilgisayar.com/emin2/     ... etc, etc., ... ... ... 
... sie haben meinen exklusiven EXTRA-Code verwendet ...
... wenn Sie interessiert sind, ist es einfach, ein Kopieren / Einfügen, aber Sie müssen den LINK  Ihrer Website posten, um bewerten zu können ...

>> https://helpcenter.websitex5.com/fr/post/240288

-----

Lire plus
Posté le de Daniel W.
Steffen U.
Steffen U.
User
Auteur

Danke erst mal für die schnelle Antwort, aber das ist mir zu komplex, deshalb arbeite ich auch mit WSX5 um "manuelles Eingreifen" im Quellcode zu vermeiden.

Lire plus
Posté le de Steffen U.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... (It > De) ... überprüfen Sie, ob die Website von Олег Ходонович vom Russischen Forum, die Sie in diesem Thema finden, auf Ihren „mobilen“ Geräten korrekt funktioniert:
https://helpcenter.websitex5.com/fr/post/263092#comment6

... lassen Sie es mich wissen, und wenn Sie interessiert sind, fahren Sie mit meiner Erfindung mit EXTRA-Code fort...
... Ich werde morgen wieder hierher kommen, um Ihre Website zu analysieren, aber ich kann jetzt nicht nachsehen, weil ich nicht im Büro bin...

.

ciao a tutti ...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Steffen U.
Steffen U.
User
Auteur

Die Website "www.pechi-kaminy.by" mit den zwei fixierten Parallaxhintergründen funktioniert auf meinen mobilen Geräten perfekt.

Auf meiner Homepage habe ich bei NEWS eine "Parallaxe umgekehrt" sowie ganz unten hinter der Google Karte einen "fixierten Hintergrund"

Gibt es hierfür auch ein Script das ich vor dem </HEAD> unter Punkt 1 einbauen kann? Das Script auf der russischen Seite funktioniert bei mir nicht.

Danke

Ciao

Lire plus
Posté le de Steffen U.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

Das Skript von KolAsim ist auf die Website abgestimmt auf die 2 gewissen Reihen, damit diese fixiert sind.

Wenn dann müsste man deine Reihennummern korrigieren bzw. ist es glaube ich nur eine parallaxe Reihe bei dir! Wobei der Code es nur fixiert und nicht den umgekehrten Scrolleffekt erzeugt wie du ihn wünscht.

Lire plus
Posté le de Andreas S.
Steffen U.
Steffen U.
User
Auteur

Ok, ich warte mal auf die "Erfindung" von KolAsim ab, der soll mal was zaubern! tongue-out

Gute Nacht

Lire plus
Posté le de Steffen U.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... OK ... (It > De) .. Ich möchte darauf hinweisen, dass der optimale Weg, meine Erfindung optimal zu nutzen, darin besteht, ein einzelnes Bild als festen Hintergrund zu verwenden. gestoppt, der Website-Seite...
... das auf der Russo-Site war das erste Experiment, einzigartig und exklusiv, für Bilder in zwei verschiedenen Zeilen, und daraus entstand dieser Code für Ihre INDEX-Seite ...
… probieren Sie es aus und überprüfen Sie es online auf Ihren „mobilen“ Geräten....
… mein Code lässt echte Parallaxe oberhalb Ihres 600-Pixel-Haltepunkts arbeiten, unterhalb dessen stattdessen meine EXTRA feste Parallaxe aktiviert wird…

.

ciao

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... das ist der Code für die Seite: >> INDEX:

<script>
$( document ).ready(function() { //K>;
/** --- doppio para-parallasse-fisso x WSx5 by KolAsim --- **/
//---------------------------------------------------
setTimeout(function(){//K1>;
imgK1 = $("#imPageRowGraphics_7").css('background-image').split('"').join(''); // > (*);
imgK2 = $("#imPageRowGraphics_13").css('background-image').split('"').join(''); // > (*);
//---------------------------------------------------
styleK = '<style> @media (max-width: 599px) {#imPageRowGraphics_7, #imPageRowGraphics_13'+ // > (*);
'{ background:transparent url("") !important} #contenitoreK2 {display:none}}'+
'div[id^="imPageRow_"] {grid-column: 1 / 100 !important} #imPageIntContainer{z-index:1} </style>';
$("head").append(styleK);
//----------------------------------------------------
attrstyleK = 'position:fixed; top:0px; left:0px; width:100%; height:100%;z-index:0;'+
' background-repeat:no-repeat; -webkit-background-size:cover !important ;'+
' -moz-background-size:cover !important; -o-background-size:cover !important;'+
' background-size:cover !important;background-position: center !important;';
//---------------------------------------------------
divK1='<div id="contenitoreK1" style="position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:0;">'+
'<div id="div_customK1" style=" '+ attrstyleK + ' background-image:'+imgK1+' "></div></div>';
divK2='<div id="contenitoreK2" style="position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:0;">'+
'<div id="div_customK2" style=" '+ attrstyleK + ' background-image:'+imgK2+' "></div></div>';
$("body").append(divK1+divK2);
//---------------------------------------------------
$( "div[id^='imPageRow_']:not(#imPageRow_7, #imPageRow_13" ).each(function() {//K2>; // > (*);
$(this).css("background-color","white");
}); //K2<<;
//---------------------------------------------------
scrollH_K()
},3000); //K1<<;
}); //K<<;
//---------------------------------------------------
window.onscroll = function() { scrollH_K()}//K2>|<<;
//---------------------------------------------------
function scrollH_K() { //K3>;
hK= window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
row11topK = $('#imPageRowGraphics_13').offset().top - $(window).scrollTop(); // > (*);
if(row11topK < hK ){$("#contenitoreK2").show()} //K4>|<<;
else{$("#contenitoreK2").hide()} //K5>|<<;
} //K3<<;
</script>

.......................................................

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Steffen U.
Steffen U.
User
Auteur

Hallo KolAsim,

vielen dank für deine Mühen und das Erstellen deines Codes!

Habe deinen Code wie beschrieben auf der Index Seite vor dem </HEAd> eingefügt, leider funktioniert die fixierte Parallaxe nur auf meinem Smartphone. Auf meinem Tablet hingegen nicht, auf beiden Geräten kommt es zudem zu starkem Ruckeln und die Website hängt, sodass sich die Seite nicht mehr scrollen lässt. Du kannst es selbst ausprobieren, meine Seite ist mit deinem Code online!

https://www.blasorchester-sand.de/

Grazie

Ciao

Lire plus
Posté le de Steffen U.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... Ich habe Ihre Seite auf meinem Android+Chrome-Smartphone überprüft und sie funktioniert ordnungsgemäß und ohne Mängel; ...es funktioniert auch auf meinem PC einwandfrei und mir sind keine Mängel aufgefallen...
... was Ihr Tablet betrifft, vielleicht ist es breiter als die 600 Pixel, die ich zuvor erwähnt habe, auf die mein Code angepasst ist ...
... Sie können den Wert basierend auf Ihrem vorherigen Haltepunkt, 939 Pixel, ändern oder den Wert für den Schwellenwert eingeben, den Sie für am geeignetsten halten...(*)

... (*) ... versuchen Sie, den Haltepunktwert in der Variablen styleK im dritten Abschnitt des Codes wie folgt zu korrigieren:

styleK = '<style> @media (max-width: 939px)  **************

.

ciao

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Steffen U.
Steffen U.
User
Auteur

Jetzt funktioniert es auch auf dem Tablet und das Problem mit dem Ruckeln am Seitenende ist auch nicht mehr aufgetreten, SUPER!!! laughing

Kannst du mir noch sagen welche Variablen ich anpassen muss um deinen Code auf andere Seiten zu übertragen?

Habe auch noch unter dem Menü orchester => scharfes blech bei der Trompete am Seitenende einen fixierten Hintergrund, kann ich deinen Code entsprechend anpassen, damit es da auch funktioniert?

Und nochmal vielen herzlichen Dank für deine Unterstützung!!! :-)

Wünsche dir noch einen schönen Abend.

Ciao

Lire plus
Posté le de Steffen U.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... OK ... ... ... um Ihre Orchester/---scharfes-blech.html-Seite auszuwerten, müssen Sie den von Ihnen eingefügten Code entfernen, der sich auf die INDEX-Seite bezog ...
... für Seiten, die die gleiche Struktur wie der INDEX haben, also mit zwei Zeilen mit Parallaxe, findet man in meinem Code am Ende einiger Codezeilen das Symbol // > (*);  ...die die Zeile identifiziert, in der sich der anzupassende Selektor in Bezug auf den zu berücksichtigenden Namen/die zu berücksichtigende ID befindet...
...xxxxxxxxxxxxx;   // > (*);

... Zum Beispiel: #imPageRow_7  |  #imPageRowGraphics_7 | ... >  usw....

... für die Seite Orchestras>--scharfes-blech.html und ähnliches muss der Code neu bewertet und vereinfacht werden ...
...wenn du mich warnst, werde ich hierher zurückkehren...
.
ciao

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

.... OK ... gesehen ... es funktioniert ... wink...
...für nur eine Zeile und ohne Berücksichtigung von Haltepunkten können Sie vereinfachen...
...zum Beispiel für eine ähnliche Seite: dirigent.html

<script>
$( document ).ready(function() { //K>;
/** --- para-parallasse-fisso x WSx5 by KolAsim --- **/
//---------------------------------------------------
setTimeout(function(){//K1>;
imgK1 = $("#imPageRowGraphics_3").css('background-image').split('"').join(""); // > (*);

imgK1 = imgK1.split('"').join('');

//---------------------------------------------------
divK1='<div id="contenitoreK1" style="position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:0;">'+
'<div id="div_customK1" style="position:absolute; top:0px; left:0px;width:100%; height:100%; z-index:0;'+
' background-repeat:no-repeat; background-image:'+imgK1+'; -webkit-background-size:cover !important ;'+
' -moz-background-size:cover !important; -o-background-size:cover !important; background-size:cover !important;'+
' background-position: center !important "></div></div>';
//---------------------------------------------------
$("body").append(divK1);
$("#imPageRowGraphics_3").css('background-image','url("")') // > (*);

$("#imPageIntContainer").css('z-index','1')
//---------------------------------------------------
$( "div[id^='imPageRow_']:not(#imPageRow_3" ).each(function() {//K2>; // > (*);


$(this).css("background-color","white");
}); //K2<<;
//---------------------------------------------------
},3000); //K1<<;
//---------------------------------------------------
}); //K<<;
</script>

...............................................................

ciao

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Steffen U.
Steffen U.
User
Auteur

Danke, du hast mir sehr damit geholfen. smile

Ciao

Lire plus
Posté le de Steffen U.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... smile...vielen Dank auch an Dich für das schnelle Verständnis und die Wertschätzung...wink....

.

ciao

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪