0
我有我的視差代碼的一些問題。當您滾動時，我試圖獲得無縫的外觀，但問題是我似乎無法弄清楚如何定位背景，以便它們不會分裂並重復相同的圖像。我已經嘗試了所有我能想到的解決問題的方法，但似乎無法找到中間立場。任何建議都會很棒。CSS問題與視差
(function(){
var parallax = document.querySelectorAll(".parallax"),
speed = 0.5;
window.onscroll = function(){
[].slice.call(parallax).forEach(function(el,i){
var windowYOffset = window.pageYOffset,
elBackgrounPos = "0 " + (windowYOffset * speed) + "px";
el.style.backgroundPosition = elBackgrounPos;
});
};
})();.empty_canvas_content {
box-shadow:none !important;
}
section.module:last-child {
margin-bottom: 0;
}
section.module h2 {
margin-bottom: 40px;
font-family: 'proxima_nova_rgregular', sans-serif;
font-size: 30px;
}
section.module p {
margin-bottom: 40px;
font-size: 12px;
font-weight: 300;
}
section.module p:last-child {
margin-bottom: 0;
}
section.module.content {
\t margin: 0 auto;
\t background-color:#fff;
\t font-family: 'proxima_nova_rgregular', sans-serif;
\t color: #000;
\t font-size:12px;
\t letter-spacing:0px;
}
section.module.parallax {
padding: 240px 0;
background-position: 0 0;
}
section.module.parallax h1 {
color: #1e1e1e;
font-size: 48px;
font-family: 'proxima_nova_rgregular', sans-serif;
line-height: 1;
font-weight: 700;
text-align: center;
text-transform: uppercase;
}
/* These are the mobile images, push graphic to the left */
section.module.parallax-1 {
background-image: url("http://s3.postimg.org/3oyk0ti1v/untitled4.jpg");
background-repeat:repeat-y;
background-size:cover;
background-position:left;
}
section.module.parallax-2 {
background-image: url("http://s15.postimg.org/keyjegc6z/story2_mobile.jpg");
background-repeat:repeat-y;
background-size:cover;
background-position:left;
}
section.module.parallax-3 {
background-image: url("http://s3.postimg.org/5v3hkow6r/pattern3.png");
background-repeat:repeat-y;
background-size:cover;
background-position:left;
}
@media all and (min-width: 600px) {
section.module h2 {
font-size: 42px;
}
section.module p {
font-size: 20px;
}
section.module.parallax {
padding: 300px 0;
}
section.module.parallax-1 {
\t background-image: url("http://s10.postimg.org/5p42tdi09/Untitled_3_copy.jpg");
}
section.module.parallax-2 {
\t background-image: url("http://s15.postimg.org/9e3e9fjy3/story2_desktop.jpg");
}
section.module.parallax-3 {
\t background-image: url("http://s10.postimg.org/5p42tdi09/Untitled_3_copy.jpg");
}
section.module.parallax h1 {
font-size: 96px;
}
}
@media all and (min-width: 960px) {
section.module.parallax h1 {
font-size: 160px;
}
section.module.parallax-1 {
\t background-image: url("http://s10.postimg.org/5p42tdi09/Untitled_3_copy.jpg");
}
section.module.parallax-2 {
\t background-image: url("http://s15.postimg.org/9e3e9fjy3/story2_desktop.jpg");
}
section.module.parallax-3 {
\t background-image: url("http://s10.postimg.org/5p42tdi09/Untitled_3_copy.jpg");
}
}<div class="deleteme" style="max-width:1140px; margin: 0 auto;">
<p><section class="module parallax parallax-1">
<div class="holditin">
<center><img src="http://s22.postimg.org/k71wcjnm9/logo.png" width="90%"></center>
</div>
</section>
<section class="module content">
<div class="holditin">
<h2><center>Venture in Style Dream Road Trip Giveaway!</center></h2>
<center><p>Have you ever dreamed of going on the road trip of a lifetime? Maybe it's renting an RV and exploring Route 66? Or driving through the mountains on the Blue Ridge Parkway? Whatever it is, we want to hear about it.</p></center>
</div>
</section> <section class="module parallax parallax-2">
<div class="holditin">
<h1>Shape</h1>
</div>
</section> <section class="module content">
<div class="holditin">
<h2><center>We're awarding one lucky winner $5,000 to take it!</center></h2>
<center><p>Tell us in a video that is between 30 seconds and 2 minutes long what your dream road trip is! Upload it below or post it to your Instagram page using <strong>#ventureinstyle</strong> to be entered for a chance to win.</p></center>
</div>
</section> <section class="module parallax parallax-3">
<div class="holditin">
<h1>Colour</h1>
</div>
</section> <section class="module content">
<div class="holditin">
<h2><center><font style="letter-spacing:2px;">BE CREATIVE!</font></center></h2>
<center><p>Entries will be judged on creativity and lenght, so make sure your video stands out and meets the required length (:30-2:00).</p></center>
</div>
</section>
</div>謝謝！