title: scrollr - parallax scrolling with pseudo-fixed image ratio in full width size
body: <p>I have build my first parallax website based on Petr Tichy's very good tutorial. I recommend it (<a href="https://ihatetomatoes.net" rel="nofollow">https://ihatetomatoes.net</a>).</p>
  
  <p>Here is my new site.  The idea was to get an attractive intro for this new project using altered-perspective images in full width.
  <a href="http://www.ticket2ut...Alpha/zHome.php" rel="nofollow">http://www.ticket2ut...Alpha/zHome.php</a></p>
  
  <p>I have already spent hours and hours and read so many articles and tutorials... but I still struggle a bit especially that I want to control the ratio of the images in a certain way.  They must always be full page but depending on the width of the browser window, I apply a certain correction to the height.  As the whole project is about "changing your perspective"... it's great... IMO.</p>
  
  <p>However, I would like to change the height of the picture when the browser window is square or taller than wide.  I have tried so many different things... but nothing works.  The problem is that the background-attachment must be fixed to work with parallax and I can not change that.  At the moment I just resize the browser window to the ratio of the image (16/9) but this is not ideal at all.  I control the situation when the browser window is wide, but in the case it's not I would like to force the image to its exact ratio to start with.</p>
  
  <p>How can I achieve that?</p>
  
  <p>There is also a section at the bottom of the page (#20 - visual meditation) which I can not control properly... the text box should fade in and out later.  I used the code : data-100-top="opacity: 1"  data-center="opacity: 1" data-center-top="opacity: 0" data--100-bottom="opacity: 0;" data-anchor-target="#slide-20".  What should be changed to get the text in the box appear later and stay longer on?</p>
  
  <p>Greetings from Cape Town, Paul</p>