您現在的位置是:電腦技術吧?>? 組裝維修 ??>??視差效果,視差??>??正文詳情

視差效果,視差

田曉靈2019-11-15 16:20:55 人圍觀
簡介視差貼圖視差效應在互聯網上越來越流行。如果你還沒有聽說過視差效應,那實際上就是用圖片形成不同的圖層,分別以不同的速度和方向移動的效果。這將產生一個非常美妙的視覺效

視差(parallax)效果現在在互聯網上越來越流行了。

如果你還沒聽說過什么是視差效果,它其實就是利用圖片形成不同的層,分別以不同的速度,不同的方向移動產生的效果。

這會產生出很奇妙的視覺效果,能有力的吸引住瀏覽者的目光。

  觀看演示  在web設計中,最常見的實現視差效果的方式是使用jQuery插件。

但這種方法有一些弊端。

這些插件大多都是在window對象的scroll事件上放置監聽器。

這會導致JavaScript需要處理大量的事件觸發(處理scroll事件很容易造成瀏覽器性能問題,使用時需要非常小心。

)移動不同的層,計算背景的位置,設置圖片的屬性,這都引起了大量的DOM操作。

  簡言之,使用JavaScript來實現視差效果會讓頁面的滾動出現性能問題,出現卡頓。

  background-attachment屬性回顧  background-attachment -- 定義背景圖片隨滾動軸的移動方式  取值: scroll | fixed | inherit  scroll: 隨著頁面的滾動軸背景圖片將移動  fixed: 隨著頁面的滾動軸背景圖片不會移動  inherit: 繼承  初始值: scroll  繼承性: 否  適用于: 所有元素  background:背景.attachment:附著.  示例  CSS Code復制內容到剪貼板  body  {  background-image:url('list-orange.png');  background-attachment:fixed;  background-repeat:repeat-x;  background-position:center center;  }  屏幕的背景圖片為一條橙色線.隨著滾動軸移動,橙色線的視覺位置不變.  CSS background-attachment 屬性示例  使用background-attachment: fixed實現視差效果  為什么只有一小部分人知道,這種效果實際上可以用CSS實現。

  為了實現視差效果,多個背景圖片必須放置在不同的元素上。

這些背景圖需要定義成background-attachment: fixed。

通過設定background-attachment,我們可以改變背景圖像的效果和位置。

  background-attachment的缺省值是scroll,也就是背景圖片和內容的位置是相對靜止的。

這我們大家都見過,當我們上下滾動一個網頁時,背景和內容一起滾動。

  當把background-attachment設置成fixed時,事情會變得有趣。

fixed是說背景圖片不隨內容一起滾動,而是跟窗口保持靜止。

也就是說,當你拖動滾動條時,背景圖片沒有變化。

這就能夠產生漂亮的視差效果。

  讓我看一個實際實現:  CSS Code復制內容到剪貼板      foo  bar  baz  bazz    // setting base styles to image containers  [class*=bg__] {  height: 50vh;  text-indent: -9999px;  /* fix background */  background-attachment: fixed;  /* center it */  background-position: center center;  /* Scale it nicely to the element */  background-size: cover;  /* just make it look a bit better */  :nth-child(2n) {  box-shadow: inset 0 0 1em #111;  }  }  .bg__foo {  background-image: url(  http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax1.jpg  );  }  .bg__bar {  background-image: url(  http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax2.jpg  );  }  .bg__baz {  background-image: url(  http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax3.jpg  );  }  .bg__bazz {  height: 100vh;  background-image: url(  http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax1.jpg  );  }  關于這種技術的瀏覽器兼容情況,你可以參考這里,基本上,現代瀏覽器和IE9 的瀏覽器都支持。

  觀看演示  對我個人而言,我更喜歡CSS技術實現的視差效果,而不是用JavaScript。

