I have this fiddle http://jsfiddle.net/azzy588u/12/# I need the scrolling "pause" you see in the 2nd synth, but I want to have the parallax effect that the position is fixed and the image scrolls fixed like in this website: https://ihatetomatoes.net/demos/simple-parallax-scrolling-tutorial/, so i want that effect with the divs.
I am using skrollr.js
<div id="slides-container">
<div id="slides" data-0="transform:translate(0%,0%);" data-150p="transform:translate(0%,-50%);" data-200p="" data-350p="transform:translate(0%,-100%);" data-450p="" data-550p="transform:translate(0%,-150%);">
<div id="slide-1" class="slide">
<div class="caption" data-40p="opacity: 1; transform:translate(0px,0px);" data-70p="opacity: 0; transform:translate(0px,-100%);" data-anchor-target="#helper">
<h1>Image 1 Title</h1>
<p>Image description goes here.</p>
</div>
</div>
<div id="slide-2" class="slide">
<div class="caption" data-130p="opacity: 0; transform:translate(0px,-200%);" data-180p="opacity: 1; transform:translate(0px,0px);" data-250p="" data-280p="opacity: 0; transform:translate(-100px,0px);" data-anchor-target="#helper">
<h1>Image 2 Title</h1>
<p>Image description goes here.</p>
</div>
</div>
<div id="slide-3" class="slide">
<div class="caption" data-250p="opacity: 0; transform:translate(300px,0px);" data-300p="opacity: 1; transform:translate(0px,0px);" data-anchor-target="#helper">
<h1>Image 3 Title</h1>
<p>Image description goes here.</p>
</div>
</div>
<div id="slide-4" class="slide">
<div class="caption" data-430p="opacity: 0;" data-450p="opacity: 1;" data-anchor-target="#helper">
<h1>Image 4 Title</h1>
<p>Image description goes here.</p>
</div>
</div>
</div>
</div>
<div id="helper">
<div class="marker red"></div>
<div class="marker green"></div>
<div class="marker blue"></div>
<div class="marker yellow"></div>
</div>
And my css is:
#slides-container {
width: 100%;
height: 100%;
overflow: hidden;
}
/* double the height/width of a viewport */
#slides {
width: 200%;
height: 200%;
position: fixed;
top: 0;
left: 0;
}
.slide {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
#slide-1 {
background: url('../img/synth-bg-1.png') no-repeat center center;
background-size: cover;
background-attachment: fixed;
}
#slide-2 {
background: url('../img/synth-bg-2.png') no-repeat center center;
background-size: cover;
background-attachment: fixed;
-webkit-transform: translate(0,100%);
-ms-transform: translate(0,100%);
transform: translate(0,100%);
}
#slide-3 {
background: url('../img/synth-bg-3.png') no-repeat center center;
background-size: cover;
background-attachment: fixed;
-webkit-transform: translate(0%,200%);
-ms-transform: translate(0%,200%);
transform: translate(00%,200%);
}
#slide-3 .caption {
left: 5%;
right: auto;
color: #47373f;
}
#slide-4 {
background: url('../img/synth-bg-4.png') no-repeat center center;
background-size: cover;
background-attachment: fixed;
-webkit-transform: translate(0%,300%);
-ms-transform: translate(0%,300%);
transform: translate(0%,300%);
}
#slide-4 .caption {
right: auto;
left: 5%;
top: 5%;
bottom: auto;
color: #47373f;
}
You must be learn more about skrollr plugin. This plugin is patern based. You can check when your element (number patern) stop.
UPDATE
Please try: http://jsfiddle.net/jteh4u6j/3/ or snippet below.
var s = skrollr.init(); ==========================================================================
Chrome Frame prompt
========================================================================== */
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
html, body {
width:100%;
height:100%;
}
.caption {
position: absolute;
bottom: 5%;
right: 5%;
text-align: right;
color: #fff;
}
p, h1 { margin: 0; }
h1 { margin-bottom: 0.2em; }
p { line-height: 1.333em; }
/* full width/height container */
#slides-container {
width: 100%;
height: 100%;
overflow: hidden;
}
/* double the height/width of a viewport */
#slides {
width: 200%;
height: 200%;
position: fixed;
bottom: 0;
left: 0;
}
.slide {
position:fixed;
bottom:0;
left:0;
width:100%;
height:100%;
}
#slide-1 {
background: url('http://i.imgur.com/7aWoXGR.png') no-repeat center center;
background-size: cover;
background-attachment: fixed;
}
#slide-2 {
background: url('http://i.imgur.com/GkPXSPP.png') no-repeat center center;
background-size: cover;
background-attachment: fixed;
height:0%;
}
#slide-3 {
background: url('http://i.imgur.com/EQabH21.png') no-repeat center center;
background-size: cover;
background-attachment: fixed;
height:0%;
}
#slide-3 .caption {
left: 5%;
right: auto;
color: #47373f;
}
#slide-4 {
height:0%;
background: url('http://i.imgur.com/GWz6iqB.png') no-repeat center center;
background-size: cover;
background-attachment: fixed;
}
#slide-4 .caption {
right: auto;
left: 5%;
top: 5%;
bottom: auto;
color: #47373f;
}
#helper {
position:absolute;
left:0;
top: 0;
height:600%;
width: 0;
}
.marker {
height: 25%;
width: 100%;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
/* =Caption style */
.caption {
text-align: right;
}
#slide-3 .caption,
#slide-4 .caption {
text-align: left;
}
}
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links for images, or javascript/internal links
*/
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
/*
Ok so you have made it this far, that means you are very keen to on my code.
Anyway I don't really mind it. This is a great way to learn so you actually doing the right thing:)
Follow me @ihatetomatoes
*/<script src="http://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.27/skrollr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<!-- Demo content -->
<div id="page-content">
<div id="slides-container">
<div id="slides" data-0="transform:translate(0%,0%);" data-1500="transform:translate(0%,0%);">
<div id="slide-1" class="slide"
data-0="transform:translate(0%,0%);" data-1500="transform:translate(0%,0%);">
</div>
<div id="slide-2" class="slide"
data-0="height: 0%" data-500="height: 100%">
</div>
<div id="slide-3" class="slide"
data-500="height: 0%" data-900="height: 100%">
</div>
<div id="slide-4" class="slide"
data-900="height: 0%" data-1200="height: 100%">
</div>
</div>
</div>
<div id="helper">
<div class="marker red"></div>
<div class="marker green"></div>
<div class="marker blue"></div>
<div class="marker yellow"></div>
</div>
</div>
<!-- /Demo content -->
<!-- Include Skrollr.js -->
</body>