< >

CircularNavigation-interactivedemo-index.html


Quell Code


<!DOCTYPE html>
<html lang="en" class="no-js">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Circular Navigation - Interactive Demo | Codrops</title>
<style>
   @import url(http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css);
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700);

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative
}

html,
body {
  height: 100%
}

body {
  border: 1px solid transparent;
  font: 300 1em "Source Sans Pro", sans-serif;
}

body #cdawrap {
  background: #f9f9f9;
  top: 55px;
}

a {
  text-decoration: none;
}

.back {
  text-decoration: none;
  color: #888;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 70%;
  letter-spacing: 1px;
  display: inline-block;
  margin-left: 30px;
}

p {
  margin-bottom: 10px
}

.cn-wrapper {
  width: 26em;
  height: 26em;
  position: fixed;
  z-index: 10;
  bottom: 0;
  left: 50%;
  margin-left: -200px;
  pointer-events: none;
  border: 1px solid #7C5089;
  -webkit-transition: all .3s ease;
  transition: all .3s ease
}

.cn-wrapper:after {
  content: "";
  display: block;
  height: 8px;
  width: 8px;
  background-color: maroon;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -4px;
  margin-left: -4px;
  border-radius: 50%;
  z-index: 11
}

.cn-wrapper li {
  position: absolute;
  font-size: 1.5em;
  width: 10em;
  height: 10em;
  overflow:hidden;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  background-color: #eee;
  border: 1px solid #ddd;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  color: #aaa
}

.cn-wrapper li a {
  display: block;
  font-size: 1.2em;
  height: 13.5em;
  width: 13.5em;
  position: absolute;
  bottom: -6.75em;
  right: -6.75em;
  text-decoration: none;
  color: white;
  -webkit-transition: background-color .3s ease, -webkit-transform .8s ease;
  transition: background-color .3s ease, -webkit-transform .8s ease;
  transition: background-color .3s ease, transform .8s ease;
  background-color: #7C5089
}

button {
  background: none;
  border: 5px solid #ddd;
  padding: 5px 10px;
  text-decoration: none;
  color: #999;
  font-family: Arial;
  margin-top: 5em;
}

button[disabled] {
  color: #eee
}

.steps {
  color: #eee;
  background-color: #7C5089;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px;
  z-index: 20
}

.steps:before {
  content: "- "
}
span{
  font-size:1.3em;
}

.info {
  padding-left: 10px;
  color: #888;
  margin: 1em 0;
  position: absolute;
  bottom: 0;
  left: 0
}

.info li {
  line-height: 1.5
}

.info li:first-child:before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: #eee;
  border: 1px solid #ddd;
  margin-right: 10px;
  vertical-align: bottom
}

.info li:nth-child(2):before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1px solid #7C5089;
  margin-right: 10px;
  vertical-align: bottom
}

.info li:nth-child(3):before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #7C5089;
  margin-right: 10px;
  vertical-align: bottom
}

.info li:nth-child(4):before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: maroon;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: center
}

em {
  font-size: .8em;
  color: #888
}
 
    
</style>
    <script src="js/index.php?js&name=modernizr-2.6.2.min.js"></script>
