Re: [問題] Flash模糊效果的替代方案
※ 引述《godead236 (科科彬)》之銘言:
: 原文恕刪
: Google "jquery blur effect"就找得到類似的東西了,不過其實沒用
: 什麼很多JQuery的語法。
: 我找到的是這個頁面
: http://motyar.blogspot.com/2010/04/blur-effect-with-css-and-jquery.html
: 它裡面有個DEMO,是根據滑鼠的距離來決定模糊度
: http://motyarblog.000space.com/blur_effect_with_css.html
: 我把它改了一下,利用setTimeout(),逐步減少模糊度,做出動畫的感覺。
: 大概像這樣
: http://jsfiddle.net/ocowchun/7rB3r/2/
: 歡迎討論
分享一下我解決的方法:
先分成三個容器
1. 原來的Div
2. 螢幕截圖剪出來的jpg檔
3. HTML5 canvas
將2用css的display:none隱藏
然後用stackBlur輸出到3
將3覆蓋在1上面
再將1用css的opacity:0隱藏(不能用display:none因為版面會跑掉)
之後用javascript控制stackBlur的模糊參數 迴圈減少至0
模糊參數至0時將1的opacity改成1,使其顯示出來
這樣就完成了!
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 210.209.143.94
討論串 (同標題文章)
本文引述了以下文章的的內容:
完整討論串 (本文為第 3 之 3 篇):