LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Last update: 26/05/2014

Added list-generation and hover disabling for mobile navigation

CSS
/* INIT
--------------------------------------------------------------------------- */
* {  
font-family: 'Open Sans Condensed', sans-serif;
}

body {
	background: #191919;
	text-align: center;
}

svg {
	display: inline-block;
	height: 100%;
	width: 100%;
}

path {
	fill: #111;
	cursor: pointer;
	opacity: 1;
}

path:hover {
	fill: #fff;
}

.qtpieInside {
	border-radius: 100%;
	position: absolute;
	left: 20%;
	width: 60%;
	top: 50%;
	margin-top: -20px;
	font-size: 30px;
	line-height: 40px;
	overflow: hidden;
	text-align: center;
	color: #ecf0f1;
}

#qtpie {
	position: relative;
	display: block;
	display: none;
	margin: 30px auto;
	width: 250px;
	height: 250px;
}

/* COLORS */

.Photoshop {
	fill: #2980b9;
}

.Photoshop:hover {
	fill: #3498db;
}

.Illustrator {
	fill: #f39c12;
}

.Illustrator:hover {
	fill: #f1c40f;
}

.InDesign {
	fill: #8e44ad;
}

.InDesign:hover {
	fill: #9b59b6;
}

.HTML5 {
	fill: #c0392b;
}

.HTML5:hover {
	fill: #e74c3c;
}

.CSS3 {
	fill: #27ae60;
}

.CSS3:hover {
	fill: #2ecc71;
}

/* qtpie-list ------------------------------------- */


#qtpie-list {
	margin: 50px auto;
	position: relative;
	display: none;
	display: inline-block;
	width: 450px;
	height: 250px;
}

#qtpie-list>div {
	float: left;
	position: relative;
	height: 100%;
}

/* LIST */

#qtpie-list ul {
  padding-top: 50px;
  list-style:none;
	font-size: 20px;
	float: left;
	color: #eee;
	text-align: left;
	line-height: 1.5;
}

span.dot {
	display: inline-block;
	width: 20px;
	height: 5px;
	margin-right: 10px;
}

.fixed {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  font-size: 1.2em;
  padding: 20px;
  max-width: 200px;
  background: #292929;
  text-align: left;
  color: #eee;
}

@media screen and (max-width: 1000px) {
  
  .fixed {display: none;}
  /* Hidden on codepen preview */
  
}
JS
$(function() {	
	
// Developed by IceMaD
// marcduboc.fr
// https://github.com/MarcDuboc/qtpie
  
// Thanks to Anders Grimsrud for the base : https://codepen.io/agrimsrud/pen/EmCoa

		qtpie = {

		init : function(options) {

			var defaultOptions = {
				id         : '#qtpie',
				defaultMsg : 'Skills',
				radius     : 70,
				list       : false,
				hover      : true
			}
			options = $.extend({}, defaultOptions, options);

// Draw paths
			base = 0;
			$paths = $(options.id).find('path');
			$paths.each(function(index, el) {
				deg = 3.61*$(this).attr('data-pie');
				// 3.61 instead of 3.6 to fix little svg render bug
				qtpie.draw({
					slice  : $(this),
					degree : deg,
					base   : base
				});
				base += parseInt(deg);
			});

// Inside
			$(options.id).find('circle').attr('r',options.radius);
			$(options.id).find('div').append('
'+options.defaultMsg+'
').find('circle').css('fill',$('body').css('background-color')); // Hover events if (options.hover) { $paths.hover(function(event) { $current = $(this); $inside = $current.parent().parent().find('.qtpieInside') $inside.stop().fadeOut(200, function() { $inside .css('color',$current.css('fill')) .html($current.attr('data-desc')) .fadeIn(200); }); },function(){ $current = $(this); $inside = $current.parent().parent().find('.qtpieInside') $inside.stop().fadeOut(200, function() { $inside .removeAttr('style') .html(options.defaultMsg) .fadeIn(200); }); $(this) }); }; // List generation (bootstrap style) if (options.list) { var list = ''; $paths.each(function(index, el) { list += '
  • '+$(this).attr('data-desc')+'
  • '; }); $(options.id).append('
      '+list+'
    '); }; // Display at the dn $(options.id).show(); }, draw : function(options) { var defaultOptions = { slice : null, degree : 0, base : 0 }; options = $.extend({}, defaultOptions, options); var rayon = ( options.degree * Math.PI / 180), x = Math.sin( rayon ) * 100, y = Math.cos( rayon ) * - 100, mid = ( options.degree > 180 ) ? 1 : 0, anim = 'M 0 0 v -100 A 100 100 1 ' + mid + ' 1 ' + x + ' ' + y + ' z'; options.slice.attr( 'd', anim ).attr('transform', 'translate(100, 100) rotate('+base+')'); } } qtpie.init({ defaultMsg : 'Hover me !' }); qtpie.init({ id : '#qtpie-list', defaultMsg : 'But not me !', radius : 70, list : true, hover : false }); });
    Host Instantly Drag and Drop Website Builder

     

    Description

    Donut pie script.
    Term
    Wed, 11/29/2017 - 11:20

    Related Codes

    Pen ID
    Pen ID
    Pen ID