การซ้อนทับเบลอของ iOS 7 โดยใช้ CSS?


161

ดูเหมือนว่าการซ้อนทับของ Apple เป็นมากกว่าความโปร่งใส มีความคิดเห็นเกี่ยวกับวิธีการบรรลุผลนี้ด้วย CSS และอาจเป็นไปได้ JS?

มากกว่าความโปร่งใส


2
ความกังวลที่เร่งด่วนมากขึ้นในความคิดของฉันคือวิธีการตั้งค่าองค์ประกอบที่ใช้การเบลอแบบไดนามิกกับวัตถุใด ๆ ที่อยู่ด้านหลัง ดังนั้นหากคุณมีวัตถุที่สามารถเลื่อนและซูมองค์ประกอบที่อยู่ด้านบนจะเบลอแบบไดนามิกโดยมีประสิทธิภาพการทำงานต่ำ
Rhodes

1
ดูคำถามนี้สำหรับปัญหาที่คล้ายกัน
Keith

43
ฉันคิดว่ามันน่าเป็นห่วงมากที่สุดว่านี่เป็นคุณสมบัติ 'IOS7' ในขณะที่อินเทอร์เฟซ Windows Vista Aero กำลังทำสิ่งเดียวกันกับหน้าต่าง
โครเมี่ยม

1
@NielsKeurentjes Heh จุดที่แท้จริง ฉันรวมเอฟเฟกต์ลงในการออกแบบเมื่อไม่กี่ปีที่ผ่านมาหลังจากได้รับแรงบันดาลใจจาก Windows อย่างไรก็ตามหลังจากนั้นฉันก็ไปหาเส้นทางที่ง่ายกว่าในการอบเอฟเฟกต์ลงในภาพ ryanwilliams.co.uk/previews/made2race/1.html
Ryan Williams

คำตอบ:


145

เป็นไปได้ด้วย CSS3:

#myDiv {
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    opacity: 0.4;
}

ตัวอย่างที่นี่ => jsfiddle


119
สิ่งนี้ไม่ได้ผลเช่นเดียวกับใน iOS7 ที่องค์ประกอบเบลอบางส่วนของพื้นหลัง
ออกแบบโดย Adrian

9
ฉันแก้ไข jsfiddle ของฉันตอนนี้มันทำท่าเหมือน IOS7;) => CSS3 IOS7 effect
Cana

34
ดังที่เอเดรียนตั้งข้อสังเกตตัวกรองจะเบลอองค์ประกอบและเป็นลูก ไม่สามารถใช้สำหรับการวางซ้อนเพื่อเบลอองค์ประกอบหลักหรือองค์ประกอบที่อยู่ติดกันดังนั้นเอฟเฟกต์ iOS 7 จึงไม่สามารถทำได้ด้วย CSS
Jason

10
หากคุณคิดว่ามันเป็นเพียงการเบลอที่เกิดขึ้นเพื่อให้ได้ผลนี้คุณจะผิด ผมทำงานในพื้นที่เก็บข้อมูลที่มาเปิดที่เรียบง่ายที่บรรลุผลกระทบนี้ใช้ทั้ง JS และ CSS 3 ติดตามความคืบหน้า :)
ไรอัน Brodie

5
นี้ไม่ได้ทำงานใน FX - -moz-filter: blur()พวกเขาไม่ได้รับการสนับสนุน คุณต้องใช้ตัวกรอง SVG แทนดูคำตอบของฉันสำหรับรายละเอียด
Keith

48

คุณทำให้ฉันอยากลองฉันก็ลองดูตัวอย่างที่นี่:

http://codepen.io/Edo_B/pen/cLbrt

โดยใช้:

  1. ตัวกรอง CSS เร่ง HW
  2. JS สำหรับการกำหนดคลาสและลูกศรเหตุการณ์สำคัญ
  3. รูปภาพคุณสมบัติคลิป CSS

แค่นั้นแหละ.

