Svg Line animate arround a box
Einfach auf den Buttons klicken und ihr wisst, was ich meine.
Wenn ich mich recht erinnere, war das mal eine Lösung von @sempervivum , nur leider finde ich das Theme nicht mehr wieder.
Ich glaube das der Code komplett von ihm war , kann aber sein das ich ihn etwas geändert hatte
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<!DOCTYPE html>
<html lang="de">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
body {
background-color: #181a27;
}
#conti{
display:flex;
}
#conti ul li{
list-style:none;
color:white;
font-size:20px;
margin-top:35px;
}
svg {
position:absolute;
z-index:1;
top:15px;
margin-left:25px;
display:none;
}
#box{
position:relative;
z-index:10;
width:250px;
height:250px;
left:50px;
top:40px;
font-size:25px;
color:white;
}
span{
display:flex;
flex:1;
flex-direction:row;
}
li{
width:100%;
display:inline-block;
margin-top:20px;
padding-left:30px;
border-bottom:5px solid transparent;
font-size:30px;
color:white;
}
#right,#left{
flex:1;
}
</style>
</head>
<body>
<div id="conti">
<div id="left">
<li data-text="hallo steht lorem ipsum und mehr">Text 1</li>
<li data-text="hallo hier könnte dein text stehen und noch viel mehr">Text 2</li>
<li data-text="hier steht nur bla bla blub">Text 3</li>
<li data-text="und hier machen wir mal werbung rein ">Text 4</li>
<li>Text 5</li>
</div>
<div id="right">
<div id="box"></div>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="400px" height="400px" >
<rect x="10" y="10" fill="none" stroke="#ffffff" stroke-width="10" stroke-miterlimit="10" width="300" height="300"/>
</svg>
<div>
</div>
<script>
function go(){
jQuery.extend( jQuery.easing,
{
easeInOutQuad: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
}
});
function SVG(tag) {
return document.createElementNS('http://www.w3.org/2000/svg', tag);
}
function replaceRectsWithPaths(parentElement) {
var rects = $(parentElement).find('rect');
$.each(rects, function() {
var rectX = $(this).attr('x');
var rectY = $(this).attr('y');
var rectX2 = parseFloat(rectX) + parseFloat($(this).attr('width'));
var rectY2 = parseFloat(rectY) + parseFloat($(this).attr('height'));
var convertedPath = 'M' + rectX + ',' + rectY + ' ' + rectX2 + ',' + rectY + ' ' + rectX2 + ',' + rectY2 + ' ' + rectX + ',' + rectY2 + ' ' + rectX + ',' + rectY;
$(SVG('path'))
.attr('d', convertedPath)
.attr('fill', $(this).attr('fill'))
.attr('stroke',
$(this).attr('stroke'))
.attr('stroke-width',
$(this).attr('stroke-width'))
.insertAfter(this);
});
$(rects).remove();
}
function hideSVGPaths(parentElement){
var paths = $(parentElement).find('path');
$.each( paths, function() {
var totalLength = this.getTotalLength();
$(this).css({
'stroke-dashoffset': totalLength,
'stroke-dasharray': totalLength + ' ' + totalLength
});
});
}
function drawSVGPaths(_parentElement, _timeMin, _timeMax, _timeDelay) {
var paths = $(_parentElement).find('path');
$.each( paths, function(i) {
var totalLength = this.getTotalLength();
$(this).css({
'stroke-dashoffset': totalLength,
'stroke-dasharray': totalLength + ' ' + totalLength
});
$(this).delay(_timeDelay*i).animate({
'stroke-dashoffset': 0
}, {
duration: Math.floor(Math.random() * _timeMax) + _timeMin
,easing: 'easeInOutQuad'
});
});
}
function startSVGAnimation(parentElement){
replaceRectsWithPaths(parentElement);
drawSVGPaths(parentElement, 100, 1000, 50);
}
startSVGAnimation($('svg'));
}
$('li').click(function(){
$('li').css('border-bottom','5px solid transparent');
$(this).css('border-bottom','5px solid white')
g=$(this).data('text');
$('#box').html('');
setTimeout(function(){
$('#box').html(g);
},1000);
$('svg').css('display','block');
go()
})
</script>
</body>
</html>