Template:Team:TU Eindhoven/introhexagon Script

var vergroot = 0; var steps = 13; var afknot = 50; var width = 270; var height = 0.5 * Math.sqrt(3) * width; space = 40; $(document).ready(function() { var amount = $('.hexagonwrapper').length; //Hexagon for (j = 1; j <= amount; j++){ $('

').appendTo($("#hexagonwrapper" + j.toString() )); $('

' + tekst[j-1].toString() + '

').appendTo($("#hexagon" + j.toString())); for (i = 0; i < steps + 1; i++) { $('').appendTo("#hexagon" + j.toString()).css({ 'display': 'block', 'width': ((100 - afknot) + afknot * (i / steps)).toString() + '%', 'height': 'calc(100% / ' + (steps * 2 + 1).toString() + ')', 'margin': '0 40' }); } for (i = 1; i < steps + 1; i++) { $('').appendTo("#hexagon" + j.toString()).css({ 'display': 'block', 'width': (100 - afknot * (i / steps)).toString() + '%', 'height': 'calc(100% / ' + (steps * 2 + 1).toString() + ')', 'margin': '0 auto' }); } $("#hexagon" + j.toString()).hover(function() { groter( $(this).attr('id').match(/\d+/) ) }, function() { kleiner( $(this).attr('id').match(/\d+/) ) }); $(".hexagonhitbox").css({"pointer-events":"auto","margin":"0 auto"}); $(".hexagon").css({ "width": width, "height": height }); }; $(".hexagonwrapper").css({ "width": width, "height": height }); }); function groter(id) { if (vergroot == 0) { $("#hexagon" + id.toString()).css('transition', 'transform 0.5s'); $("#hexagon" + id.toString()).css('transform','scale(1.5,1.5)'); $("#hexagon" + id.toString()).css('z-index', 50); vergroot = 1; } } function kleiner(id) { if (vergroot == 1) { $("#hexagon" + id.toString()).css('transition', 'transform 0.5s, z-index 0.5s'); $("#hexagon" + id.toString()).css('transform','scale(1,1)'); $("#hexagon" + id.toString()).css('z-index', 0); vergroot = 0; } }