ฉันยังเชื่อว่าสิ่งนี้สามารถทำได้แบบไดนามิกสำหรับหน้าจอใด ๆ หากใช้ Canvas เพื่อคัดลอก Dom ปัจจุบันและเบลอมัน


40

[แก้ไข] ในอนาคต (มือถือ) Safari 9 จะมี-webkit-backdrop-filterสิ่งนี้อย่างแน่นอน ดูนี่สิปากกาฉันทำเพื่อแสดงมัน

ฉันคิดถึงเรื่องนี้ในช่วง 4 สัปดาห์ที่ผ่านมาและคิดวิธีแก้ปัญหานี้

การสาธิตสด

[แก้ไข] ฉันเขียนบทความเชิงลึกเกี่ยวกับCSS-Tricks

เทคนิคนี้ใช้CSS พื้นที่ดังนั้นการสนับสนุนเบราว์เซอร์ไม่ดีที่สุดในขณะนี้ ( http://caniuse.com/#feat=css-regions )

ส่วนสำคัญของเทคนิคนี้คือการแยกเนื้อหาออกจากเค้าโครงโดยใช้ CSS Region ก่อนกำหนด.contentองค์ประกอบด้วยflow-into:contentแล้วใช้โครงสร้างที่เหมาะสมเพื่อเบลอส่วนหัว

โครงสร้างเค้าโครง:

<div class="phone">
 <div class="phone__display">
  <div class="header">
    <div class="header__text">Header</div>
    <div class="header__background"></div>
  </div>
  <div class="phone__content">
  </div>
 </div>
</div>

สองส่วนที่สำคัญของเค้าโครงนี้คือ.header__backgroundและ.phone__content - เหล่านี้เป็นภาชนะที่เนื้อหาจะไหลแม้ว่า

การใช้พื้นที่ CSS มันง่ายเหมือนflow-from:content( .contentไหลเข้าสู่ภูมิภาคที่มีชื่อcontent)

ตอนนี้ส่วนที่ยุ่งยากมา เราต้องการไหลเนื้อหาผ่าน.header__backgroundเพราะนั่นคือส่วนที่เนื้อหาจะถูก blured (ใช้webkit-filter:blur(10px);)

นี้จะกระทำโดยเพื่อให้มั่นใจว่าเนื้อหาที่จะไหลแม้ว่า การแปลงนี้จะซ่อนเนื้อหาบางส่วนไว้ใต้ส่วนหัวเสมอ แก้ไขสิ่งนี้ได้อย่างง่ายดายเพิ่มtransfrom:translateY(-$HeightOfTheHeader).content.header__background

.header__background:before{
  display:inline-block;
  content:'';
  height:$HeightOfTheHEader
}

เพื่อรองรับการเปลี่ยนแปลง

ปัจจุบันทำงานใน:

  • Chrome 29+ (เปิดใช้งาน 'Experimient-webkit-features' / 'Enable-Experimental-web-platform-features')
  • Safari 6.1 Seed 6
  • iOS7 ( ช้าและไม่มีการเลื่อน )

1
การสาธิตสดไม่ทำงานอีกต่อไป เนื้อหาด้านล่างโทรศัพท์และฉันได้รับข้อผิดพลาด JS "TypeError: sheet.addRule ไม่ใช่ฟังก์ชั่น"
BoffinBrain

ทำงานได้ดีกับ Safari บน Mac และ iOS
Carlos Silva

16

ลักษณะนี้เป็นไปได้ด้วย FireFox ในตอนนี้ด้วยคุณลักษณะสไตล์องค์ประกอบ

แอตทริบิวต์การทดลองนี้ให้คุณใช้เนื้อหา HTML เป็นภาพพื้นหลังได้ ดังนั้นในการสร้างพื้นหลังคุณต้องมีการวางซ้อนสามส่วน:

  1. การซ้อนทับอย่างง่ายพร้อมพื้นหลังที่เป็นของแข็ง (เพื่อซ่อนเนื้อหาการซ้อนทับจริง)
  2. วางซ้อนกับ-moz-elementพื้นหลังที่กำหนดเนื้อหา โปรดทราบว่า FX ไม่รองรับfilter: blur()แอตทริบิวต์ดังนั้นเราจึงจำเป็นต้องใช้ SVG
  3. ภาพซ้อนทับที่มีเนื้อหาไม่เบลอ

ดังนั้นใส่กัน:

ตัวกรองเบลอ SVG (ทำงานใน FX เบราว์เซอร์อื่นสามารถใช้filter:blur()):

<svg>
  <defs>
    <filter id="svgBlur">
      <feGaussianBlur stdDeviation="10"/>
    </filter>
  </defs>
</svg>

CSS สไตล์เบลอ:

.behind-blur 
{
    filter         : url(#svgBlur); 
    opacity: .4;
    background: -moz-element(#content);
    background-repeat: no-repeat;
}

ในที่สุด 3 ชั้น:

<div class="header" style="background-color: #fff">&nbsp;</div>
<div class="header behind-blur">&nbsp;</div>
<div class="header">
    Header Text, content blurs behind
</div>

จากนั้นหากต้องการย้ายสิ่งนี้ไปรอบ ๆ เพียงตั้งค่าbackground-position(ตัวอย่างใน jQuery แต่คุณสามารถใช้อะไรก็ได้):

$('.behind-blur').css({
    'background-position': '-' + left + 'px -' + top + 'px'
}); 

ที่นี่มันเป็นเพียงซอ Fiddle, FX เท่านั้น


1
ทางออกของคุณคล้ายกับที่ฉันมีในใจ ฉันแก้ไขข้อผิดพลาด ( jsfiddle.net/RgBzH/30 ) โดยการขยายส่วนของฉากหลังเบลอดังนั้นความพร่ามัวที่เกิดขึ้นกับเนื้อหาจริงไม่ใช่ชิ้นที่ถูกหั่น การปฏิบัติที่ดีอยู่แล้ว
ท่าเรือเปาโลรามอน

@PierPaoloRamon ปรับแต่งได้ดี - ฉันจะใช้สิ่งนี้ฉันอาจจะขยาย SVG filter อีกเล็กน้อยเพื่อเพิ่มความสว่าง / คอนทราสต์ที่ลดลงที่ iOS7 ทำได้เช่นกัน แต่ FX หมายถึงแซนด์บ็อกซ์เท่านั้นในตอนนี้ ฉันถามคำถามอื่นเกี่ยวกับวิธีแก้ปัญหา
Keith

BTW โซลูชันของคุณเพิ่งทำให้เบลอคล้าย ios7 กับ Firefox OS และมันก็เรียบร้อย
ท่าเรือเปาโลรามอน

14

ลองชมหน้าตัวอย่างนี้
การสาธิตนี้ใช้ html2canvas สำหรับการแสดงเอกสารเป็นรูปภาพ

http://blurpopup.labs.daum.net/

  1. เมื่อคลิกลิงก์ "แสดงป๊อปอัป" ระบบจะเรียกฟังก์ชัน 'makePopup'
  2. 'makePopup' จะเรียกใช้html2canvasเพื่อแสดงเอกสารเป็นรูปภาพ
  3. รูปภาพถูกแปลงเป็นสตริง data-url และถูกวาดเป็นรูปภาพพื้นหลังของป๊อปอัป
  4. bg ของป๊อปอัปนั้นเบลอโดย-webkit-filter: blur
  5. ผนวกป๊อปอัพลงในเอกสาร
  6. ขณะที่คุณลากป๊อปอัพมันจะเปลี่ยนตำแหน่งพื้นหลังของมันเอง

1
โปรดให้คำอธิบายเกี่ยวกับสิ่งที่การสาธิตทำจริงตั้งแต่เมื่อลงมาแล้วมันจะไม่ได้รับความช่วยเหลือใด ๆ
Jonathan Drapeau

เป็นความคิดที่ดีจริงๆ - น่าเสียดายที่html2canvasเป็นวิธีการทดลองที่ต้องพึ่งพาและอาจมีขนาดใหญ่เกินไปเว้นแต่ภาพหน้าจอเป็นสิ่งที่แอปพลิเคชันของคุณเกี่ยวข้อง
Keith

5
@JonathanDrapeau ของมันลดลงอย่างที่คุณคาดการณ์ไว้
Mark

แอ่ว! ฉันรักการเชื่อมโยงเน่า!
evolutionxbox

ยังคงใช้การเบลอของภาพฉันไม่เห็นว่าสิ่งนี้สามารถทำงานกับบางสิ่งบางอย่างเช่นแถบนำทางที่เหนียว
maninak

10

ปากกานี้ฉันพบว่าเมื่อวันก่อนดูเหมือนจะทำได้อย่างสวยงามเพียงแค่ css และจาวาสคริปต์ 21 บรรทัด ฉันไม่เคยได้ยินคำสั่ง cloneNode js จนกระทั่งพบสิ่งนี้ แต่มันใช้ได้ผลกับสิ่งที่ฉันต้องการอย่างแน่นอน

http://codepen.io/rikschennink/pen/zvcgx

รายละเอียด: A. โดยทั่วไปแล้วมันจะดูเนื้อหาของคุณ div และเรียกใช้ cloneNode ในนั้นมันจะสร้างสิ่งที่ซ้ำกันซึ่งมันจะวางอยู่ข้างในโอเวอร์โฟลว์: วัตถุส่วนหัวที่ซ่อนอยู่นั่งอยู่ด้านบนของหน้า B. จากนั้นมันเพียงฟังการเลื่อนเพื่อให้ภาพทั้งคู่ดูเหมือนและเบลอภาพส่วนหัว ... และ Ann BAM ผลสำเร็จ

ไม่ค่อยสามารถใช้งาน CSS ได้อย่างเต็มที่จนกว่าพวกเขาจะได้ความสามารถในการสคริปต์ที่สร้างขึ้นในภาษา


ดูดี! แม้ว่าสิ่งนี้จะไม่สามารถทำงานได้ดีกับเนื้อหาแบบไดนามิกเว้นแต่ว่าคุณจะอัปเดตสิ่งที่ซ้ำกันทุกครั้งที่มีการเปลี่ยนแปลง - ซึ่งอาจเป็นผลงานยอดเยี่ยม
Nass

ฉันคิดว่า แต่ไม่แน่ใจว่าคุณจะเปลี่ยนภาพและพยายามทำเอฟเฟกต์นี้จริง ๆ หรือไม่? ถ้าทำอย่างถูกต้องมันไม่ควรจะเป็นเรื่องฮิตถ้าคุณรีไซเคิลโคลน บางทีคุณสามารถพูดคุยเรื่องนี้กับรายละเอียดได้? พูดเช่นคุณสร้างฟีดรูปภาพและต้องการให้ตัวเลือกเมนูบางอย่างเกิดขึ้นพร้อมเอฟเฟกต์นี้สำหรับเมนูรูปภาพสำหรับแต่ละรายการ ... เรียกใช้สิ่งนี้เมื่อคุณเปิดเผยแผงและแผงที่ซ้อนทับจะมีลักษณะเหมือนโปสเตอร์ที่ต้องการ เพิ่ม wee recycler เพื่อให้ dom ไม่ซ้ำกันอย่างไม่มีที่สิ้นสุดภาพทุกครั้งที่คุณเปิดเมนูและมันควรจะทำงานได้ดี
Lux.Capacitor

5
  • โคลนองค์ประกอบที่คุณต้องการเบลอ
  • ผนวกเข้ากับองค์ประกอบที่คุณต้องการให้อยู่ด้านบน (หน้าต่างฝ้า)
  • องค์ประกอบเบลอโคลนด้วย webkit-filter
  • ตรวจสอบให้แน่ใจว่าองค์ประกอบที่ถูกโคลนอยู่ในตำแหน่งที่แน่นอน
  • เมื่อเลื่อนองค์ประกอบหลักขององค์ประกอบดั้งเดิมให้จับ scrollTop และ scrollLeft
  • ใช้ RequestAnimationFrame ตอนนี้ตั้งค่า webkit-transform แบบไดนามิกเป็น translate3d ด้วยค่า x และ y เป็น scrollTop และ scrollLeft

ตัวอย่างอยู่ที่นี่:

  • ตรวจสอบให้แน่ใจว่าได้เปิดใน webkit-browser
  • เลื่อนดูภายในโทรศัพท์ (ดีที่สุดกับ Apple mouse ... )
  • ดูส่วนท้ายของการเบลอที่เกิดขึ้นจริง

http://versie1.com/TEST/ios7/


4

ได้ทำการสาธิตอย่างรวดเร็วเมื่อวานนี้ว่าสิ่งที่คุณพูดถึง http://bit.ly/10clOM9 การสาธิตนี้ทำพารัลแลกซ์ตามมาตรความเร่งดังนั้นมันจึงทำงานได้ดีที่สุดใน iPhone โดยทั่วไปฉันเพียงแค่คัดลอกเนื้อหาที่เราวางทับไว้ในองค์ประกอบตำแหน่งคงที่ที่ทำให้เบลอ

หมายเหตุ: ปัดขึ้นเพื่อดูแผง

(ฉันใช้ css id ที่น่ากลัว แต่คุณได้ความคิด)

#frost{
 position: fixed; 
 bottom: 0; 
 left:0; 
 width: 100%; 
 height: 100px; 
 overflow: hidden;
 -webkit-transition: all .5s;
}
#background2{
 -webkit-filter: blur(15px) brightness(.2);
}

#content2fixed{
 position: fixed;
 bottom: 9px;
 left: 9px;
 -webkit-filter: blur(10px);
}

