Skip to content

Instantly share code, notes, and snippets.

@jbottigliero

jbottigliero/layers.html

Last active December 18, 2015 19:49
Show Gist options
  • Save jbottigliero/5836148 to your computer and use it in GitHub Desktop.
Save jbottigliero/5836148 to your computer and use it in GitHub Desktop.
Download ZIP
layers prototype of concept based on forcast.io ui
Raw
layers.html
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>layers</title>
<style>
body {
font-family: sans-serif;
color: black;
}
div {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
}
.layer, .panel {
-webkit-transition: -webkit-transform 350ms ease-out;
transition: transform 350ms ease-out;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
/* a layer starts a new stacking context */
.layer {
z-index: 3001;
}
/* the first child is the basement for the layer */
.panel:first-child {}
.panel *:first-child {
margin-top: 90;
}
.panel *:last-child {
margin-bottom: 90;
}
body .panel:nth-child(1) {
background: #ccc;
}
body .panel:nth-child(2) {
background: #ddd;
}
body .panel:nth-child(3) {
background: #eee;
}
</style>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
</head>
<body>
<div class="layer">
<div class="panel">
<h3>l1:p1</h3>
<p>this is literally the basement of this application.</p>
<p>Etiam facilisis bibendum nulla quis porta. Aliquam porttitor pretium iaculis. Maecenas rutrum velit eget metus sodales congue. Etiam tristique in libero sed pharetra. Etiam urna urna, interdum sed est sed, feugiat vulputate turpis. Sed auctor justo leo, eu sollicitudin quam lobortis accumsan. Sed sed mi consectetur, scelerisque nisl quis, suscipit mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</div>
<div class="layer">
<div class="panel">
<h3>l2:p1</h3>
<p>layer two, panel one, nice.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquet diam mi, eget porttitor urna condimentum aliquam. Etiam dictum malesuada massa, ut feugiat tellus facilisis id. Pellentesque sit amet rutrum arcu, ut dapibus ante. Nulla elementum, sem ac adipiscing malesuada, felis urna dictum lacus, sed tristique sem massa vitae velit. Fusce non risus eros. Aenean tempor sollicitudin lectus nec porttitor. Donec vitae metus sem. Duis eros tellus, posuere eu suscipit id, tempor ut tellus. Mauris condimentum lorem ac ligula convallis, sed consectetur diam faucibus. Nunc consectetur dictum libero tincidunt dictum. Suspendisse id adipiscing eros. Etiam ut elit imperdiet, semper elit eget, sodales eros. Suspendisse purus lorem, malesuada eget egestas sodales, ultrices a nisi. Maecenas vehicula pellentesque odio at hendrerit. Nullam tristique sollicitudin risus eget consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquet diam mi, eget porttitor urna condimentum aliquam. Etiam dictum malesuada massa, ut feugiat tellus facilisis id. Pellentesque sit amet rutrum arcu, ut dapibus ante. Nulla elementum, sem ac adipiscing malesuada, felis urna dictum lacus, sed tristique sem massa vitae velit. Fusce non risus eros. Aenean tempor sollicitudin lectus nec porttitor. Donec vitae metus sem. Duis eros tellus, posuere eu suscipit id, tempor ut tellus. Mauris condimentum lorem ac ligula convallis, sed consectetur diam faucibus. Nunc consectetur dictum libero tincidunt dictum. Suspendisse id adipiscing eros. Etiam ut elit imperdiet, semper elit eget, sodales eros. Suspendisse purus lorem, malesuada eget egestas sodales, ultrices a nisi. Maecenas vehicula pellentesque odio at hendrerit. Nullam tristique sollicitudin risus eget consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquet diam mi, eget porttitor urna condimentum aliquam. Etiam dictum malesuada massa, ut feugiat tellus facilisis id. Pellentesque sit amet rutrum arcu, ut dapibus ante. Nulla elementum, sem ac adipiscing malesuada, felis urna dictum lacus, sed tristique sem massa vitae velit. Fusce non risus eros. Aenean tempor sollicitudin lectus nec porttitor. Donec vitae metus sem. Duis eros tellus, posuere eu suscipit id, tempor ut tellus. Mauris condimentum lorem ac ligula convallis, sed consectetur diam faucibus. Nunc consectetur dictum libero tincidunt dictum. Suspendisse id adipiscing eros. Etiam ut elit imperdiet, semper elit eget, sodales eros. Suspendisse purus lorem, malesuada eget egestas sodales, ultrices a nisi. Maecenas vehicula pellentesque odio at hendrerit. Nullam tristique sollicitudin risus eget consequat.</p>
</div>
<div class="panel">
<button class="revealer" data-reveal="layer" data-reveal-direction="down">Show Lower Layer</button>
<h3>l2:p2</h3>
<p>highest pane</p>
<p>Vestibulum viverra est tempor lectus lacinia pulvinar. Aliquam in sodales lacus. In eu tincidunt massa. Sed semper lacus id libero vestibulum tempus. Maecenas vitae enim et justo pharetra viverra at ac mi. Praesent at nulla nisi. Praesent placerat magna id dictum adipiscing. Cras rutrum facilisis purus a tempor.</p>
<button class="revealer" data-reveal="panel" data-reveal-direction="up">Show Lower Panel</button>
</div>
<div class="panel">
<h3>l2:p3</h3>
<p>highest pane</p>
<p>Vestibulum viverra est tempor lectus lacinia pulvinar. Aliquam in sodales lacus. In eu tincidunt massa. Sed semper lacus id libero vestibulum tempus. Maecenas vitae enim et justo pharetra viverra at ac mi. Praesent at nulla nisi. Praesent placerat magna id dictum adipiscing. Cras rutrum facilisis purus a tempor.</p>
<button class="revealer" data-reveal="panel" data-reveal-direction="down">Show Lower Panel</button>
</div>
</div>
</div>
<script>
(function(){
var tab = 60,
height = $('body').height() - tab;
$('.revealer').on('click', function(e) {
var $this = $(this),
reveal = ( $this.attr('data-reveal') || 'layer' ),
direction = $this.attr('data-reveal-direction') || 'down',
$revealee = $( $this.parents('.' + reveal).first() ) || false,
y = direction === 'up' ? -Math.abs(height) : Math.abs(height);
if (!$revealee.length) return;
e.stopPropagation();
$revealee
.css({
'-webkit-transform' : 'translate3d(0, 90%, 0)',
'transform' : 'translate3d(0, 90%, 0)'
})
.one('click', function(e){
console.log($revealee);
$revealee
.css({
'-webkit-transform' : 'translate3d(0, 0, 0)',
'transform' : 'translate3d(0, 0, 0)'
})
});
});
}());
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment