Permalink
Browse files

added example of "classic" parallax image sections

  • Loading branch information...
1 parent f33acab commit 7b47f903986eaa2ef95301c8cda706323ed0faf5 @Prinzhorn committed Jun 15, 2014
Showing with 81 additions and 32 deletions.
  1. +81 −32 examples/classic.html
View
113 examples/classic.html
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html>
+<html class="no-skrollr">
<head>
<meta charset="utf-8">
@@ -23,48 +23,92 @@
body {
font-family:sans-serif;
- background:green;
+ }
+
+ p {
+ margin:1em 0;
}
.parallax-image-wrapper {
position:fixed;
- top:-50%;
left:0;
width:100%;
- height:50%;
overflow:hidden;
}
+ .parallax-image-wrapper-50 {
+ height:50%;
+ top:-50%;
+ }
+
+ .parallax-image-wrapper-100 {
+ height:100%;
+ top:-100%;
+ }
+
.parallax-image {
display:none;
position:absolute;
bottom:0;
left:0;
width:100%;
- height:300%;
background-repeat:no-repeat;
background-position:center;
background-size:cover;
}
+ .parallax-image-50 {
+ height:200%;
+ top:-50%;
+ }
+
+ .parallax-image-100 {
+ height:100%;
+ top:0;
+ }
+
.parallax-image.skrollable-between {
display:block;
}
+ .no-skrollr .parallax-image-wrapper {
+ display:none !important;
+ }
+
#skrollr-body {
height:100%;
overflow:visible;
position:relative;
}
.gap {
+ background:transparent center no-repeat;
+ background-size:cover;
+ }
+
+ .skrollr .gap {
+ background:transparent !important;
+ }
+
+ .gap-50 {
height:50%;
}
- .content {
+ .gap-100 {
+ height:100%;
+ }
+
+ .header, .content {
background:#fff;
padding:1em;
- height:50%;
+
+ -webkit-box-sizing:border-box;
+ -moz-box-sizing:border-box;
+ box-sizing:border-box;
+ }
+
+ .content-full {
+ height:100%;
}
#done {
@@ -76,77 +120,82 @@
<body>
<!--
We position the images fixed and therefore need to place them outside of #skrollr-body.
- We will then use data-anchor-target to display the correct image matching the current section.
+ We will then use data-anchor-target to display the correct image matching the current section (.gap element).
-->
<div
- class="parallax-image-wrapper"
+ class="parallax-image-wrapper parallax-image-wrapper-100"
data-anchor-target="#dragons + .gap"
- data-bottom-top="transform:translate3d(0px, 300%, 0px)"
+ data-bottom-top="transform:translate3d(0px, 200%, 0px)"
data-top-bottom="transform:translate3d(0px, 0%, 0px)">
<div
- class="parallax-image"
+ class="parallax-image parallax-image-100"
style="background-image:url(images/kitteh1.jpg)"
data-anchor-target="#dragons + .gap"
- data-bottom-top="transform: translate3d(0px, 0%, 0px);"
- data-top-bottom="transform: translate3d(0px, 66.66%, 0px);"
+ data-bottom-top="transform: translate3d(0px, -80%, 0px);"
+ data-top-bottom="transform: translate3d(0px, 80%, 0px);"
></div>
+ <!--the +/-80% translation can be adjusted to control the speed difference of the image-->
</div>
<div
- class="parallax-image-wrapper"
+ class="parallax-image-wrapper parallax-image-wrapper-100"
data-anchor-target="#bacons + .gap"
- data-bottom-top="transform:translate3d(0px, 300%, 0px)"
+ data-bottom-top="transform:translate3d(0px, 200%, 0px)"
data-top-bottom="transform:translate3d(0px, 0%, 0px)">
<div
- class="parallax-image"
+ class="parallax-image parallax-image-100"
style="background-image:url(images/kitteh2.jpg)"
data-anchor-target="#bacons + .gap"
- data-bottom-top="transform: translate3d(0px, 0%, 0px);"
- data-top-bottom="transform: translate3d(0px, 66.66%, 0px);"
+ data-bottom-top="transform: translate3d(0px, -80%, 0px);"
+ data-top-bottom="transform: translate3d(0px, 80%, 0px);"
></div>
</div>
<div
- class="parallax-image-wrapper"
+ class="parallax-image-wrapper parallax-image-wrapper-50"
data-anchor-target="#kittens + .gap"
data-bottom-top="transform:translate3d(0px, 300%, 0px)"
data-top-bottom="transform:translate3d(0px, 0%, 0px)">
<div
- class="parallax-image"
+ class="parallax-image parallax-image-50"
style="background-image:url(images/kitteh3.jpg)"
data-anchor-target="#kittens + .gap"
- data-bottom-top="transform: translate3d(0px, 0%, 0px);"
- data-top-bottom="transform: translate3d(0px, 66.66%, 0px);"
+ data-bottom-top="transform: translate3d(0px, -60%, 0px);"
+ data-top-bottom="transform: translate3d(0px, 60%, 0px);"
></div>
</div>
<div id="skrollr-body">
- <div class="content" id="dragons">
- Here be dragons
+ <div class="header" id="dragons">
+ Skrollr demo of classic parallax sections. Degrades without JavaScript (could be disabled on mobile without breaking everything).
</div>
- <div class="gap"></div>
+ <div class="gap gap-100" style="background-image:url(images/kitteh1.jpg);"></div>
<div class="content" id="bacons">
- Here be bacons
+ <p>Landjaeger chicken ham fatback sausage hamburger, tri-tip capicola pastrami pancetta ribeye turducken. Rump shank turkey pig kevin sausage meatloaf tenderloin drumstick short ribs short loin. Prosciutto spare ribs chuck, pork strip steak pork chop swine bacon turkey shoulder andouille. Jowl landjaeger chicken corned beef. Ham hock kielbasa pancetta ground round sausage. Spare ribs porchetta pastrami filet mignon drumstick ball tip. Beef ribs prosciutto kevin, landjaeger shoulder ham hock ham brisket sirloin chuck t-bone drumstick kielbasa pork chop.</p>
+
+ <p>Landjaeger spare ribs chicken ball tip, filet mignon frankfurter ribeye tenderloin corned beef. Strip steak boudin pork loin, chicken turkey ball tip beef ribs ground round shank ham hock. Kevin capicola beef, chuck pork chop shoulder brisket doner meatloaf shank ham hock tenderloin. Chuck ham hock short ribs ground round sausage prosciutto shoulder bacon andouille tri-tip beef biltong filet mignon chicken. Pork belly andouille shank, bacon sausage meatloaf bresaola pork chop short ribs t-bone. Ham hock salami porchetta bacon beef turkey, strip steak kielbasa pancetta brisket meatball t-bone.</p>
+
+ <p>Chicken pancetta capicola chuck, turkey meatball jerky frankfurter kielbasa ball tip bacon ground round. Beef ribs brisket meatloaf short ribs landjaeger shankle spare ribs sausage, pancetta swine sirloin flank. Tail shank chuck pancetta, ham meatloaf short ribs sausage rump turkey kevin pork chop landjaeger. Doner boudin short ribs t-bone, jerky shankle bresaola drumstick. Strip steak shank spare ribs boudin doner short ribs. Boudin prosciutto jowl tenderloin tongue beef ribs, short ribs salami short loin strip steak ham jerky. Shank pancetta beef ribs, corned beef ham hock pork belly drumstick tail bresaola chuck.</p>
</div>
- <div class="gap"></div>
- <div class="content" id="kittens">
+ <div class="gap gap-100" style="background-image:url(images/kitteh2.jpg);"></div>
+ <div class="content content-full" id="kittens">
Here be kittens
</div>
- <div class="gap"></div>
+ <div class="gap gap-50" style="background-image:url(images/kitteh3.jpg);"></div>
<div class="content" id="done">
- Here be done
+ Images from <a href="http://placekitten.com/attribution.html">http://placekitten.com/</a>, thanks!
</div>
</div>
<script type="text/javascript" src="../dist/skrollr.min.js"></script>
<script type="text/javascript">
skrollr.init({
- //forceHeight: false,
- smoothScrolling: false
+ smoothScrolling: false,
+ mobileDeceleration: 0.004
});
</script>
</body>

0 comments on commit 7b47f90

Please sign in to comment.