A Pen by NeatNait.

index.html

<link class="cssdeck" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">


<div class="hint">
  <p>Use arrow keys to navigate</p>
  <h2>made with love at <a href="http://www.neatnait.com/">neatnait</a></h2>
</div>

<div id="social">
  
  <section data-x="-100" data-y="500" data-template="icons">
    
    <h1>be social</h1>
        
    <section>
      <i class="fa fa-twitter"></i><br>
      twitter
    </section>
    
    <section>
      <i class="fa fa-github"></i><br>
      github
    </section>
    
    <section>
      <i class="fa fa-pinterest"></i><br>
      pinterest
    </section>
    
    <section>
      <i class="fa fa-instagram"></i><br>
      instagram
    </section>
    
    <section>
      <i class="fa fa-youtube-play"></i><br>
      youtube
    </section>
    
    <section>
      <i class="fa fa-dribbble"></i><br>
      dribbble
    </section>
    
    <section>
      <i class="fa fa-code"></i><br>
      codepen.io
    </section>
    
    <section>
      <i class="fa fa-facebook"></i><br>
      facebook
    </section>
    
    <section>
      <i class="fa fa-google-plus"></i><br>
      google-plus
    </section>
        
  </section>
  
</div>


<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/jmpress/0.4.5/jmpress.all.min.js"></script>

NeatNait-social-rotator.markdown

NeatNait social rotator

Social rotator using jmpress -> https://github.com/jmpressjs/jmpress.js

A Pen by NeatNait on CodePen.

License.

script.js

$(function() {

	$.jmpress('template', 'icons', {
		children: function(idx) {
			return {r: 2500, phi: idx*40, rotateY: idx*140, scale: 0.3, rotateX: 9};
		}
	});

	var config = {
		stepSelector: 'section',
		viewPort: {
			width: 1300,
			maxScale: 1
		},
    duration: {
      defaultValue: 2000//autoplay
    }
	};

	$('#social').jmpress(config);

});

style.css

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,100);

body{
  text-align:center;
  font-family:sans-serif;
  height:200px!important;
}

.hint{
  color:#111;
}

section{
  font-size: 1.6em;
  text-align: center;
  color:#111;  
  font-family: 'Roboto', sans-serif;
  font-weight:100;
}

section i{
  font-size: 1.9em;
  color:#f06;
  margin-bottom:.2em;
}


h2 a{
  color:#ff0066;
  text-decoration:none;
}