用CSS實現,是受瀏覽器原生支持,沒有編程邏輯,沒有對DOM額外的操作,使得整個方案非常的簡潔漂亮。

  即使是CSS實現的視差效果,也會給瀏覽器帶來負擔。

  background-attachment: fixed會導致瀏覽器更多的渲染,也會影響瀏覽器滾動的效率。

所以,開發時一定要多做測試,視性能情況而決定實現的效果。

版權聲明:本文由 田曉靈 整理編輯。

原標題:視差效果怎么拍,視差滾動效果

轉載注明出處:http://www.dn9ww09s.icu/assemble/12549.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 后續ota是什么意思,ota升級怎么弄

    后續ota是什么意思,ota升級怎么弄 相關圖片電視ota升級怎么辦無論是Android還是蘋果,用戶每隔一次升級系統時都會被提示通過OTA進行升級。OTA升級意味著什么?本文以Android陣營的小米為例,講述了OTA升級的含ota工作經驗指什么...

  • position有哪些屬性,position四個屬性

    position有哪些屬性,position四個屬性 相關圖片position屬性值position屬性決定如何定位元素。大約有五個值:每一頁都可以看作是一堆層,如下圖所示,當position設置為relative時,元素仍處于正常流中,位置為position怎么用...

  • win7重裝installer,win10重裝installer

    win7重裝installer,win10重裝installer 相關圖片win7不能正常進入系統用戶在整理win7系統磁盤時找到了安裝程序文件夾。您想知道是否可以清理安裝程序文件夾嗎?畢竟,安裝程序占用了C盤很大的空間。只有安裝程序文件夾是一個部...

  • hifi有什么用,hifi怎么打開

    hifi有什么用,hifi怎么打開 相關圖片hifi一些手機用戶在手機的宣傳資料或說明書中看到手機支持高保真。有些人不知道hifi是什么意思,但對于喜歡聽音樂的用戶來說,他們非常關心hifi。高保真是英式高配hifi是啥...

  • 走向,就讓我走向你

    走向,就讓我走向你 相關圖片十二正經走向眾所周知,Facebook一直在努力推動開源jsgamebench工具HTML5的發展,首席技術官BRET Taylor也多次提到HTML5的重要性。甚至有傳聞《走向復興》...

  • 閃念膠囊是什么,閃念膠囊怎么用

    閃念膠囊是什么,閃念膠囊怎么用 相關圖片堅果閃念膠囊怎么用flash膠囊是hammer技術的智能語音助手,它可以朗讀文本并保存音頻格式。閃光膠囊操作簡單,可以掛在桌面上。界面很漂亮,有美感和內容語音備忘,您可以長按錘子...

  • 動畫效果怎么設置,ppt切換動畫

    動畫效果怎么設置,ppt切換動畫 相關圖片幻燈片如何取消動畫一些開發者說HTML5將給個人開發者帶來更多的機會。下面詳細介紹一個漂亮的動畫效果,實現登錄表單和注冊表單在同一頁面的轉換。這些效果完全由HTML5和CSS3實怎么...

  • lte服務是什么意思啊,網絡為什么顯示lte

    lte服務是什么意思啊,網絡為什么顯示lte 相關圖片什么是lte小米手機的一些早期版本是LTE版本,但很多用戶不知道LTE在這里的含義。LTE是通用移動通信技術的長期演進,簡單的理解就是3G技術的升級版LTE是英文全稱L什么是lte網絡...

  • 雙卡雙待單通優缺點,雙卡雙待單通怎么切換

    雙卡雙待單通優缺點,雙卡雙待單通怎么切換 相關圖片打電話單通是什么意思除了Android系統的開放性外,很多手機用戶之所以選擇小米移動,是因為Android具有雙卡雙備的功能。不過,有些用戶會了解更多。一些Android手機支持雙僅a卡上網...

  • divcss,divcss布局模板

    divcss,divcss布局模板 相關圖片css本文以div CSS為例,實現了豬八戒首頁的導航菜單效果。與您分享以供參考。具體內容如下:這是模仿2010年豬八戒首頁的頁面導航菜單。它的藍色風格,非常漂亮,大什么是css...

