From d8f1ee657d57336d8e90a239d20b4f3506e4aa73 Mon Sep 17 00:00:00 2001 From: Justin Taylor Date: Wed, 5 Jul 2017 21:58:18 -0400 Subject: [PATCH] skillmill prototype with placeholder images (just rplc with good ones) --- assets/css/main.css | 33 ++++++++ assets/js/skillmill.js | 124 ++++++++++++++++++++++++++++++ index.html | 10 +++ media/portfolio/placeholder01.png | Bin 0 -> 4184 bytes media/portfolio/placeholder02.png | Bin 0 -> 4023 bytes media/portfolio/placeholder03.png | Bin 0 -> 4212 bytes media/portfolio/placeholder04.png | Bin 0 -> 5030 bytes media/portfolio/placeholder05.png | Bin 0 -> 4337 bytes media/portfolio/placeholder06.png | Bin 0 -> 3852 bytes 9 files changed, 167 insertions(+) create mode 100644 assets/js/skillmill.js create mode 100644 media/portfolio/placeholder01.png create mode 100644 media/portfolio/placeholder02.png create mode 100644 media/portfolio/placeholder03.png create mode 100644 media/portfolio/placeholder04.png create mode 100644 media/portfolio/placeholder05.png create mode 100644 media/portfolio/placeholder06.png diff --git a/assets/css/main.css b/assets/css/main.css index e1925ca..16154e9 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1345,3 +1345,36 @@ h3.big { font-size: 175%; font-weight: bold; } + + + +/**** skillmil ****/ + +#skillmill { + width: 814px; + height: 670px; + text-align: center; + margin: auto; +} + +#skillmill #mill { + margin: auto; + text-align: center; + position: relative; +} + +#skillmill #mill span { + position: absolute; +} + +#skillmill #info { + margin: auto; + position: relative; + top: 85px; +} + +.rotisserie { + width: 150px; + height: 100px; +} + diff --git a/assets/js/skillmill.js b/assets/js/skillmill.js new file mode 100644 index 0000000..3d7fa16 --- /dev/null +++ b/assets/js/skillmill.js @@ -0,0 +1,124 @@ +/* + * + * SKILLMILL - a circling windmill of portfolio images that + * highlight skills in the center upon hover + * + * Justin Taylor, July 2017 + * + * + */ + +(function($){ + +var circleImages; +var ci; +var numImages; +var angle; +var angleIncr; +var xOffSet; +var yOffSet; +var radius; +var x; +var y; +var intval; +var timer; +// todo: auto discover images +var images = ['placeholder01.png','placeholder02.png','placeholder03.png','placeholder04.png','placeholder05.png','placeholder06.png']; +var imagePath = 'media/portfolio/'; + + +var template = ` + + + +` +var ci = $('#mill'); + +$('#info').hide(); + +// setup the area +function init() +{ + + var ci = $('#mill'); + $.each(images, function(key, imageFile) { + thisSpan = template.replace('{{__IMG__}}', imagePath+imageFile); + ci.append(thisSpan); + console.log(key); + console.log(imageFile); + + }); + + + $('.rotisserie').hover(function(event) { + + // fade image in + $('#rotisserie-platform').remove(); + stop_Int(); + var img = $(''); + img.attr('src', event.currentTarget.src); + img.appendTo('#info'); + clearTimeout(timer); + $('#info').stop(true, true).fadeIn(1000); + + }, function() { + + // fade image out + start_Int(); + $('#info').stop().fadeOut(1000); + } + ); + + numImages = images.length; + angle = (2*Math.PI)/numImages; + angleIncr = 0; + xOffSet = 230; + yOffSet = 140; + radius = 480; + x = 0; + y = 0; + intval; + start_Int(); +} + +// mathy stuff to calc thumb locations +function displayThumbs() +{ + var ci = $('#mill'); + ci.children('span').each(function(i) { + x = (radius * Math.sin(angleIncr+(angle*i))) + xOffSet; + y = 0.5*(radius * Math.cos(angleIncr+(angle*i))) + yOffSet; + console.log("i="+i+"; x="+x+"; y="+y+"; angle="+angle+"; angleIncr="+angleIncr+";"); + ele = $(this); + ele[0].style.left = x+"px"; + ele[0].style.top = y+"px"; + ele[0].style.display = 'none'; + ele[0].style.offsetHeight; + ele[0].style.display = ''; + }); +} + + +// +// timers & helpers +// +function commenseRotation() +{ + angleIncr = angleIncr + .002; + displayThumbs(); +} + +function start_Int() +{ + intval=setInterval(function() {commenseRotation();},20); +} + +function stop_Int(p) +{ + clearInterval(intval); +} + + +init(); + +})(jQuery); diff --git a/index.html b/index.html index 6258c1d..3a62415 100644 --- a/index.html +++ b/index.html @@ -21,6 +21,7 @@ +