<div id="rightbar">
   
   <div id="kitty1" 
     data-anchor-target="#image1";
   
      data-0-top="background: !url(http://thetechnokittens.com/wp-content/uploads/2013/08/kitten-video.jpg) no-repeat "
      data--1800-top="background[bounce]: !url(https://4.bp.blogspot.com/-no7iemjtenA/TrhsD2rbTrI/AAAAAAAAAUs/Ooahymvhs-A/s640/Choclate+Book+Page+3.jpg) no-repeat; background-size:100%; "
      data--4000-top="background[bounce]: !url(http://blog.wholesalecostumeclub.com/wp-content/uploads/2012/01/fondue.jpg) no-repeat "></div>

  
   

</div>
   

<div id="leftbar">
<div id="content">
<h1 id="image1">Cat</h1>
  
 

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id tempore adipisci aut fugit architecto necessitatibus facere facilis voluptatem eveniet voluptatum eligendi aliquam voluptatibus earum aliquid magnam consectetur illum blanditiis quod.</div>
<div>Accusamus corrupti voluptas enim officia recusandae facere voluptatibus deleniti laboriosam mollitia consequatur consequuntur aliquam at pariatur eius debitis porro unde amet molestias reprehenderit accusantium dolore expedita sint earum quia nemo!</div>
<div>Qui tenetur laudantium molestias ipsa sed dolor perspiciatis soluta. Aliquam veritatis quae quis libero soluta perspiciatis sint debitis quibusdam molestias autem tenetur nisi deserunt eos voluptas laboriosam alias cum praesentium.</div>
<div>Quidem sapiente commodi distinctio porro et officiis autem! Sint accusamus eum nesciunt recusandae officia quos quidem temporibus voluptas voluptatum aut fuga dolor illum incidunt excepturi numquam fugit a! Neque ad.</div>
<div>Facilis beatae impedit assumenda vel animi esse temporibus error iste vero consectetur quos magnam aut tempore consequatur fugiat voluptatum similique. Assumenda modi nemo temporibus nobis saepe! Blanditiis earum ratione libero.</div>
<div>Obcaecati ut cupiditate fugiat fuga aut error qui quibusdam delectus debitis quidem possimus facere tempora perspiciatis vitae dolorem quia explicabo pariatur! Quasi eos neque eaque eveniet obcaecati placeat culpa cupiditate.</div>

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur odit beatae nesciunt voluptas facere soluta perspiciatis fugit dicta consequatur neque libero aliquam dolore totam sed odio vero ipsum nobis deleniti!</div>
<div>Dignissimos beatae numquam atque voluptas dolorem voluptatum quo aperiam nihil quas aspernatur eveniet provident animi est vero praesentium facere nam deserunt temporibus aliquid unde iste voluptatibus quasi odit modi veritatis.</div>

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam dolorem minus officia rerum quos animi inventore obcaecati dignissimos debitis alias enim harum fuga laudantium voluptatum rem praesentium dolor suscipit. Atque!</div>
<div>Minus aspernatur aperiam pariatur quaerat voluptates. Ullam dicta aperiam saepe dolorem mollitia voluptatem quasi animi officia vel nemo quam minima iure autem perspiciatis iusto laborum velit nesciunt expedita tenetur debitis!</div>



