Scroolfunktion auf iphone 
Autore: Klaus G.Hallöle zusammen,
dies ist eher ein Ding für KolAsim 
Ich habe einen Hack im Netz gefunden der es ermöglicht das Background Images in IOS fixiert sind.
Habe eine Testseite mal mit diesem Hack etwas modifiziert und auf Mac /MacBook und IPhone testen lassen , es funzt.
Jetzt habe ich aber noch eine Seite auf dem 4 Background Images sind und da wäre es auch SUPER wenn es da auch funktionieren würde.
Daher die Frage an KolAsim, ob man an dem Hack etwas modifizieren kann, damit es auch mit 4 Background Images funktioiert.
Hier der Code:
<style> .bg-main { background-color: transparent; } html::before { content: ""; display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: -10; background: url(https://www.terrassendach-experte.de/imgaes/p1.webp) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; transform: translateZ(0); } </style>
Gruß
Klaus
Autore
Der Link zu der besagten Seite
LINK
HALLO,
...mein Code wurde im Grunde für ein einzelnes Hintergrundbild für die Site erstellt ...
... dann habe ich es mit zwei Bildern in beabstandeten Reihen versucht, und Sie finden das Beispiel mit meinem Code hier: https://helpcenter.websitex5.com/it/post/263339
... Ich weiß nicht, ob es möglich sein wird, aber wenn ich etwas Zeit finde, werde ich mir Ihr Beispiel ansehen ...
.
HALLO,, ciao
.
... Ihre Struktur passt nicht zu meinem Code, die Linien für die Parallaxe sind nicht gut verteilt ...
... das Beste, was erreicht werden kann, ist dieser Effekt:
<script>
$( document ).ready(function() { //K>;
/** --- pluri para-parallasse-fisso x WSx5 by KolAsim --- **/
//---------------------------------------------------
setTimeout(function(){//K1>;
imgK1 = $("#imPageRowGraphics_2").css('background-image').split('"').join(''); // > (*);
imgK2 = $("#imPageRowGraphics_5").css('background-image').split('"').join(''); // > (*);
imgK3 = $("#imPageRowGraphics_6").css('background-image').split('"').join(''); // > (*);
imgK4 = $("#imPageRowGraphics_7").css('background-image').split('"').join(''); // > (*);
//---------------------------------------------------
styleK = '<style>#imPageRowGraphics_2, #imPageRowGraphics_5,#imPageRowGraphics_6, #imPageRowGraphics_7'+ // > (*);
'{ background:transparent url("") !important} #contenitoreK2XX {display:none}'+
'#imPageRowGraphics_1, #imPageRow_1 ,#imPageRowGraphics_4, #imPageRow_4 {background-color:white}'+ // > (*);
' #imPageIntContainer{z-index:3} </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);
//---------------------------------------------------
divK3='<div id="contenitoreK3" style="position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:0;">'+
'<div id="div_customK3" style=" '+ attrstyleK + ' background-image:'+imgK3+' "></div></div>';
divK4='<div id="contenitoreK4" style="position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:0;">'+
'<div id="div_customK4" style=" '+ attrstyleK + ' background-image:'+imgK4+' "></div></div>';
$("body").append(divK3+divK4);
//---------------------------------------------------
scrollH_K()
},3000); //K1<<;
}); //K<<;
//---------------------------------------------------
window.onscroll = function() { scrollH_K()}//K2>|<<;
//---------------------------------------------------
function scrollH_K() { //K3>;
hK= window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
row2topK = $('#imPageRowGraphics_2').offset().top - $(window).scrollTop(); // > (*);
if(row2topK < hK ){$("#contenitoreK1").show()} //K4>|<<;
else{$("#contenitoreK1").hide()} //K5>|<<;
//------------------------
row5topK = $('#imPageRowGraphics_5').offset().top - $(window).scrollTop(); // > (*);
if(row5topK < hK ){$("#contenitoreK2").show()} //K6>|<<;
else{$("#contenitoreK2").hide()} //K7>|<<;
//------------------------
row6topK = $('#imPageRowGraphics_6').offset().top - $(window).scrollTop(); // > (*);
if(row6topK < hK ){$("#contenitoreK3").show()} //K8|<<;
else{$("#contenitoreK3").hide()} //K9>|<<;
//------------------------
row7topK = $('#imPageRowGraphics_7').offset().top - $(window).scrollTop(); // > (*);
if(row7topK < hK ){$("#contenitoreK4").show()} //K10>|<<;
else{$("#contenitoreK4").hide()} //K11>|<<;
} //K3<<;
</script>
.
ciao
.
Autore
Hallo KolAsim,
ich habe mit deinem Code etwas rum experimentiert und bleibe bei meinem Code der wunderbar für ganzseitige hinterlegung funktioniert.
Danke für deine Hilfe.
Gruß
Klaus
... OK ... ciao ....