Scrolling effect on one page website

Question

I have a one page website. Sample fiddle is here.

I want to add effect like on www.fueled.com. There phone is not shown in the first and section and starts showing from the third section and again hides after 3-4 sections. A kind of Parallax effect. Can I please get help with this? My sample fiddle is given above.

 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> 

Answer 1

I think ScrollMagic is the perfect tool for what you want to do.
http://scrollmagic.io/

Some good examples

• http://scrollmagic.io/examples/advanced/parallax_sections.html
• http://scrollmagic.io/examples/advanced/section_slides_manual.html