<div>Eligendi nobis nulla dolorem neque modi odio temporibus porro unde earum doloremque provident quasi ullam fugiat asperiores cupiditate veniam blanditiis inventore omnis quisquam a nam! Culpa ad dolore nostrum numquam?</div>
<div>Ea quos at assumenda tempore eveniet nesciunt repellat blanditiis necessitatibus! Nulla explicabo rerum numquam asperiores repellat ipsam necessitatibus reiciendis suscipit perferendis repudiandae laboriosam vel consectetur nesciunt aperiam esse quia inventore.</div>
<div>Officiis dolore quia ea tenetur odio nesciunt doloribus nemo velit ipsam optio nisi veniam obcaecati autem repudiandae maiores. Saepe modi voluptatum consectetur nam fuga voluptate tempora aliquid iusto provident magnam!</div>
<div>Fugit tempora illum excepturi a consectetur nesciunt temporibus! Laudantium eaque eveniet assumenda. Vero debitis odio pariatur ea eum qui voluptates voluptatem eos obcaecati maiores illum accusamus distinctio itaque porro ducimus!</div>

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus beatae architecto ipsam itaque libero similique quos odit inventore blanditiis perferendis voluptas accusamus aperiam ab amet quo quisquam cupiditate corrupti laboriosam!</div>
<div>Deleniti fugit ipsa modi animi sunt deserunt quasi facilis eaque culpa dolor. Ea deserunt minus nihil error quisquam expedita maxime perferendis doloribus ipsam vel quis veniam quo quas tempora quae.</div>
<div>Aut beatae labore vel cupiditate minima itaque aspernatur minus sed rem optio eius natus ducimus quae reiciendis soluta eveniet consequatur totam iusto in suscipit velit laboriosam accusantium illo! Earum voluptatem!</div>
<div>Atque animi molestias officiis tenetur quam asperiores a ullam perspiciatis laboriosam sequi rem quasi possimus omnis eaque perferendis! Eum eaque quod perspiciatis commodi perferendis tempora assumenda omnis laboriosam ex deleniti.</div>
<div>Pariatur vel a porro optio dolore aliquam odio. Quibusdam voluptatibus nobis minima adipisci enim facilis asperiores deserunt laboriosam officia temporibus quis beatae obcaecati quisquam! Harum earum autem maxime ea cupiditate!</div>
<div>In facere dignissimos ducimus maxime pariatur possimus sunt. Suscipit adipisci necessitatibus omnis maiores voluptatum magnam corporis ea nulla quibusdam nemo cumque laborum id blanditiis laudantium dolorem accusantium recusandae distinctio quam.</div>
<div>Id molestias exercitationem saepe ipsam iure quae quidem incidunt. Vero est iusto asperiores quis dolorem omnis expedita qui repellat illo voluptatem aliquam a voluptatum nobis saepe eius et adipisci? Dolorem!</div>
<div>Accusantium eius esse dignissimos doloremque nemo assumenda iusto nostrum excepturi nihil facere mollitia aperiam eum harum quod nobis illo a adipisci eaque fugiat distinctio. Provident molestias doloribus alias ipsam voluptatum.</div>
<div>Accusamus molestiae voluptas deleniti vitae rerum delectus provident molestias temporibus atque iusto nostrum ullam incidunt saepe. Quia illo perferendis mollitia ut eum fugiat magnam officia tenetur doloremque quo pariatur ullam.</div>
  <h1 id="image2">Ham</h1>
  
 

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id tempore adipisci aut fugit architecto necessitatibus facere facilis voluptatem eveniet voluptatum eligendi aliquam voluptatibus earum aliquid magnam consectetur illum blanditiis quod.</div>
<div>Accusamus corrupti voluptas enim officia recusandae facere voluptatibus deleniti laboriosam mollitia consequatur consequuntur aliquam at pariatur eius debitis porro unde amet molestias reprehenderit accusantium dolore expedita sint earum quia nemo!</div>
<div>Qui tenetur laudantium molestias ipsa sed dolor perspiciatis soluta. Aliquam veritatis quae quis libero soluta perspiciatis sint debitis quibusdam molestias autem tenetur nisi deserunt eos voluptas laboriosam alias cum praesentium.</div>
<div>Quidem sapiente commodi distinctio porro et officiis autem! Sint accusamus eum nesciunt recusandae officia quos quidem temporibus voluptas voluptatum aut fuga dolor illum incidunt excepturi numquam fugit a! Neque ad.</div>
<div>Facilis beatae impedit assumenda vel animi esse temporibus error iste vero consectetur quos magnam aut tempore consequatur fugiat voluptatum similique. Assumenda modi nemo temporibus nobis saepe! Blanditiis earum ratione libero.</div>
<div>Obcaecati ut cupiditate fugiat fuga aut error qui quibusdam delectus debitis quidem possimus facere tempora perspiciatis vitae dolorem quia explicabo pariatur! Quasi eos neque eaque eveniet obcaecati placeat culpa cupiditate.</div>

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur odit beatae nesciunt voluptas facere soluta perspiciatis fugit dicta consequatur neque libero aliquam dolore totam sed odio vero ipsum nobis deleniti!</div>
<div>Dignissimos beatae numquam atque voluptas dolorem voluptatum quo aperiam nihil quas aspernatur eveniet provident animi est vero praesentium facere nam deserunt temporibus aliquid unde iste voluptatibus quasi odit modi veritatis.</div>

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam dolorem minus officia rerum quos animi inventore obcaecati dignissimos debitis alias enim harum fuga laudantium voluptatum rem praesentium dolor suscipit. Atque!</div>
<div>Minus aspernatur aperiam pariatur quaerat voluptates. Ullam dicta aperiam saepe dolorem mollitia voluptatem quasi animi officia vel nemo quam minima iure autem perspiciatis iusto laborum velit nesciunt expedita tenetur debitis!</div>



