title: Parallax Scrolling – How are these effects achieved on http://www.dangersoffracking.com/?
body: <p>I'm not a big fan of parallax scrolling, mostly because it's not so mobile-friendly, but I am currently designing a home page where it would work really well.</p>
  
  <p>On the <a href="http://www.dangersoffracking.com/" rel="nofollow noreferrer">http://www.dangersoffracking.com/</a> page, there are two effects that I particularly like: 1) the fading in and then disappearance of text boxes at certain times (can be observed at the beginning) 
  <img src="https://i.stack.imgur.com/LAwlz.png" alt="Text Box Fading in on scroll and then out when scrolling out"></p>
  
  <p>2) on the top left hand side and then on the top right hand side the small icons with information seem to be added to a "menu" by scrolling through the page.</p>
  
  <p><img src="https://i.stack.imgur.com/hw7Bp.png" alt="Icon Menu on the Top right hand side"></p>
  
  <p>I'm a bit of a novice at JavaScript/JQuery so would appreciate it if someone could explain in details how these work and maybe provide an example with JSFiddle? 
  I feel like these could provide a useful resource for others too!</p>
  
  <p>Thank you!</p>