2015-05-30 2 views
0

Привет, ребята, я делаю этот эффект параллакса только с CSS и HTML. Я тестирую его для Desktop, и он работает на: Chrome, Firefox, IE и Spartan.Эффект Parallax не работает в некоторых браузерах

Но я ударил по камню в мобильном тесте. В настоящее время из моей связи 5:

Firefox: работает; Хром: не работает;

Он работает на Chrome для прошивки (на данный момент протестирован только на Ipad мини)

Является ли это ошибка в версии? или я чего-то не хватает?

здесь является предварительный просмотр:

live demo

вот JS файл я извлек для Вас тест:

jsfiddle demo

<div id="title" class="slide header"></div> 
<div class="slide"></div> 

.slide { 
    position: relative; 
    min-height: 100vh; 
    width: 100vw; 
} 

#title { 
    background-image: url("http://i.imgur.com/LzOCzLr.jpg"); 
    background-attachment: fixed; 
} 

UPDATE: НЕ РАБОТАЕТ ТОЛЬКО ПО CHROME MOBILE AND ANDROID

+1

Как бы это дать эффект параллакса в FireFox так или иначе? Это всего лишь фиксированный эффект. Что, похоже, отлично работает на моем Chrome. (Linux, v43). ** EDIT: ** Упс, не видел, что вы тестировали на мобильных устройствах. –

+1

Исправлены фоны - это очень сложная задача для GPU, поэтому не все мобильные браузеры поддерживают их. Даже настольный Firefox отстает от сумасшествия с некоторыми реализациями фиксированных фоновых изображений на дистрибутивах Linux. – user2867288

+0

, есть ли другое решение? как использовать некоторую библиотеку JavaScript вместо простого CSS-кода CSS, как я? – user1780729

ответ

1

Удалить позицию: фиксированный и попробуйте это: https://jsfiddle.net/aatpa7qd/4/

$('body').scroll(function(){ 
    $("#title").css({"background-position":"center " +($('body').scrollTop()*0.65) + "px"}); 
}); 
+0

весь незначительный эффект параллакса ушел, так что это не работает:/ – user1780729

+0

Вы ищете фиксированный фон? Если это так, вы можете просто удалить * 0.65 из кода. – gopalraju

Смежные вопросы