3

ไม่แน่ใจอย่างนั้นฉันเชื่อว่า CSS ไม่สามารถทำสิ่งนี้ได้ในขณะนี้

อย่างไรก็ตาม Chris Coyier บล็อกเกี่ยวกับเทคนิคเก่าที่มีหลายภาพเพื่อให้ได้เอฟเฟกต์ดังกล่าวhttp://css-tricks.com/blurry-background-effect/


สแนปชอตของหน้าจอไปยังผืนผ้าใบอาจใช้งานได้และ 'ล็อก' ไอคอนและพื้นหลังด้วยกันก่อนทำสิ่งนี้ แต่ฉันไม่สามารถดูว่าพื้นหลังยังมีเอฟเฟกต์พารัลแลกซ์ใต้ไอคอนเมื่อมันเบลอ ... จากนั้นนาทีที่คุณจะเริ่มย้ายแผงควบคุม (การซ้อนทับโปร่งใส) อุปกรณ์จะสร้างภาพของหน้าจอและทำการ overtop ที่ใช้เล่ห์เหลี่ยม ในใจคุณพวกเขาไม่ได้ถูก จำกัด ด้วยสิ่งต่าง ๆ บนเว็บเช่นผ้าใบเมื่อทำเช่นนี้เนื่องจากอยู่ในระดับระบบปฏิบัติการและอาจไม่ จำกัด เฉพาะสิ่งที่ webkit
แพ้

