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>ありがとう！