test kreslení šipky k elementu

by Petr Haluza

HTML

<header> 
  <div class="logo">Moje stránka</div> 
  <a data-bind="kontakty" class="new-link" href="#">Kontakty</a>
  <a data-bind="portfolio" class="new-link" href="#" style="margin-left:auto">profil</a>
</header> 
<aside> 
  <p> Lorem ipsum..</p>
  <p> Lorem ipsum..</p>
  <p> Lorem ipsum..</p>
  <p> Lorem ipsum..</p>
  <p> Lorem ipsum..</p>
  <p> Lorem ipsum..</p>
   
  <a data-bind="kontakty" class="old-link" href="#">Kontakty</a>
  <a data-bind="portfolio" class="old-link" href="#">Profil</a>
</aside> 

<main> <p> Klik na "kontakty, profil" v sidebaru </p> </main>

CSS

header { display: flex; gap: 1em; background-color: rgb(70, 195, 245);}
aside { width: 150px; float: left; background: rgb(231, 231, 136);}
main { width: 400px; float: left; background: rgb(190, 190, 189)}
* { padding: 5px; margin: 5px}


[id^="move-anim-arrow-"] { mix-blend-mode:multiply }

.arrow-highlight {
  box-shadow: 0 0 2px 6px #ffd969, 0 0 8px 3px #ffe850;
  transition: box-shadow 0.4s;
}

JavaScript

$('.old-link').on('click', function(e){
e.preventDefault();

var bind = $(this).attr('data-bind');
if (!bind) return;
var $new = $('.new-link[data-bind="'+bind+'"]');
if ($new.length === 0) return;
$('#move-anim-arrow-'+bind).remove();

var $old = $(this);
var oldPos = $old.offset();
var newPos = $new.offset();
var oldX = oldPos.left + $old.outerWidth()/2;
var oldY = oldPos.top + $old.outerHeight()/2;
var newX = newPos.left + $new.outerWidth()/2;
var newY = newPos.top + $new.outerHeight()/2;

var svgLeft = Math.min(oldX, newX);
var svgTop = Math.min(oldY, newY);
var svgWidth = Math.abs(newX - oldX);
var svgHeight = Math.abs(newY - oldY);
var padding = 40;
svgLeft -= padding;
svgTop -= padding;
svgWidth += padding * 2;
svgHeight += padding * 2;
var startX = oldX - svgLeft;
var startY = oldY - svgTop;
var endX = newX - svgLeft;
var endY = newY - svgTop;

var cx = (startX + endX)/2;
var cy = (startY + endY)/2;
var curveStrength = 80;
var dx = endX - startX;
var dy = endY - startY;
var length = Math.sqrt(dx*dx + dy*dy);
if (length !== 0) {
cx +=  curveStrength * (-dy/length);
cy +=  curveStrength * (dx/length);
}

var svgNS = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(svgNS, "svg");
svg.setAttribute("id", "move-anim-arrow-"+bind);
svg.setAttribute("width", svgWidth);
svg.setAttribute("height", svgHeight);
svg.setAttribute("style", "position:absolute;left:"+svgLeft+"px;top:"+svgTop+"px;pointer-events:none;z-index:9999;overflow:visible;opacity:0;"); // [fadeIn]

var defs = document.createElementNS(svgNS, "defs");
var marker = document.createElementNS(svgNS, "marker");
marker.setAttribute("id", "arrowhead-"+bind);
marker.setAttribute("markerWidth", "10");
marker.setAttribute("markerHeight", "10");
marker.setAttribute("refX", "5");
marker.setAttribute("refY", "5");
marker.setAttribute("orient", "auto");
var polygon = document.createElementNS(svgNS, "polygon");
polygon.setAttribute("points",...