3

ตรวจสอบสิ่งนี้ออกhttp://codepen.io/GianlucaGuarini/pen/Hzrhf ดูเหมือนว่ามันจะมีผลโดยไม่ต้องทำซ้ำภาพพื้นหลังขององค์ประกอบภายใต้ตัวเอง ดูข้อความที่เบลอในตัวอย่าง

Vague.js

var vague = $blurred.find('iframe').Vague({
  intensity:5 //blur intensity
});
vague.blur();

1
มันซ้ำเนื้อหา (มีสอง iframes ในตัวอย่าง codepen ที่คุณเชื่อมโยง) ลองคลิกที่รายการเมนู iframe เบลอไม่อัปเดต
Guglie

มันเป็นวิธีการแก้ปัญหาอยู่แล้ว
Onur Çelik

2

ข่าวดี

ณ วันนี้11 เมษายน 2020เป็นไปได้อย่างง่ายดายด้วยbackdrop-filterคุณสมบัติ CSS ซึ่งตอนนี้เป็นคุณลักษณะที่เสถียรใน Chrome, Safari & Edge

ฉันต้องการสิ่งนี้ในแอพมือถือไฮบริดของเราดังนั้นจึงมีใน Android / Chrome Webview & Safari WebView

  1. https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
  2. https://caniuse.com/#search=backdrop-filter