<div>Eligendi nobis nulla dolorem neque modi odio temporibus porro unde earum doloremque provident quasi ullam fugiat asperiores cupiditate veniam blanditiis inventore omnis quisquam a nam! Culpa ad dolore nostrum numquam?</div>
<div>Ea quos at assumenda tempore eveniet nesciunt repellat blanditiis necessitatibus! Nulla explicabo rerum numquam asperiores repellat ipsam necessitatibus reiciendis suscipit perferendis repudiandae laboriosam vel consectetur nesciunt aperiam esse quia inventore.</div>
<div>Officiis dolore quia ea tenetur odio nesciunt doloribus nemo velit ipsam optio nisi veniam obcaecati autem repudiandae maiores. Saepe modi voluptatum consectetur nam fuga voluptate tempora aliquid iusto provident magnam!</div>
<div>Fugit tempora illum excepturi a consectetur nesciunt temporibus! Laudantium eaque eveniet assumenda. Vero debitis odio pariatur ea eum qui voluptates voluptatem eos obcaecati maiores illum accusamus distinctio itaque porro ducimus!</div>

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus beatae architecto ipsam itaque libero similique quos odit inventore blanditiis perferendis voluptas accusamus aperiam ab amet quo quisquam cupiditate corrupti laboriosam!</div>
<div>Deleniti fugit ipsa modi animi sunt deserunt quasi facilis eaque culpa dolor. Ea deserunt minus nihil error quisquam expedita maxime perferendis doloribus ipsam vel quis veniam quo quas tempora quae.</div>
<div>Aut beatae labore vel cupiditate minima itaque aspernatur minus sed rem optio eius natus ducimus quae reiciendis soluta eveniet consequatur totam iusto in suscipit velit laboriosam accusantium illo! Earum voluptatem!</div>
<div>Atque animi molestias officiis tenetur quam asperiores a ullam perspiciatis laboriosam sequi rem quasi possimus omnis eaque perferendis! Eum eaque quod perspiciatis commodi perferendis tempora assumenda omnis laboriosam ex deleniti.</div>
<div>Pariatur vel a porro optio dolore aliquam odio. Quibusdam voluptatibus nobis minima adipisci enim facilis asperiores deserunt laboriosam officia temporibus quis beatae obcaecati quisquam! Harum earum autem maxime ea cupiditate!</div>
<div>In facere dignissimos ducimus maxime pariatur possimus sunt. Suscipit adipisci necessitatibus omnis maiores voluptatum magnam corporis ea nulla quibusdam nemo cumque laborum id blanditiis laudantium dolorem accusantium recusandae distinctio quam.</div>
<div>Id molestias exercitationem saepe ipsam iure quae quidem incidunt. Vero est iusto asperiores quis dolorem omnis expedita qui repellat illo voluptatem aliquam a voluptatum nobis saepe eius et adipisci? Dolorem!</div>
<div>Accusantium eius esse dignissimos doloremque nemo assumenda iusto nostrum excepturi nihil facere mollitia aperiam eum harum quod nobis illo a adipisci eaque fugiat distinctio. Provident molestias doloribus alias ipsam voluptatum.</div>
<div>Accusamus molestiae voluptas deleniti vitae rerum delectus provident molestias temporibus atque iusto nostrum ullam incidunt saepe. Quia illo perferendis mollitia ut eum fugiat magnam officia tenetur doloremque quo pariatur ullam.</div>
  
