1
私は1ページのウェブサイトを持っています。サンプルのフィドルはこちらです。1ページのウェブサイトへのスクロール効果
www.fueled.comのような効果を追加したいと思います。電話は最初とセクションには表示されず、3番目のセクションから表示が開始され、3〜4セクションの後に再び隠れます。パララックス効果の一種。これで助けてもらえますか？私のサンプルフィドルは上に与えられています。
navlist = [];
$("#navlist a").each(function(i) {
var thisLink = $(this);
var thisId = thisLink.attr('href');
var thisTarget = $(thisId);
navlist.push({
'anchor': thisLink,
'id': thisId,
'target': thisTarget
});
thisLink.on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: thisTarget.offset().top
}, 800);
});
});
$(window).on('scroll resize', function(e) {
$.each(navlist, function(e, elem) {
var placement = elem.target[0].getBoundingClientRect();
if (placement.top < window.innerHeight && placement.bottom > 0) {
history.pushState({}, '', elem.id);
console.log('Hash: ' + elem.id);
return false; /* Exit $.each loop */
};
});
});#first {
height: 100vh;
background: #F06A59;
}
#second {
height: 100vh;
background: #FB3E47;
}
#third {
height: 100vh;
background: #FFA306;
}
#fourth {
height: 100vh;
background: #528AFC;
}
#fifth {
height: 100vh;
background: #52FC6C;
}
#fifth {
height: 100vh;
background: #52FC6C;
}
#sixth {
height: 100vh;
background: #CFDA25;
}
.header {
width: 100%;
position: absolute;
padding: 20px
}
.nav {
position: fixed;
width: 100%;
}
.nav ul {
list-style: none;
}
.nav ul li {
display: inline;
font-size: 18px;
margin-bottom: 40px;
font-family: Georgia, "Times New Roman", Times, serif;
}
.nav ul li a {
text-decoration: none;
color: #000;
padding: 10px 5px 10px 70px;
font-family: agency fb;
font-weight: bold;
font-size: 36px;
text-shadow: 1px 2px 4px #000000;
}
.nav ul li a:hover {
color: #fff;
text-shadow: 1px 6px 4px #000000;
transition: all 0.4s ease-in-out;
}
.nav-active {
color: red !important;
}
.phone {
left: 43%;
top: 28%;
position: fixed;
background: url(https://fueled.com/assets/images/home/project-phone--iphone.png) no-repeat;
background-size: 250px 500px;
padding: 70px 25px 75px 25px;
display: block;
}
.phone-inner {
width: 200px;
height: 355px;
border: 1px solid #000;
}<div class="header">
<div class="nav">
<ul id="navlist">
<li><a href="#first" id="nav1">Home</a>
</li>
<li><a href="#second" id="nav2">Features</a>
</li>
<li><a href="#third" id="nav3">About Us</a>
</li>
</ul>
</div>
<div class="phone" align="center">
<div class="phone-inner"></div>
</div>
</div>
<section>
<div class="main" id="first">
<video width="100%" autoplay="" loop="" muted>
<source src="vid/vids.mp4" type="video/mp4">
</video>
</div>
</section>
<section>
<div class="main" id="second"></div>
</section>
<section>
<div class="main" id="third"></div>
</section>