ตัวอย่างรหัส:

เพียงเพิ่มคุณสมบัติ CSS:

.my-class {
    backdrop-filter: blur(30px);
    background: transparent;     // Make sure there is not backgorund
}

UI ตัวอย่าง 1

ดูว่าใช้งานได้กับปากกานี้หรือลองตัวอย่าง:

#main-wrapper {
  width: 300px;
  height: 300px;
  background: url("https://i.picsum.photos/id/1001/500/500.jpg") no-repeat center;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

.my-effect {
  position: absolute;
  top: 300px;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  transition: top 700ms;
}

#main-wrapper:hover .my-effect {
  top: 0;
}
<h4>Hover over the image to see the effect</h4>

<div id="main-wrapper">
  <div class="my-effect">
    Glossy effect worked!
  </div>
</div>

UI ตัวอย่าง 2

ลองมาตัวอย่างของแอป McDonald เพราะมันมีสีสันมาก ฉันถ่ายภาพหน้าจอและเพิ่มเป็นพื้นหลังในbodyแอพของฉัน

ฉันต้องการแสดงข้อความด้านบนด้วยเอฟเฟกต์มันวาว backdrop-filter: blur(20px);เมื่อใช้การซ้อนทับด้านบนฉันสามารถเห็นสิ่งนี้: 😍

