推 july2009: 推! 04/11 23:46
→ xo1100: 推!感謝解答 不過iso那邊的效果還是跑不出來QQ 04/15 13:31
※ 引述《xo1100 (蝦蒸河粉)》之銘言：
: 各位版上大大晚上好
: 小弟又有一些疑問要求救了m(- -)m
: http://www.columnfivemedia.com/
: 那個網頁在開始載入的時候
: 會出現一條的PROGRESS
: 請問那效果是用CSS出來的還是有用JS處理
: 之前有上GIT去爬過可是都沒有我想要的答案-_-
那條loading bar 是這個
<div class="loader" style="display: block; width: 100%;"></div>
用js去控制width跟display
: 第二個問題是
: 目前在做CSS3的動畫效果
: 如果要分次載入動畫(捲軸往下拉的時候)
: 是要設定哪方面才能做出來呢
: 像以下網頁下拉的時候六個項目用動畫的效果出來
: http://goo.gl/TSu4Kk
: 目前小弟只想的出來是用@media設定長度
: 不知道這方向是不是對的
不是很懂你的意思
那種效果大概都是
監聽scroll, 拉到設定的位置觸發對某個元素加上class
透過transition做出動畫效果
然後你看他會有時間差..是因為他加了setTimeout
就是經過你設定的時間後才加class.才做動畫
: 還有如果縮小視窗
: 板塊如何還有滑動的效果
: 不會生硬的直接跳到定位呢
: 大概像這個效果
: http://day-design.net/
: 這方面又是怎麼做出來的呢
有時這種效果看起來比較複雜的都是外掛
你看他匯進的js檔去猜
js檔上面都有註解.不難找
http://isotope.metafizzy.co/v1/demos/fluid-responsive.html
: 這些事小弟幾個月來學習還未解決的方面
: (光是在同一個瀏覽器而已
: 最近還發現在Firefox上JS跟css3效果跑不出來
: 用了moz也一樣 orz)
: 請問這幾個方面有什麼關鍵字嗎
: 再次感謝大大們的解答了
http://caniuse.com/
可以到這看瀏覽器支援狀況
跑不出來看console有沒有錯誤..
問題講具體一點才有辦法幫忙研究
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 175.180.117.230
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1428764920.A.2E3.html