視差滾動 - 圖像不在後面

所以我是JavaScript的新手，特別是視差滾動。但我試着按照一個基本的教程學習和兩件事情不工作：視差滾動 - 圖像不在後面

（1）視差滾動的第二個背景圖像不會落後於文本。）視差滾動不起作用，這可能與圖像與文本位於同一圖層上的事實有關，即使它位於完全不同的div標籤中。

我是初學者，請大家幫忙。

這裏是整個代碼的鏈接：

(http://codepen.io/allon-z/pen/JXqBNL?editors=1100)

來源

2016-05-18 KCKim

http://codepen.io/allon-z/pen/JXqBNL?editors=1100與鏈接 – KCKim

對不起遇到問題是什麼的鏈接教程？ – mhatch

嗯，這是一個YouTube視頻https://m.youtube.com/watch?v=D75WTf_Y738我只是取代了圖像，並進行了小的圖像定位調整，因爲我沒有他使用的圖像。 – KCKim

需要包含的JavaScript。您可以在頭部或身體中使用script標籤進行添加。

<script> 
    function parallax(){ 
    var prlx_lyr_1 = document.getElementById('prlx_lyr_1'); 
    var prlx_lyr_2 = document.getElementById('prlx_lyr_2'); 
    prlx_lyr_1.style.top = -(window.pageYOffset/4)+'px'; 
    prlx_lyr_2.style.top = -(window.pageYOffset/8)+'px'; 
    } 
    window.addEventListener("scroll", parallax, false); 
</script>

段：

function parallax(){ 
 
    var prlx_lyr_1 = document.getElementById('prlx_lyr_1'); 
 
    var prlx_lyr_2 = document.getElementById('prlx_lyr_2'); 
 
    prlx_lyr_1.style.top = -(window.pageYOffset/4)+'px'; 
 
    prlx_lyr_2.style.top = -(window.pageYOffset/8)+'px'; 
 
    } 
 
    window.addEventListener("scroll", parallax, false);

body{ 
 
    margin: 0px; 
 
    position:relative; 
 
} 
 

 
#content_layer{ 
 
    position: absolute; 
 
    height: 32000px; 
 
} 
 

 
#prlx_lyr_1{ 
 
    position: fixed; 
 
    background: url(https://wallpaperscraft.com/image/shape_highlights_circles_light_47468_3840x2400.jpg) no-repeat; 
 
    width: 100%; 
 
    height: 800px; 
 
} 
 

 
#prlx_lyr_2{ 
 
    position: fixed; 
 
    background: url(http://space-facts.com/wp-content/uploads/venus-transparent.png) no-repeat 0px 100px; 
 
    width: 100%; 
 
    height: 800px; 
 
}

<body> 
 
    <div id="prlx_lyr_1"></div> 
 
    <div id="prlx_lyr_2"></div> 
 
    <div id="content_layer"> 
 
    <h2>About Me</h2> 
 
    <p>Hi! I am a web developper that focuses on fast, responsive web development. I am proficient in JavaScript, PHP, Databases, SQL, HTML, CSS, Bootstrap, and much more. Check out some of my websites!</p> 
 

 
    <h2>Porfolio</h2> 
 
    <p>Hi! I am a web developper that focuses on fast, responsive web development. I am proficient in JavaScript, PHP, Databases, SQL, HTML, CSS, Bootstrap, and much more. Check out some of my websites!</p> 
 

 
    <h2>Contact</h2> 
 
    <p>Hi! I am a web developper that focuses on fast, responsive web development. I am proficient in JavaScript, PHP, Databases, SQL, HTML, CSS, Bootstrap, and much more. Check out some of my websites!</p> 
 

 
    <h2>Social Media</h2> 
 
    <p>Hi! I am a web developper that focuses on fast, responsive web development. I am proficient in JavaScript, PHP, Databases, SQL, HTML, CSS, Bootstrap, and much more. Check out some of my websites!</p> 
 

 
    <h2>My Webiste Links</h2> 
 
    <p>Hi! I am a web developper that focuses on fast, responsive web development. I am proficient in JavaScript, PHP, Databases, SQL, HTML, CSS, Bootstrap, and much more. Check out some of my websites!</p> 
 

 
    <h2>More Gibberish</h2> 
 
    <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sollicitudin tempus odio, sed vulputate quam molestie ornare. Sed et risus felis. Donec aliquet suscipit urna quis facilisis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras auctor orci eros, non fringilla enim tempus sit amet. Aliquam et cursus massa. Donec urna magna, blandit id eros quis, pretium eleifend augue. Ut blandit neque arcu, vitae placerat lacus volutpat eget. Praesent suscipit nulla leo, ut eleifend est auctor ac. Vivamus ut arcu pulvinar, vulputate ipsum ac, sodales elit. 
 

 
    Cras interdum ligula magna, eu mollis leo sagittis tristique. Ut semper arcu non tristique posuere. Nullam efficitur purus ac nibh congue, sed sollicitudin nisi sodales. Nullam consectetur at lorem vitae congue. Phasellus condimentum gravida leo, sed maximus neque eleifend eget. Duis at leo purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam porta non ante eget pulvinar. Donec in urna non velit accumsan auctor eu vel ipsum. Phasellus interdum id dolor a venenatis. Aliquam facilisis lacinia justo, vitae porta mi ornare eget. Donec et sollicitudin nisl. Mauris dignissim consequat magna at ornare. Vestibulum at dolor turpis. 
 

 
    Mauris tristique tellus leo, at porttitor urna tincidunt id. Pellentesque nec iaculis tortor. Aenean maximus justo ac enim pellentesque gravida. Cras ullamcorper aliquam nunc quis auctor. Fusce semper dui nec accumsan suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tempor neque. Curabitur porttitor velit vitae nisi pulvinar, in rhoncus erat tempor. 
 

 
    Nam at sodales arcu. Sed vehicula tortor ut enim molestie consectetur. Sed eu porta nulla. Integer ultricies lorem quis sagittis mattis. Cras vel dui dolor. In feugiat sem quis pellentesque dictum. Nam quis metus justo. Sed non leo arcu. Donec commodo vel purus non semper. Sed viverra nisl at leo finibus, ac mollis ligula vehicula. 
 

 
    Curabitur dignissim ligula quis velit finibus fringilla. Donec varius consectetur purus, ac consectetur neque pulvinar ac. Donec sit amet leo eget sem maximus tempus quis ac ex. Praesent sapien erat, finibus vel nisi eget, molestie gravida tellus. Donec sapien augue, aliquam id convallis et, vulputate hendrerit est. Curabitur nibh ipsum, pharetra vitae sodales eget, scelerisque eget erat. Nulla nec cursus eros, sed rhoncus sapien. Cras diam quam, pulvinar gravida massa sed, vehicula imperdiet mi. Praesent et ipsum sed sem sodales dapibus. Sed pulvinar dui a sollicitudin fermentum. Nulla faucibus dolor nisl, a pretium nunc laoreet sed. Cras magna odio, fringilla id sagittis ullamcorper, aliquam a orci. Integer convallis id turpis ut sagittis.</p> 
 

 
    </div> 
 

 
</body>

來源

2016-05-18 06:43:23 mhatch

視差滾動 - 圖像不在後面

回答

相關問題