<div class="demo-content" id="content">
<nav class="navigation">
<a id="open" href="#"><span class="ion ion-navicon"></span></a>
</nav>
<div class="inner-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa labore, nesciunt tenetur. Iure quae quisquam a architecto facilis, expedita voluptas impedit repellat et eum hic, itaque, ut quas neque tempore?</p>
<figure>
<img src="http://placehold.it/450x300" alt="" />
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa labore, nesciunt tenetur. Iure quae quisquam a architecto facilis, expedita voluptas impedit repellat et eum hic, itaque, ut quas neque tempore?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa labore, nesciunt tenetur. Iure quae quisquam a architecto facilis, expedita voluptas impedit repellat et eum hic, itaque, ut quas neque tempore?</p>
</div>
</div>
<div id="offcanvas">
<a href="#" id="close" class="ion ion-close"></a>
<div id="about" class="widget">
<h3>About Me</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, non unde eveniet. Molestiae at nisi facilis, sed excepturi fugiat reiciendis earum, id tempora quis doloribus quod, omnis eveniet architecto animi.</p>
</div>
<div id="images" class="widget image">
<h3>Images</h3>
<ul>
<li><img src="http://lorempixel.com/50/50/cats/1/" alt="" /></li>
<li><img src="http://lorempixel.com/50/50/cats/2/" alt="" /></li>
<li><img src="http://lorempixel.com/50/50/cats/3/" alt="" /></li>
<li><img src="http://lorempixel.com/50/50/cats/4/" alt="" /></li>
<li><img src="http://lorempixel.com/50/50/cats/5/" alt="" /></li>
<li><img src="http://lorempixel.com/50/50/cats/6/" alt="" /></li>
<li><img src="http://lorempixel.com/50/50/cats/7/" alt="" /></li>
<li><img src="http://lorempixel.com/50/50/cats/8/" alt="" /></li>
</ul>
</div>
<div id="follow" class="widget follow">
<h3>Follow</h3>
<ul>
<li><a href="#" class="ion ion-social-facebook">Facebook</a></li>
<li><a href="#" class="ion ion-social-twitter">Twitter</a></li>
<li><a href="#" class="ion ion-social-instagram">Instagram</a></li>
<li><a href="#" class="ion ion-social-dribbble-outline">Dribbble</a></li>
<li><a href="#" class="ion ion-social-github">Github</a></li>
</ul>
</div>
</div>
<span id="pointer" class="ion ion-arrow-left-c">Click Here</div>
body {
background-color: #F5F7FA;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/**
* 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 are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
.navigation {
font-family: "Roboto", Arial, sans-serif;
font-size: 12px;
text-transform: uppercase;
padding: 10px 20px;
background-color: #fff;
}
.navigation a {
text-decoration: none;
color: #434A54;
font-weight: 500;
}
.navigation .ion {
font-size: 32px;
}
.inner-content {
padding: 10px 20px;
font-size: 14px;
line-height: 1.6;
font-weight: 500;
color: #6c6f73;
height: 800px;
}
.inner-content figure {
margin-left: 0;
margin-right: 0;
margin-top: 20px;
}
.inner-content img {
border: 5px solid #fff;
}
#offcanvas {
position: absolute;
top: 0;
left: 0;
height: 872px;
width: 280px;
background-color: #fff;
border-right: 1px solid #CCD1D9;
box-shadow: 3px 3px 0 0 rgba(0,0,0,0.1);
transform: translateX(-100%);
margin-left: -3px;
z-index: 100;
}
#close {
float: right;
padding: 10px;
font-size: 14px;
color: #434A54;
transform: translateY(-100%);
display: block;
position: relative;
z-index: 100;
}
.widget {
padding: 20px;
border-bottom: 1px solid #CCD1D9;
opacity: 0;
}
.widget h3 {
font-size: 12px;
color: #434A54;
text-transform: uppercase;
}
.widget p {
font-size: 13px;
color: #434A54;
line-height: 1.5;
}
.widget.image ul {
padding: 0;
margin: 0;
list-style: none;
}
.widget.image li {
display: inline-block;
}
.widget.image img {
border: 3px solid #E6E9ED;
}
.widget.follow ul {
padding: 0;
margin: 0;
list-style: none;
}
.widget.follow li a {
font-size: 11px;
text-transform: uppercase;
text-decoration: none;
color: #656D78;
}
.widget.follow li a:before {
display: inline-block;
width: 24px;
height: 24px;
text-align: center;
font-size: 16px;
}
#pointer {
position: absolute;
top: 16px;
left: 60px;
text-transform: uppercase;
font-size: 11px;
color: #6c6f73;
}
#pointer:before {
margin-right: 5px;
font-size: 16px;
position: relative;
top: 2px;
}
$('#pointer').velocity({
translateX: "10px"
}, {
loop: true
}).velocity("reverse");
var offCanvasIn = [{
e: $("#offcanvas"),
p: {
translateX: [0, "-100%"]
},
o: {
duration: 300
}
}, {
e: $("#about"),
p: {
translateX: [0, "-10px"],
opacity: [1, 0]
},
o: {
duration: 300
}
}, {
e: $("#images"),
p: {
translateX: [0, "-10px"],
opacity: [1, 0]
},
o: {
duration: 300
}
}, {
e: $("#follow"),
p: {
translateX: [0, "-10px"],
opacity: [1, 0]
},
o: {
duration: 300
}
}, {
e: $("#close"),
p: {
translateY: [0, "-100%"],
rotateZ: ["180deg", 0]
},
o: {
duration: 300
}
}];
var offCanvasOut = [{
e: $("#close"),
p: {
translateY: "-100%",
rotateZ: "180deg"
},
o: {
duration: 300
}
}, {
e: $("#about"),
p: {
translateX: "-10px",
opacity: 0
},
o: {
duration: 300
}
}, {
e: $("#images"),
p: {
translateX: "-10px",
opacity: 0
},
o: {
duration: 300
}
}, {
e: $("#follow"),
p: {
translateX: "-10px",
opacity: 0
},
o: {
duration: 300
}
}, {
e: $("#offcanvas"),
p: {
translateX: "-100%"
},
o: {
duration: 300
}
}, ];
// run the sequence on click
$("#open").on('click', function(event) {
event.preventDefault();
$.Velocity.RunSequence(offCanvasIn);
});
$("#close").on('click', function(event) {
event.preventDefault();
$.Velocity.RunSequence(offCanvasOut);
});
