Как размыть фон заголовка в phonegap?

Я разрабатываю мобильное приложение с помощью phonegap и jquery mobile. Я хочу знать, как я могу размыть backgroud заголовка, чтобы при прокрутке тела стиль фонового затухания заголовка изменялся в соответствии с новым элементом body, который прокручивался вверх. Для лучшего примера вы можете увидеть ios7 controlle, который это делает! Обратите внимание, что я знаю о фильтрах ниже. Но когда я помещал его в качестве фона моего заголовка, он просто размывает содержимое заголовка, такого как заголовок, и он не обращается к фону! Как мне это сделать?Как размыть фон заголовка в phonegap?

-webkit-filter: blur(10px); 
-moz-filter: blur(10px); 
-ms-filter: blur(10px); 
-o-filter: blur(10px); 
filter: blur(10px);

источник

2014-12-12 Foad Saeidi Nik

демо о том, как размытие фона - HTTP : //codepen.io/aniketpant/pen/DsEve – Tasos

Это n от чего я хочу. Это просто размывает весь фоновый рисунок, а не только ту часть, которая стоит за текстом. Плюс Я хочу кое-что, что может фильтровать и размывать backgroune в прокрутке, что meens не должно быть статическим. –

, чтобы вы не захотели размыть фон? im not sure, если вы можете размыть цвет фона, но искать в SO. вам понадобится фон изображения в заголовке. Что касается прокрутки и смазывания в то же время, вам нужно будет знать, сколько пикселей вы прокрутили на странице и размываете соответственно. Сначала узнайте, как создать функцию прокрутки, которая записывает прокрученные пиксели. Множество примеров на SO – Tasos

Я просто нахожу ответ на свой вопрос. Вы должны создать два элемента, один из которых для реального фона, и один из них - ваш размытый фон, второй из которых скопирован с первого, но имеет фильтр размытия. И в jquery, что касается прокрутки, вам нужно прокручивать свой размытый элемент, всякий раз, когда прокручивается ваш реальный элемент. И ваш размытый элемент задается в качестве фона заголовка небольшим стилем. Have a look at this code pen to see the full example. Я просто поставил летний код.

main.html:

<div class="phone"> 
<div class="screen"> 
    <header> 
    </header> 
    <div class="content-wrapper"> 
     <div class="content"> 
      <!-- content goes here --> 
     </div> 
    </div> 
</div>

Main.css:

.screen { 
    width:319px; 
    height:568px; 
    overflow:hidden; 
} 

header { 
    position:absolute; 
    left:0; 
    top:0; 
    right:0; 
    height:44px; 
    overflow:hidden; 
    background:#f8f8f8; 
    z-index:2; 
    box-shadow:0 1px 0 rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1); 
} 


.content-blurred { 
    margin-top:44px; 
    padding:0 1rem; 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    -webkit-filter:blur(10px); 
    filter:url(#blur-effect); 
    opacity:.35; 
    z-index: 1; 
} 

.content-blurred .content { 
    -webkit-backface-visibility:hidden; 
    -moz-backface-visibility:hidden; 
    -ms-backface-visibility:hidden; 
    backface-visibility:hidden; 
} 

.content-wrapper { 
    position:relative; 
    padding:0 1rem; 
    z-index:1; 
    height:100%; 
    overflow:auto; 
    -webkit-backface-visibility:hidden; 
} 

.content-wrapper .content { 
    margin-top:44px; 
}

main.js:

var content = document.querySelector('.content'); 
var duplicate = content.cloneNode(true); 
var contentBlurred = document.createElement('div'); 
contentBlurred.className = 'content-blurred'; 
contentBlurred.appendChild(duplicate); 

var header = document.querySelector('header'); 
header.appendChild(contentBlurred); 

var contentWrapper = document.querySelector('.content-wrapper'), 
translation; 

contentWrapper.addEventListener('scroll',function(){ 
    translation = 'translate3d(0,' + (-this.scrollTop + 'px') + ',0)'; 
    duplicate.style['-webkit-transform'] = translation; 
    duplicate.style['-moz-transform'] = translation; 
    duplicate.style['transform'] = translation; 

    console.log(duplicate); 
}); 

// offset to demo blurring 
contentWrapper.scrollTop = 140;

источник

2014-12-12 23:57:12

Как размыть фон заголовка в phonegap?

ответ

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