WebSite X5Help Center

 
Олег Ходонович
Олег Ходонович
User

Как настроить параллакс в мобильной версии  ru

Автор: Олег Ходонович
Просмотрено 247, Подписчики 2, Размещенный 0  

Добрый день!

Подскажите пожалуйста, как настроить параллакс в мобильной версии для сайта для первого фото на сайте https://peindre-murs.be

Модератор KolAsim мне как-то уже помогал

Размещено
13 Ответы - 1 Полезно
Incomedia
Elisa B.
Incomedia

Hi there,

thank you for getting in touch. In WebSite X5, the parallax effect is automatically disabled on mobile devices to avoid potential display issues and ensure the best user experience.

If you have any other questions or need assistance with settings, feel free to reach out – we're happy to help!

Have a great day!

***** Google Translation:

Добрый день,

cпасибо, что связались с нами. В WebSite X5 эффект параллакса автоматически отключается на мобильных устройствах, чтобы избежать возможных проблем с отображением и обеспечить наилучший пользовательский опыт.

Если у вас есть другие вопросы или нужна помощь с настройками, не стесняйтесь обращаться – будем рады помочь!

Хорошего дня!

Читать больше
Размещено От Elisa B.
Pavel M.
Pavel M.
User

Вставьте видео, если хотите, чтобы что-то двигалось :) А так это игрушки для больших экранов.

Читать больше
Размещено От Pavel M.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца ES
Олег Ходонович
Добрый день! Подскажите пожалуйста, как настроить параллакс в мобильной версии для сайта для первого фото на сайте https://peindre-murs.be  ... ... ... Модератор KolAsim мне как-то уже помогал

(It > Ru) ... В некоторых случаях, не всегда, можно получить хороший результат, просто добавив конечную точку останова на 320 пикселях...
...
... или, в качестве альтернативы, если это не сработает, будет мое эксклюзивное изобретение с ДОПОЛНИТЕЛЬНЫМ кодом, которое вы, возможно, уже видели, но в таком случае мы могли бы его рассмотреть...

...а пока попробуйте с 320px breakpolint, и если не получится, дайте мне знать, чтобы я попробовал свой код, и я вернусь сюда...

.

ПРИВЕТ, ciao 

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Олег Ходонович
Олег Ходонович
User
Автор
‪ KolAsim ‪ ‪
... или, в качестве альтернативы, если это не сработает, будет мое эксклюзивное изобретение с ДОПОЛНИТЕЛЬНЫМ кодом, которое вы, возможно, уже видели, но в таком случае мы могли бы его рассмотреть... ...а пока попробуйте с 320px breakpolint, и если не получится, дайте мне знать, чтобы я попробовал свой код, и я вернусь сюда...

Привет KolAsim!

Напиши мне пожалуйста свой эксклюзивный код.

Заранее благодарен за помощь!

Читать больше
Размещено От Олег Ходонович
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца ES

... ОК ... код для ГЛАВНОЙ страницы (HOME/INDEX); ...следует заблокировать первую и последнюю строки... ПРИВЕТ, ciao 

<script>
$( document ).ready(function() { //K>;
/** --- doppio para-parallasse-fisso x WSx5 by KolAsim --- **/
//---------------------------------------------------
setTimeout(function(){//K1>;
styleK = '<style>#imPageRow_2,#imPageRow_4,#imPageRow_6,'+
'#imPageRow_7{grid-column: 1/220;background-color:white!important}</style>';
$("head").append(styleK)
imgK1 = $("#imPageRowGraphics_1").css('background-image').split('"').join("");
imgK2 = $("#imPageRowGraphics_8").css('background-image').split('"').join("");
divK1='<div id="contenitoreK1" style="position:fixed; top:0px; left:0px; width:100%; height:100%; z-indexXX:0;">'+
'<div id="div_customK1" style="position:absolute; top:0px; left:0px;width:100%; height:100%;'+
' background-repeat:no-repeat; background-image:'+imgK1+'; background-size:cover !important;'+
' background-position: center !important "></div></div>';
//---------------------------------------------------
$("body").append(divK1);
$("#imPageRowGraphics_1").css('background-image','url("")')
$("#imPageRowGraphics_3X, #imPageRowGraphics_8").css('background-image','url("")')
$("#imPageExtContainer,#imPageIntContainer").css('z-index','1').css('background-color','transparent')
},3000); //K1<<;
}); //K<<;
//------------------------------------------
window.onscroll = function() { scrollH_K()};//onscroll>|<<;
//------------------------------------------
function scrollH_K() { //scrollH_K()>;
hK= window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
if($('#imPageRow_4').offset().top - $(window).scrollTop() < hK ){//K1>;
$("#div_customK1").css("background-image",imgK2);
} else { $("#div_customK1").css("background-image",imgK1) };//K1<<;
}; //scrollH_K()<<;
</script>

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Олег Ходонович
Олег Ходонович
User
Автор
 ‪ KolAsim ‪ ‪
