Параллакс в мобильной версии не работает
Author: Олег Ходонович
Visited 940,
Followers 2,
Shared 0
Здравствуйте!
Сделал новый сайт, эффект параллакс на компьютере работает, в мобильной версии нет.
Раньше мне неоднократно помогал модератор KolAsim при помощи своего уникального кода.
Буду благодарен за любую помощь и на этот раз!
Posted on the
Паралакс в мобильной версии отключается, так изначально было сделано в программе.
Добавьте в шаблоне разрешение 320. За парраллакс не скажу, не проверял, но остальные ограничения, в виде стилей объектов (рамки), на современных смартфонах отменяются.
... x Олег Ходоновичпривет, ... (It > Ru) ... ... к сожалению, я не вижу изображений «.webp», если вы избегаете их и используете изображения «.jpg», это будет лучше для меня; ... Я вижу вашу страницу без изображений, поэтому не могу оценить...
...мое старое изобретение с ЭКСТРА-кодом может работать для фиксированного фона страницы, а не для фиксированного параллакса строк, и оно также работает на устройствах i(!)
... пока вы исправляете фон и изображения, вы можете найти пример сайта с моим кодом в этой недавней https://helpcenter.websitex5.com/en/post/262957
... если дадите знать, в случае помощи и предложений я вернусь сюда...
.
... ПРИВЕТ ... ciao...
.
Author
Привет KolAsim!
Скажите, что мне нужно сделать, чтобы Вы попробовали с помощью кода исправить страницу?
Изменить на сайте формат изображений на .jpg?
... да, если ты сможешь это сделать...
... как видно из примера, мой код действителен для фона страниц, а не для фона строк...
.
ciao
.
Author
Спасибо KolAsim!
Посмотри пожалуйста, уже всё сделал.
https://pechi-kaminy.by
... IT ... Scusami, io ho il PC guasto...
... Io ritornerò qui appena potrò...
Scusa, ciao
.
(It > Ru) ...Я не забыл тебя...
... возможно, я подскажу вам свою идею завтра...
... между тем я заметил, что фон не является одним фоном, как того требует мой код, а представляет собой два фиксированных фона параллакса на двух разных строках...
... в любом случае я изучу ситуацию и сообщу...
ПРИВЕТ, ciao
.
Author
Спасибо! Я на связи!
Я хотел бы отработать только эту часть страницы
(It > Ru) ... ... если бы вы использовали все линии, растянутые на всю ширину, это было бы проще, однако я применил еще несколько приемов, чтобы получить аналогичные эффекты...
... код динамически использует те же два изображения, что и ваши, из двух текущих строк с фиксированным параллаксом, а затем удаляет их, перенося на задний план сайта, основу моего первобытного изобретения...
... протестируйте код, проверив его непосредственно онлайн на смартфонах и «мобильных» "mobile" устройствах в целом...
.
... code:
<script>
$( document ).ready(function() { //K>;
/** --- doppio para-parallasse-fisso x WSx5 by KolAsim --- **/
//---------------------------------------------------
setTimeout(function(){//K1>;
styleK = '<style> #imPageRow_1, #imPageRow_2, #imPageRow_3, #imPageRow_4, #imPageRow_6,'+
'#imPageRow_8 {grid-column: 1/220;background-color:white}</style>';
$("head").append(styleK)
imgK1 = $("#imPageRowGraphics_5").css('background-image').split('"').join("");
imgK2 = $("#imPageRowGraphics_11").css('background-image').split('"').join("");;
divK1='<div id="contenitoreK1" style="position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:0;displayX:none">'+
'<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>';
divK2='<div id="contenitoreK2" style="position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:0;display:none">'+
'<div id="div_customK2" style="position:absolute; top:0px; left:0px;width:100%; height:100%; z-index:0;'+
' background-repeat:no-repeat; background-image:'+imgK2+'; -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+divK2);
$("#imPageRowGraphics_5").css('background-image','url("")')
$("#imPageRowGraphics_11").css('background-image','url("")')
$("#imPageIntContainer").css('z-index','1')
},3000); //K1<<;
}); //K<<;
//------------------------------------------
window.onscroll = function() { scrollH_K()}//K2>|<<;
//------------------------------------------
function scrollH_K() { //K3>;
hK= window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
row11topK = $('#imCell_412').offset().top - $(window).scrollTop();
if(row11topK < hK ){$("#contenitoreK2").show()} //K4>|<<;
else{$("#contenitoreK2").hide()} //K5>|<<;
} //K3<<;
</script>
.
.
… вставьте код в Свойства страницы в этот раздел:
>> Этап 3 - Карта > Окно Свойства страницы > параметры раздела Эксперт >
> ▪Пользовательский код— >> Перед закрывающим тегом HEAD
.
ciao ...
.
Author
Спасибо KolAsim!
Ваш код работает. Если смогу Вам чем-то помочь - обращайтесь, буду рад!
... Я проверил на своем смартфоне Android-Chrome: два фиксированных обоев видны правильно...
... Я доволен, ... и хорошая работа...
.
ciao
.