熱評文章

  • photo booth怎么用,photobooth有什么用嗎

    photo booth怎么用,photobooth有什么用嗎 相關圖片photobooth什么意思一些iPhone用戶已經在手機上找到了photo booth的功能,但有些人不知道它是什么。Photo booth是一個針對Mac和IOS的小程序。它的主要功能photo booth哪一年出的...

  • 應用程序,應用程序在哪

    應用程序,應用程序在哪 相關圖片應用程序安裝包互聯網上有很多設計和開發工具,但很少有易于使用和免費的,所以今天的文章向您展示了8個很酷的HTML5應用程序。這些令人驚嘆的HTML5應用讓你體驗到了網絡技術的隱藏...

  • photo booth拍視頻,蘋果photobooth在哪

    photo booth拍視頻,蘋果photobooth在哪 相關圖片photo boothPhoto booth是蘋果設備上的一個小應用。它的主要功能是通過攝像機拍攝數碼照片。攝影棚內置17種特效。照片顯示后,用戶可以使用photobooth有什么用嗎...

  • applepencil怎么用,applepencil有什么用

    applepencil怎么用,applepencil有什么用 相關圖片applepencil1使用教程蘋果筆是蘋果公司的智能筆,帶有壓力傳感器,也被稱為電容筆。它可以同時與用戶的手指一起使用。配有閃電接口,支持無線充電。2015年發布,iPadapplepencil2適用機型...

  • 鋸齒王冠代碼,伊斯本代碼

    鋸齒王冠代碼,伊斯本代碼 相關圖片上古卷軸五鋸齒王冠代碼圖:提示:將代碼復制到一個HTML文件并保存。直接打開看效果。實現代碼:代碼如下:!DOCTYPE htmlhtmllang=zhheadmetacharset鋸齒王冠能保留嗎...

  • lbe安全大師好用嗎,比lbe安全大師更好

    lbe安全大師好用嗎,比lbe安全大師更好 相關圖片安全大師哪個好用現在Android手機都是內置的安全中心,但一些用戶仍然認為使用起來并不容易。他們喜歡使用第三方安全中心。第三方安全中心使用更多的LBE安全主機和360。哪一個那個...

  • 三角箭頭,三角箭頭圖標

    三角箭頭,三角箭頭圖標 相關圖片三箭頭使用CSS制作不帶圖片和箭頭的div box(此代碼更適合追求純代碼的人)這種效果也可以用圖片背景實現,代碼將更加簡潔CSS代碼:CSS代碼將內容復制到剪貼板d箭頭...

  • 國內怎么用google日歷,google 日歷

    國內怎么用google日歷,google 日歷 相關圖片google日歷同步不能卸載谷歌日歷能在國內使用嗎?這是許多安卓用戶提出的問題之一。Google日歷以其簡單、易用、功能強大、支持跨平臺同步等特點受到Android用戶的青睞。不幸的是,它...

  • 驅動人生網卡版沒網可以用嗎,重裝win7后usb全部失靈

    驅動人生網卡版沒網可以用嗎,重裝win7后usb全部失靈 相關圖片萬能網卡驅動離線版pc有些用戶在計算機系統中呆了很長時間后感到卡住,決定重新安裝系統。很多人在適應駕駛系統后會選擇駕駛自己的生活。不過,他們很快發現,有一種網卡版的駕...

  • 輕松的文字,朋友圈輕松的文字

    輕松的文字,朋友圈輕松的文字 相關圖片心情文字我們經常在網站等各種視頻媒體上看到文字飛揚或彈跳等文字效果,或是通過飛池將文字或企業標識等其他圖案融合在一起,非常漂亮。本flash教程旨在模擬這種效果。首先,一...

關注微信

变脸官网查询