<div>Eligendi nobis nulla dolorem neque modi odio temporibus porro unde earum doloremque provident quasi ullam fugiat asperiores cupiditate veniam blanditiis inventore omnis quisquam a nam! Culpa ad dolore nostrum numquam?</div>
<div>Ea quos at assumenda tempore eveniet nesciunt repellat blanditiis necessitatibus! Nulla explicabo rerum numquam asperiores repellat ipsam necessitatibus reiciendis suscipit perferendis repudiandae laboriosam vel consectetur nesciunt aperiam esse quia inventore.</div>
<div>Officiis dolore quia ea tenetur odio nesciunt doloribus nemo velit ipsam optio nisi veniam obcaecati autem repudiandae maiores. Saepe modi voluptatum consectetur nam fuga voluptate tempora aliquid iusto provident magnam!</div>
<div>Fugit tempora illum excepturi a consectetur nesciunt temporibus! Laudantium eaque eveniet assumenda. Vero debitis odio pariatur ea eum qui voluptates voluptatem eos obcaecati maiores illum accusamus distinctio itaque porro ducimus!</div>

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus beatae architecto ipsam itaque libero similique quos odit inventore blanditiis perferendis voluptas accusamus aperiam ab amet quo quisquam cupiditate corrupti laboriosam!</div>
<div>Deleniti fugit ipsa modi animi sunt deserunt quasi facilis eaque culpa dolor. Ea deserunt minus nihil error quisquam expedita maxime perferendis doloribus ipsam vel quis veniam quo quas tempora quae.</div>
<div>Aut beatae labore vel cupiditate minima itaque aspernatur minus sed rem optio eius natus ducimus quae reiciendis soluta eveniet consequatur totam iusto in suscipit velit laboriosam accusantium illo! Earum voluptatem!</div>
<div>Atque animi molestias officiis tenetur quam asperiores a ullam perspiciatis laboriosam sequi rem quasi possimus omnis eaque perferendis! Eum eaque quod perspiciatis commodi perferendis tempora assumenda omnis laboriosam ex deleniti.</div>
<div>Pariatur vel a porro optio dolore aliquam odio. Quibusdam voluptatibus nobis minima adipisci enim facilis asperiores deserunt laboriosam officia temporibus quis beatae obcaecati quisquam! Harum earum autem maxime ea cupiditate!</div>
<div>In facere dignissimos ducimus maxime pariatur possimus sunt. Suscipit adipisci necessitatibus omnis maiores voluptatum magnam corporis ea nulla quibusdam nemo cumque laborum id blanditiis laudantium dolorem accusantium recusandae distinctio quam.</div>
<div>Id molestias exercitationem saepe ipsam iure quae quidem incidunt. Vero est iusto asperiores quis dolorem omnis expedita qui repellat illo voluptatem aliquam a voluptatum nobis saepe eius et adipisci? Dolorem!</div>
<div>Accusantium eius esse dignissimos doloremque nemo assumenda iusto nostrum excepturi nihil facere mollitia aperiam eum harum quod nobis illo a adipisci eaque fugiat distinctio. Provident molestias doloribus alias ipsam voluptatum.</div>
<div>Accusamus molestiae voluptas deleniti vitae rerum delectus provident molestias temporibus atque iusto nostrum ullam incidunt saepe. Quia illo perferendis mollitia ut eum fugiat magnam officia tenetur doloremque quo pariatur ullam.</div>
  <h1 id="cheese">Cheese</h1>
  <div>Eligendi nobis nulla dolorem neque modi odio temporibus porro unde earum doloremque provident quasi ullam fugiat asperiores cupiditate veniam blanditiis inventore omnis quisquam a nam! Culpa ad dolore nostrum numquam?</div>