<!--
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-7243260-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
-->

  </head>
  <body>
    <div class="cn-wrapper">
     <ul>
      <li><a href="#"><span class="icon-picture"></span></a></li>
      <li><a href="#" class="active"><span class="icon-headphones"></span></a></li>
      <li><a href="#"><span class="icon-home"></span> </a></li>
      <li><a href="#"><span class="icon-facetime-video"></span></a></li>
      <li><a href="#"><span class="icon-envelope-alt"></span></a></li>
     </ul>
    </div>
    <div class="steps">List items are positioned absolutely. Anchor tags inside them are also positioned absolutely, and their size is given so that they are visible at the end of the transformation. Red dot represents the container's center.</div>
    <button class="play-button">Start Demo</button>
    <button class="step-button">Next Step</button>
    <button class="reset-button" disabled>Reset</button>
    <span><em>*Best experienced in Chrome</em></span>
    <ul class="info">
      <li>List Item</li>
      <li>Nav Container</li>
      <li>Anchor inside List Item</li>
      <li>Container center</li>
    </ul>
    <a class="back" href="http://tympanus.net/codrops/?p=16114"><span>Back to the Codrops Article</span></a>
    <script src="js/index.php?js&name=jquery-1.10.1.min.js"></script>
    <script>
        var steps = $('.steps'),
    wrapper = $('.cn-wrapper'),
    items = $('.cn-wrapper li'),
    anchors = $('.cn-wrapper li a'),
    reset = $('.reset-button'),
    play = $('.play-button');

var step = 1;
$('.step-button').on('click', function(e){
  e.preventDefault();
  $('.reset-button').removeAttr('disabled');
  play.attr('disabled', 'disabled');

  switch (step)
  {
      case 1: step1(); break;
      case 2: step2(); break;
      case 3: step3(); break;
      case 4: step4(); break;
      case 5: step5(); break;
      case 6: step6(); break;
      case 7: step7(); break;
  }
  step++;
  if(step > 7){
    reset.trigger('click');
    step = 1;
  }
});

function step1(){
      items.css({
        'left': '50%',
        'top': '50%',
        'margin-top': '-1.3em',
        'margin-left': '-10em',
        'overflow': 'hidden'
      });
      steps.html('Items are moved so that their transform origin (bottom right corner) coincides with the container\'s center, and their overflow is hidden');
  
  }

  function step2(){
    items.each(function(i, el){
      var angle = i * 40 - 10;
      $(this).css({
        'transform': 'rotate('+angle+'deg) skew(50deg)'
      });
    });
    steps.html('Items are rotated, each item is rotated by: (index of item * value of central angle) - 10deg, and then they are skewed by: 90deg - value of central angle');
  }
  
  function step3(){
     anchors.css({
      'transform': 'skew(-50deg) rotate(-70deg) scale(1)',
      'border-radius': '50%',
      'text-align': 'center',
      'padding-top': '2em'
    });
    steps.html('Anchors inside each item are positioned absolutely, unskewed, rotated by -(90 - central-angle/2) and their text is aligned at the center so that their content is visible');
  }
  
  function step4(){
    wrapper.css('border-radius', '50%');
    steps.html('Container is rounded');
  }
  
  function step5(){
    wrapper.css('overflow', 'hidden');
    steps.html('Container\'s overflow is hidden (the items are cut off)');
  }
  
  function step6(){
    wrapper.css('bottom', '-13em');
     steps.html('Container (whole navigation) is positioned at the bottom');
    reset.removeAttr('disabled');
  }

reset.on('click', function(){
  $('*').attr('style', '');
  step = 1;
  play.removeAttr('disabled');
  $('.step-button').removeAttr('disabled');
  $(this).attr('disabled', 'disabled');
  steps.html('List items are positioned absolutely. Anchor tags inside them are also positioned absolutely, and their size is given so that they are visible at the end of the transformation. Red dot represents the container\'s center.');
});


play.on('click', function(e){
  
  e.preventDefault();
  $(this).attr('disabled', 'disabled');
  $('.step-button').attr('disabled', 'disabled');

  step1();

  setTimeout(function(){
    step2();
  }, 2000);
  
  setTimeout(function(){
    step3();
  }, 5000);
  
  setTimeout(function(){
    step4();
  }, 10000);
  
  setTimeout(function(){
   step5();
  }, 15000);
  
   setTimeout(function(){
    step6();
  }, 18000);
  
   setTimeout(function(){
    step7();
  }, 21000);
    
});
</script>
    <!-- For the demo ad only 
    <script src="http://tympanus.net/codrops/adpacks/demoad.js"></script>
    -->
  </body>
</html>