ภาพหน้าจอหลัก ป้อนคำอธิบายรูปภาพที่นี่


backdrop-filterยังคงไม่ทำงานโดยอัตโนมัติใน Firefox แม้ว่า ฉันสงสัยว่าผู้ใช้จะเปิดตัวเลือกเพื่อเปิดใช้งานbackdrop-filterโดยเจตนาเพียงเพื่อดูผลกระทบนี้
Richard

0

ฉันใช้ตัวกรอง svg เพื่อให้ได้เอฟเฟกต์ที่คล้ายกันสำหรับสไปรต์

<svg id="gray_calendar" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 48 48 48">
  <filter id="greyscale">
    <feColorMatrix type="saturate" values="0"/>
  </filter>
  <image width="48" height="10224" xlink:href="tango48i.png" filter="url(#greyscale)"/>
</svg>
  • แอตทริบิวต์ viewBox จะเลือกเฉพาะส่วนของภาพรวมของคุณที่คุณต้องการ
  • เพียงแค่เปลี่ยนตัวกรองเป็นสิ่งที่คุณต้องการเช่น<feGaussianBlur stdDeviation="10"/>ตัวอย่างของ Keith
  • ใช้<image ...>แท็กเพื่อนำไปใช้กับภาพใด ๆ หรือแม้กระทั่งใช้หลายภาพ
  • คุณสามารถสร้างมันขึ้นมาด้วย js และใช้มันเป็นภาพหรือใช้รหัสใน CSS ของคุณ

คุณเคยมีตัวอย่างงานนี้จากที่อื่นบ้างไหม? บางที jsFiddle หรือคล้ายกัน? ขอบคุณ
Blaker

0

สิ่งนี้อาจช่วยคุณได้ !!

สิ่งนี้จะเปลี่ยนพื้นหลังแบบไดนามิกที่ IOS ทำได้

.myBox {
  width: 750px;
  height: 500px;
  border: rgba(0, 0, 0, 0.5) 1px solid;
  background-color: #ffffff;
}

