<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class='full-bk clear'>
<div class='widget-frame'>
<div class='actions'>
<span><img src='https://static.tumblr.com/e1u6zhi/2DWndtb83/list.png'></span>
<a href='#'>Save</a>
</div>
<div class='img-bk active' data-img='step0'></div>
<div class='img-bk' data-img='step1'></div>
<div class='img-bk' data-img='step2'></div>
<div class='img-bk' data-img='step3'></div>
<div class='img-bk' data-img='step4'></div>
<div class='time-wrap'>
<div><span class='time'>30</span><span class='meta'>min</span></div>
</div>
<div class='right clear'>
<section class='title-meta' data-step='step0' data-time="30">
<h2>Maple Pecan Pancakes</h2>
<img class='stars' src='https://static.tumblr.com/e1u6zhi/7gDndrvtx/star-star-star-star-star.png' height='16px'>
</section>
<div class='ingredients'>
<ul >
<li>2 cups all-purpose flour</li>
<li>2 teaspoons baking powder</li>
<li>¼ teaspoon salt</li>
<li>1 tablespoon sugar, optional</li>
<li>2 eggs</li>
<li>1 ½ to 2 cups milk</li>
<li>2 tablespoons butter </li>
</ul>
</div>
<div class='steps short' >
<p>
Instead of using only wheat flour in these pancakes, I’ve combined whole-wheat flour and almond flour. The almond flour makes for a very moist and delicate pancake. Almond flour is high in vitamin E, calcium, magnesium and copper.</p>
</div>
<section class='steps' data-step='step1' data-time="5">
<h3>Step 1</h3>
<p>
Instead of using only wheat flour in these pancakes, I’ve combined whole-wheat flour and almond flour. The almond flour makes for a very moist and delicate pancake. Almond flour is high in vitamin E, calcium, magnesium and copper.</p>
</section>
<section class='steps' data-step='step2' data-time="8">
<h3>Step 2</h3>
<p>Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum.</p></section>
<section class='steps' data-step='step3' data-time="10">
<h3>Step 3</h3>
<p>Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum.</p></section>
<section class='steps' data-step='step4' data-time="5">
<h3>Step 4</h3>
<p>Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum.</p>
<p>
Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor.
</p>
</section>
<div class='directions'></div>
</div>
</div>
</div>
.clear:before {
content: '';
display: table;
}
.clear:after {
content: '';
display: table;
clear: both;
}
h2 {
font-family: "ff-tisa-web-pro";
font-weight: 500;
font-size: 32px;
line-height: 38px;
margin: 0;
}
p, section {
margin-top: 0px;
line-height: 22px;
margin-bottom: 20px;
}
.full-bk {
position: fixed;
font-family: "futura-pt", sans-serif;
background-color: #333;
overflow: hidden;
background-image: url("https://static.tumblr.com/e1u6zhi/deSndteg1/bk-image.jpg");
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
background-size: cover;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
.img-bk {
-webkit-transition: z-index 0ms 0ms ease-in, opacity 250ms 50ms ease-in-out;
-moz-transition: z-index 0ms 0ms ease-in, opacity 250ms 50ms ease-in-out;
-ms-transition: z-index 0ms 0ms ease-in, opacity 250ms 50ms ease-in-out;
-o-transition: z-index 0ms 0ms ease-in, opacity 250ms 50ms ease-in-out;
transition: z-index 0ms 0ms ease-in, opacity 250ms 50ms ease-in-out;
overflow: hidden;
background-color: white;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
background-size: cover;
opacity: 0;
filter: alpha(opacity=0);
z-index: 0;
}
.img-bk.active {
opacity: 1;
filter: alpha(opacity=100);
z-index: 1;
}
.img-bk[data-img='step0'] {
background-image: url("https://static.tumblr.com/e1u6zhi/ok6ndruvt/layer-3.png");
}
.img-bk[data-img='step1'] {
background-image: url("http://pad2.whstatic.com/images/thumb/1/1e/Make-Buttermilk-Pancakes-Step-1.jpg/670px-Make-Buttermilk-Pancakes-Step-1.jpg");
}
.img-bk[data-img='step2'] {
background-image: url("https://static.tumblr.com/e1u6zhi/1iZndsow4/layer-4.png");
}
.img-bk[data-img='step3'] {
background-image: url("http://pad3.whstatic.com/images/thumb/d/d1/Make-Buttermilk-Pancakes-Step-3.jpg/670px-Make-Buttermilk-Pancakes-Step-3.jpg");
}
.img-bk[data-img='step4'] {
background-image: url("http://pad2.whstatic.com/images/thumb/6/66/Make-Buttermilk-Pancakes-Step-4.jpg/670px-Make-Buttermilk-Pancakes-Step-4.jpg");
}
.widget-frame {
overflow: hidden;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
width: 620px;
height: 500px;
margin: 12% auto;
position: relative;
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
background-size: cover;
/*background-image:url('https://static.tumblr.com/e1u6zhi/ok6ndruvt/layer-3.png');*/
}
.widget-frame .actions {
z-index: 9999;
position: absolute;
bottom: 30px;
left: 30px;
width: auto;
padding: 0px 10px;
}
.widget-frame .actions span {
cursor: pointer;
-webkit-transition: all 200ms 0ms ease-in-out;
-moz-transition: all 200ms 0ms ease-in-out;
-ms-transition: all 200ms 0ms ease-in-out;
-o-transition: all 200ms 0ms ease-in-out;
transition: all 200ms 0ms ease-in-out;
margin: 0px;
padding: 8px 10px;
display: inline-block;
-webkit-border-radius: 4px 0px 0px 4px;
-moz-border-radius: 4px 0px 0px 4px;
border-radius: 4px 0px 0px 4px;
background-color: #007dc3;
}
.widget-frame .actions span img {
vertical-align: -6%;
}
.widget-frame .actions span:hover {
background-color: #005c90;
}
.widget-frame .actions a {
-webkit-transition: all 200ms 0ms ease-in-out;
-moz-transition: all 200ms 0ms ease-in-out;
-ms-transition: all 200ms 0ms ease-in-out;
-o-transition: all 200ms 0ms ease-in-out;
transition: all 200ms 0ms ease-in-out;
-webkit-border-radius: 0px 4px 4px 0px;
-moz-border-radius: 0px 4px 4px 0px;
border-radius: 0px 4px 4px 0px;
background-color: #007dc3;
padding: 8px 10px;
display: inline-block;
margin: 0px 0px 0px -4px;
color: white;
font-family: "futura-pt", sans-serif;
font-weight: 400;
text-decoration: none;
border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.widget-frame .actions a:hover {
background-color: #005c90;
}
.widget-frame .right {
background-color: white;
-webkit-border-radius: 0 6px 6px 0;
-moz-border-radius: 0 6px 6px 0;
border-radius: 0 6px 6px 0;
position: relative;
width: 50%;
left: 50%;
z-index: 10;
top: 0;
bottom: 0;
height: 100%;
overflow: scroll;
}
.widget-frame .title-meta {
padding: 20px 0px 0px 35px;
}
.widget-frame .title-meta .stars {
margin-top: 15px;
}
.widget-frame .time-wrap {
top: 120px;
position: absolute;
background: white;
width: 70px;
height: 70px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
text-align: center;
display: table;
left: 50%;
margin-left: -35px;
z-index: 9999;
-webkit-transition: all 200ms 0ms ease-in-out;
-moz-transition: all 200ms 0ms ease-in-out;
-ms-transition: all 200ms 0ms ease-in-out;
-o-transition: all 200ms 0ms ease-in-out;
transition: all 200ms 0ms ease-in-out;
}
.widget-frame .time-wrap.running {
top: 15px;
}
.widget-frame .time-wrap > div {
display: table-cell;
vertical-align: middle;
font-size: 28px;
margin-top: 10px;
-webkit-transition: all 200ms 0ms ease-in-out;
-moz-transition: all 200ms 0ms ease-in-out;
-ms-transition: all 200ms 0ms ease-in-out;
-o-transition: all 200ms 0ms ease-in-out;
transition: all 200ms 0ms ease-in-out;
}
.widget-frame .time-wrap > div .time {
-webkit-transition: all 200ms 0ms ease-in-out;
-moz-transition: all 200ms 0ms ease-in-out;
-ms-transition: all 200ms 0ms ease-in-out;
-o-transition: all 200ms 0ms ease-in-out;
transition: all 200ms 0ms ease-in-out;
}
.widget-frame .time-wrap > div .meta {
display: block;
width: 100%;
text-transform: uppercase;
font-size: 13px;
}
.widget-frame .ingredients {
background-color: white;
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
margin: 15px 35px 0px;
}
.widget-frame .ingredients.fixed {
/* position:absolute;
width:245px;
top:35px;
*/
}
.widget-frame .ingredients ul {
margin: 0px;
padding: 15px 0px;
}
.widget-frame .ingredients ul li {
list-style: none;
padding: 0px;
margin: 0px;
text-indent: 0px;
font-family: "futura-pt", sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 22px;
}
.widget-frame .steps {
padding: 15px 35px 0;
margin-bottom: 100px;
text-indent: 0px;
font-family: "futura-pt", sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 22px;
/* display:flex; */
/* flex-direction: row; */
/* align-items: stretch; */
height: 75%;
}
.widget-frame .steps.short {
height: auto;
}
.widget-frame .steps.active {
margin-top: 0px;
}
.widget-frame .steps p {
display: block;
padding: 0px;
}
.widget-frame .steps h3 {
border-bottom: 1px solid #eee;
font-family: "ff-tisa-web-pro";
display: block;
width: 100%;
font-size: 18px;
margin: 0px 0px 10px;
padding-bottom: 10px;
}
var foodWidget = {
init:function(){
$('.right').panelSnap({
panelSelector: 'section',
onSnapStart: function($target){foodWidget.moveTime($target);},
onSnapFinish: function($target){foodWidget.AddImage($target);},
directionThreshold: 50,
slideSpeed: 500,
keyboardNavigation: {
enabled: true,
nextPanelKey: 40,
previousPanelKey: 38,
wrapAround: false
}
});
},
AddImage:function(el){
var self = $(el),
step = self.attr('data-step');
$('.img-bk').each(function(){
if($(this).attr('data-img') === step){
$(this).addClass('active');
}else{
$(this).removeClass('active');
}
})
},
moveTime:function(el){
var self = $(el),
stepTime = self.attr('data-time');
$('.time').text(stepTime);
if(el.selector === '> section:eq(0)'){
$('.time-wrap').removeClass('running');
}else{
$('.time-wrap').addClass('running');
}
console.log(el);
}
};
foodWidget.init();
$.fn.waypoint.defaults = {
context: '.right',
continuous: true,
enabled: true,
horizontal: false,
offset: 0,
triggerOnce: false
}
/* $('.ingredients').waypoint(function(direction) {
$(this).toggleClass('fixed');
$('.right').toggleClass('fixed');
});*/
