logo DevAnswer - Developers Answer

Menu with Web Page Turn Over Effect

23rd September

Preview


Source Code
                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  overflow: hidden;
}
.page {
  height: 100%;
  background-color: #584E4A;
}
.content {
  height: 200%;
  transform-origin: top left;
  transition: transform 0.7s cubic-bezier(1, 0.005, 0.24, 1);
  background-color: #f0f0f0;
}
.content_inner {
  height: 50%;
  overflow-y: auto;
  padding: 50px 20%;
}
.menu_toggle {
  z-index: 900;
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  cursor: pointer;
  width: 100px;
  height: 80px;
  background-color: #F37272;
  border-bottom-right-radius: 100%;
}
.menu_toggle:active i {
  opacity: 0.8;
}
.menu_toggle i {
  color: #f0f0f0;
}
.menu_toggle .menu_open,
.menu_toggle .menu_close {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -15px;
  margin-left: -12px;
  transition: transform 0.7s cubic-bezier(1, 0.005, 0.24, 1);
}
.menu_toggle .menu_open {
  transform-origin: -100px -100px;
}
.menu_toggle .menu_close {
  transform: rotate(20deg);
  transform-origin: -100px -160px;
}
.menu_items {
  position: fixed;
  bottom: 0;
  left: 50px;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.menu_items li {
  height: 60px;
  margin-bottom: 30px;
  transform: translateX(-300px);
  transition: transform 0.7s 0s cubic-bezier(1, 0.005, 0.24, 1);
}
.menu_items li:nth-child(2) {
  margin-left: 40px;
}
.menu_items li:nth-child(3) {
  margin-left: 80px;
}
.menu_items a {
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #a4a4a4;
  transition: color 0.2s;
}
.menu_items a .icon {
  position: relative;
  display: inline-block;
  margin-right: 25px;
  color: #f0f0f0;
}
.menu_items a .icon:after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  display: block;
  width: 60px;
  height: 60px;
  margin-left: -33px;
  margin-top: -32px;
  border-radius: 100%;
  border: 2px solid #f0f0f0;
  transition: border-color 0.2s;
}
.menu_items a:hover {
  color: #f0f0f0;
}
.menu_items a:hover .icon:after {
  border-color: #F37272;
}
.menu_items a:active .icon {
  color: #F37272;
}
.shazam .content {
  transform: rotate(-30deg);
}
.shazam .menu_open {
  transform: rotate(-20deg);
}
.shazam .menu_close {
  transform: rotate(0);
}
.shazam .menu_items li {
  transform: translateX(0);
  transition: transform 0.35s 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.shazam .menu_items li:nth-child(2) {
  transition-delay: 0.47s;
}
.shazam .menu_items li:nth-child(3) {
  transition-delay: 0.48s;
}
h1 {
  padding-bottom: 15px;
  border-bottom: 1px solid #ddd;
}
body {
  color: #584E4A;
}
</style>

</head>
<body>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<link rel="stylesheet" href="http://www.devanswer.com/codes/files/normalize.min.css">
<div class="page">
  <span class="menu_toggle">
    <i class="menu_open fa fa-bars fa-lg"></i>
    <i class="menu_close fa fa-times fa-lg"></i>
  </span>
  <ul class="menu_items">
    <li><a href="#"><i class="icon fa fa-signal fa-2x"></i> Moar</a></li>
    <li><a href="#"><i class="icon fa fa-coffee fa-2x"></i> Coffee</a></li>
    <li><a href="#"><i class="icon fa fa-heart fa-2x"></i> Please</a></li>
  </ul>
  <main class="content">
    <div class="content_inner">
      <h1>Lorem ipsum dolor sit amet</h1>
      <p>Click the <strong style="color: red;">red button </strong>  in the left corner. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel dolorem, ducimus laudantium, earum eos natus sint voluptatum dolores fuga quibusdam consectetur dicta. Laudantium enim inventore iusto ducimus est velit aperiam tempora quibusdam id dolore natus perferendis, debitis distinctio optio repellendus, repellat molestias delectus harum eius, reiciendis dicta ipsum architecto! Eligendi expedita in beatae, placeat unde voluptatibus voluptates consectetur explicabo laudantium, officiis ad nihil. Beatae similique voluptate sequi voluptatem delectus iure in omnis, fuga ipsam nulla ipsum architecto, iste debitis nisi labore quisquam odio accusantium corporis sint perspiciatis. Excepturi earum nobis soluta, doloremque nihil dolorum illum quaerat magnam nemo non sed!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel dolorem, ducimus laudantium, earum eos natus sint voluptatum dolores fuga quibusdam consectetur dicta. Laudantium enim inventore iusto ducimus est velit aperiam tempora quibusdam id dolore natus perferendis, debitis distinctio optio repellendus, repellat molestias delectus harum eius, reiciendis dicta ipsum architecto! Eligendi expedita in beatae, placeat unde voluptatibus voluptates consectetur explicabo laudantium, officiis ad nihil. Beatae similique voluptate sequi voluptatem delectus iure in omnis, fuga ipsam nulla ipsum architecto, iste debitis nisi labore quisquam odio accusantium corporis sint perspiciatis. Excepturi earum nobis soluta, doloremque nihil dolorum illum quaerat magnam nemo non sed!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel dolorem, ducimus laudantium, earum eos natus sint voluptatum dolores fuga quibusdam consectetur dicta. Laudantium enim inventore iusto ducimus est velit aperiam tempora quibusdam id dolore natus perferendis, debitis distinctio optio repellendus, repellat molestias delectus harum eius, reiciendis dicta ipsum architecto! Eligendi expedita in beatae, placeat unde voluptatibus voluptates consectetur explicabo laudantium, officiis ad nihil. Beatae similique voluptate sequi voluptatem delectus iure in omnis, fuga ipsam nulla ipsum architecto, iste debitis nisi labore quisquam odio accusantium corporis sint perspiciatis. Excepturi earum nobis soluta, doloremque nihil dolorum illum quaerat magnam nemo non sed!</p>
    </div>
  </main>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
var $page = $('.page');
$('.menu_toggle').on('click', function(){
  $page.toggleClass('shazam');
});
$('.content').on('click', function(){
  $page.removeClass('shazam');
});
</script>

</body>
</html>                        



Other Codes