.blurBg {
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.blurBg img {
  -webkit-filter: blur(50px);
  margin-top: -150px;
  margin-left: -150px;
  width: 150%;
  opacity: 0.6;
}

-1

นี่คือสิ่งที่ฉันใช้กับ jQuery การแก้ปัญหาไม่ได้เป็นสากลหมายความว่าเราต้องปรับเปลี่ยนตำแหน่งและบางอย่างขึ้นอยู่กับการออกแบบจริง

โดยพื้นฐานแล้วสิ่งที่ฉันทำคือ: เมื่อทริกเกอร์โคลน / ลบพื้นหลังทั้งหมด (สิ่งที่ควรทำให้เบลอ) ไปยังคอนเทนเนอร์ที่มีเนื้อหาที่ไม่เบลอ ข้อแม้คือว่าในการปรับขนาดหน้าต่างเบลอเบลอ div จะไม่ตรงกับต้นฉบับในแง่ของตำแหน่ง แต่อาจแก้ไขได้ด้วยฟังก์ชั่นปรับขนาดบนหน้าต่าง (จริง ๆ แล้วตอนนี้ฉันไม่สามารถรบกวนได้)

ฉันขอขอบคุณความคิดเห็นของคุณเกี่ยวกับวิธีนี้!

ขอบคุณ

นี่คือซอที่ไม่ได้ทดสอบใน IE

HTML

<div class="slide-up">
<div class="slide-wrapper">
    <div class="slide-background"></div>
    <div class="blured"></div>
    <div class="slide-content">
         <h2>Pop up title</h2>

        <p>Pretty neat!</p>
    </div>
</div>
</div>
<div class="wrapper">
<div class="content">
     <h1>Some title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie magna elit, quis pulvinar lectus gravida sit amet. Phasellus lacinia massa et metus blandit fermentum. Cras euismod gravida scelerisque. Fusce molestie ligula diam, non porta ipsum faucibus sed. Nam interdum dui at fringilla laoreet. Donec sit amet est eu eros suscipit commodo eget vitae velit.</p>
</div> <a class="trigger" href="#">trigger slide</a>

</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
    <feGaussianBlur stdDeviation="3" />
</filter>
</svg>

CSS

body {
margin: 0;
padding: 0;
font-family:'Verdana', sans-serif;
color: #fff;
}
.wrapper {
position: relative;
height: 100%;
overflow: hidden;
z-index: 100;
background: #CD535B;
}
img {
width: 100%;
height: auto;
}
.blured {
top: 0;
height: 0;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
filter: url(#blur);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
position: absolute;
z-index: 1000;
}
.blured .wrapper {
position: absolute;
width: inherit;
}
.content {
width: 300px;
margin: 0 auto;
}
.slide-up {
top:10px;
position: absolute;
width: 100%;
z-index: 2000;
display: none;
height: auto;
overflow: hidden;
}
.slide-wrapper {
width: 200px;
margin: 0 auto;
position: relative;
border: 1px solid #fff;
overflow: hidden;
}
.slide-content {
z-index: 2222;
position: relative;
text-align: center;
color: #333333;
}
.slide-background {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: #fff;
z-index: 1500;
opacity: 0.5;
}

jQuery

// first just grab some pixels we will use to correctly position the blured element
var height = $('.slide-up').outerHeight();
var slide_top = parseInt($('.slide-up').css('top'), 10);
$wrapper_width = $('body > .wrapper').css("width");
$('.blured').css("width", $wrapper_width);

$('.trigger').click(function () {
    if ($(this).hasClass('triggered')) { // sliding up
        $('.blured').animate({
            height: '0px',
            background: background
        }, 1000, function () {
            $('.blured .wrapper').remove();
        });
        $('.slide-up').slideUp(700);
        $(this).removeClass('triggered');
    } else { // sliding down
        $('.wrapper').clone().appendTo('.blured');
        $('.slide-up').slideDown(1000);
        $offset = $('.slide-wrapper').offset();
        $('.blured').animate({
            height: $offset.top + height + slide_top + 'px'
        }, 700);
        $('.blured .wrapper').animate({
            left: -$offset.left,
            top: -$offset.top
        }, 100);
        $(this).addClass('triggered');
    }
});
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.