視差滾動---parallax.js
阿新 • • 發佈：2019-02-17
最近在看視差滾動的原理和實現方法。最簡單的是使用css的屬性background-attachment: fixed || scroll || local,使用這個便可以實現簡單的視差滾動效果，但是想完成一些更加炫酷的效果。就得使用js啦，其中最簡單的莫過於使用parallax。js外掛。
下面有個使用該外掛的html程式碼（ps：這個程式碼是從網上扒的，裡面的一些js的引用還有圖片都是網上的資源，所以必須要聯網才能看到效果）
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body { margin: 0; } .promo { width: 100%; height: 630px; border-top: 1px solid #c4c7cb; background: url(http://www.digitalhands.net/images/header_bg_back.jpg) no-repeat top center; } #parallax { position: relative; margin: 0 auto; overflow: hidden; height: 630px; width: 100%; background: url(http://www.digitalhands.net/images/header_bg.jpg) no-repeat center top !important; } #parallax .bg1 { width: 1602px; height: 603px; background: url(http://www.digitalhands.net/images/drops_bg_up.png) no-repeat 0 0; } #parallax .bg2 { width: 1602px; height: 603px; background: url(http://www.digitalhands.net/images/drops_bg_back.png) no-repeat 0 0; } #parallax .sloganBox { width: 1200px; position: absolute; left: 50%; height: 630px; margin-left: -600px; } #parallax .slogan1 { width: 1002px; height: 410px; background: url(http://www.digitalhands.net/images/text_yonlendiriyoruz_bg.png) no-repeat left 50px; } #parallax .slogan2 { width: 1120px; height: 450px; background: url(http://www.digitalhands.net/images/text_uretiyoruz_bg.png) no-repeat right top; } #parallax .slogan3 { width: 1102px; height: 500px; background: url(http://www.digitalhands.net/images/text_vesonra_bg.png) no-repeat right bottom; } .parallax-viewport { position: relative; overflow: hidden; } .parallax-layer { position: absolute; } .promoSlogan { float: left; position: relative; width: 960px; position: relative; color: #8a8a8a; margin: 0 auto; margin-top: 50px; padding-top: 7px; background-image: url(http://www.digitalhands.net/images/promo_blockquote_bg.gif), url(http://www.digitalhands.net/images/promo_blockquote_bg_2.gif); background-position: left center, right center; background-repeat: no-repeat; } .promoSlogan p { font-size: 21px; line-height: 30px; color: #8a8a8a; text-align: left; font-family: 'FuturaStdLightTrRegular'; margin-left: 42px; } .promoSlogan p em { font-family: 'FuturaStdBookTrRegular'; font-style: normal; } </style> </head> <body> <script type="text/javascript" src="http://wow.techbrood.com/libs/jquery/jquery1.8.1.js"></script> <script type="text/javascript" src="http://wow.techbrood.com/libs/jquery/jquery.jparallax.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#parallax .parallax-layer").parallax({}, { // xparallax: "60%", //這裡是外掛的所有引數，大家可以一個個試試瞭解他們每一個的作用 yparallax: false, // height: 630, // calibrateX: false, // calibrateY: true, // invertX: false, // invertY: true, // limitX: false, // limitY: 10, // scalarX: 2, // scalarY: 8, // frictionX: 0.2, // frictionY: 0.8, // originX: 0.0, // originY: 1.0 }); }); </script> <!-- Top Promo --> <div class="promo"> <div id="parallax" class="port parallax-viewport"> <div class="bg1 parallax-layer"></div> <div class="bg2 parallax-layer"></div> <div class="sloganBox"> <div class="slogan1 parallax-layer"></div> <div class="slogan2 parallax-layer"></div> <div class="slogan3 parallax-layer"></div> </div> </div> </div> <!-- //Top Promo --> </body> </html>