<div>Ea quos at assumenda tempore eveniet nesciunt repellat blanditiis necessitatibus! Nulla explicabo rerum numquam asperiores repellat ipsam necessitatibus reiciendis suscipit perferendis repudiandae laboriosam vel consectetur nesciunt aperiam esse quia inventore.</div>
<div>Officiis dolore quia ea tenetur odio nesciunt doloribus nemo velit ipsam optio nisi veniam obcaecati autem repudiandae maiores. Saepe modi voluptatum consectetur nam fuga voluptate tempora aliquid iusto provident magnam!</div>
<div>Fugit tempora illum excepturi a consectetur nesciunt temporibus! Laudantium eaque eveniet assumenda. Vero debitis odio pariatur ea eum qui voluptates voluptatem eos obcaecati maiores illum accusamus distinctio itaque porro ducimus!</div>

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus beatae architecto ipsam itaque libero similique quos odit inventore blanditiis perferendis voluptas accusamus aperiam ab amet quo quisquam cupiditate corrupti laboriosam!</div>
<div>Deleniti fugit ipsa modi animi sunt deserunt quasi facilis eaque culpa dolor. Ea deserunt minus nihil error quisquam expedita maxime perferendis doloribus ipsam vel quis veniam quo quas tempora quae.</div>
<div>Aut beatae labore vel cupiditate minima itaque aspernatur minus sed rem optio eius natus ducimus quae reiciendis soluta eveniet consequatur totam iusto in suscipit velit laboriosam accusantium illo! Earum voluptatem!</div>
<div>Atque animi molestias officiis tenetur quam asperiores a ullam perspiciatis laboriosam sequi rem quasi possimus omnis eaque perferendis! Eum eaque quod perspiciatis commodi perferendis tempora assumenda omnis laboriosam ex deleniti.</div>
<div>Pariatur vel a porro optio dolore aliquam odio. Quibusdam voluptatibus nobis minima adipisci enim facilis asperiores deserunt laboriosam officia temporibus quis beatae obcaecati quisquam! Harum earum autem maxime ea cupiditate!</div>
<div>In facere dignissimos ducimus maxime pariatur possimus sunt. Suscipit adipisci necessitatibus omnis maiores voluptatum magnam corporis ea nulla quibusdam nemo cumque laborum id blanditiis laudantium dolorem accusantium recusandae distinctio quam.</div>
<div>Id molestias exercitationem saepe ipsam iure quae quidem incidunt. Vero est iusto asperiores quis dolorem omnis expedita qui repellat illo voluptatem aliquam a voluptatum nobis saepe eius et adipisci? Dolorem!</div>
<div>Accusantium eius esse dignissimos doloremque nemo assumenda iusto nostrum excepturi nihil facere mollitia aperiam eum harum quod nobis illo a adipisci eaque fugiat distinctio. Provident molestias doloribus alias ipsam voluptatum.</div>
<div>Accusamus molestiae voluptas deleniti vitae rerum delectus provident molestias temporibus atque iusto nostrum ullam incidunt saepe. Quia illo perferendis mollitia ut eum fugiat magnam officia tenetur doloremque quo pariatur ullam.</div>
  <h1 id="fin">FIN</h1>
  
 
  
 
</div>
</div>
html,body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family:arial;

}
#rightbar {
  width:50%;
  height:100%;
  float:right;

}

#leftbar {
  width:45%;
  float:left;
  margin-left:5%;
}
#kitty1 {
  width: 100%;
 background: no-repeat;
  background-size: 100%;
  height:500px;
  position:fixed;
    margin-top: 10%;
  padding:10%;


}
var s = skrollr.init();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/skrollr.min.js