... ОК ... код для ГЛАВНОЙ страницы (HOME/INDEX); ...следует заблокировать первую и последнюю строки... ПРИВЕТ, ciao 

Спасибо KolAsim!

А Ты можешь сделать такой-же код для страницы блога?

https://peindre-murs.be/preparer-les-murs-avant-peinture.html

Я пробую, но у меня недостаточно корректно получается.

Заранее благодарен!

Читать больше
Размещено От Олег Ходонович
Олег Ходонович
Олег Ходонович
User
Автор
Олег Ходонович
 ‪ KolAsim ‪ ‪ ... ОК ... код для ГЛАВНОЙ страницы (HOME/INDEX); ...следует заблокировать первую и последнюю строки... ПРИВЕТ, ciao  Спасибо KolAsim! А Ты можешь сделать такой-же код для страницы блога? https://peindre-murs.be/preparer-les-murs-avant-peinture.html Я пробую, но у меня недостаточно корректно получается. Заранее благодарен!

Спасибо, не нужно!

Уже получилось!

Читать больше
Размещено От Олег Ходонович
Олег Ходонович
Олег Ходонович
User
Автор
Олег Ходонович
Спасибо KolAsim! А Ты можешь сделать такой-же код для страницы блога? https://peindre-murs.be/preparer-les-murs-avant-peinture.html Я пробую, но у меня недостаточно корректно получается. Заранее благодарен! Спасибо, не нужно! Уже получилось!

Нет, не получилось!

KolAsim, - если есть такая возможность, попробуй отправить мне свой вариант кода.

Читать больше
Размещено От Олег Ходонович
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца ES

... OK ... x BLOG ... 

<script>
$( document ).ready(function() { //K>;
/** --- row1 - para-parallasse-fisso x WSx5 by KolAsim --- **/
//---------------------------------------------------
setTimeout(function(){//K1>;
styleK = '<style> #imStickyBarContainer, #imPageRow_2, #imPageRow_3, #imPageRow_4, #imPageRow_5'+
'{grid-column: 1/220;background-color:white!important}'+
' #div_customK1 {background-repeat:no-repeat!important; -webkit-background-size:cover !important ;'+
' -moz-background-size:cover !important; -o-background-size:cover !important; background-size:cover !important;'+
' background-position: center !important;top:50px!important;left:0px!important;width:100%; height:100%;}</style>';
$("head").append(styleK)
imgK1 = $("#imPageRowGraphics_1").css('background-image').split('"').join("");
divK1='<div id="div_customK1" style="position:fixed;background-image:'+imgK1+';"></div>';
//---------------------------------------------------
$("body").append(divK1);
$("#imPageRowGraphics_1").css('background-image','url("")')
$("#imPageExtContainer,#imPageIntContainer").css('z-index','1').css('background-color','transparent') ;
hK=$(" #imPageRow_1").height();
$("#div_customK1").height(hK+ hK*25/100); //.css("top","50px")
},3000); //K1<<;
}); //K<<;
//------------------------------------------
window.onresize = function() { scrollH_K()};//onscroll>|<<;
//------------------------------------------
function scrollH_K() { //scrollH_K()>;
hK = $("#imPageRow_2").offset().top;
$("#div_customK1").height(hK+ hK*25/100);
} //scrollH_K()<<;
</script>

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца ES

...ваше изображение имеет белую рамку внизу; ...Я применил дополнительный элемент управления для регулировки масштаба...

(hK+ hK*25/100)

.

ciao

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Олег Ходонович
Олег Ходонович
User
Автор
 ‪ KolAsim ‪ ‪
...ваше изображение имеет белую рамку внизу; ...Я применил дополнительный элемент управления для регулировки масштаба... (hK+ hK*25/100)

Спасибо KolAsim!

Подскажи пожалуста, а как сделать чтобы изображение отображалось снизу и справа?

Bottom-Right или Center-Right

Можно так сделать?

Читать больше
Размещено От Олег Ходонович
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца ES

... попробуйте исправить эту строку,

отсюда:
' background-position: center !important;

... так:
' background-position: bottom right !important;

.

ciao

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Олег Ходонович
Олег Ходонович
User
Автор
 ‪ KolAsim ‪ ‪
... попробуйте исправить эту строку, отсюда: ' background-position: center !important; ... так: ' background-position: bottom right !important;

Большое Спасибо! Всё получилось!

Читать больше
Размещено От Олег Ходонович