91 lines
3.3 KiB
HTML
91 lines
3.3 KiB
HTML
<nav class="navbar navbar-dark navbar-custom fixed-top">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="/">
|
|
<img src="/static/sbb.png" alt="SBB" width="30px">
|
|
<span class="font-monospace fw-bold">Click &
|
|
<span class="ml4">
|
|
<span class="letters letters-1">Hike</span>
|
|
<span class="letters letters-2">Bike</span>
|
|
<span class="letters letters-3">Culture</span>
|
|
<span class="letters letters-4">Jodel</span>
|
|
</span>
|
|
</span>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
|
|
<script>
|
|
var ml4 = {};
|
|
ml4.opacityIn = [0,1];
|
|
ml4.scaleIn = [0.2, 1];
|
|
ml4.scaleOut = 2.5;
|
|
ml4.durationIn = 900;
|
|
ml4.durationOut = 800;
|
|
ml4.delay = 600;
|
|
|
|
anime.timeline({loop: true})
|
|
.add({
|
|
targets: '.ml4 .letters-1',
|
|
opacity: ml4.opacityIn,
|
|
scale: ml4.scaleIn,
|
|
duration: ml4.durationIn
|
|
}).add({
|
|
targets: '.ml4 .letters-1',
|
|
opacity: 0,
|
|
scale: ml4.scaleOut,
|
|
duration: ml4.durationOut,
|
|
easing: "easeInExpo",
|
|
delay: ml4.delay
|
|
}).add({
|
|
targets: '.ml4 .letters-2',
|
|
opacity: ml4.opacityIn,
|
|
scale: ml4.scaleIn,
|
|
duration: ml4.durationIn
|
|
}).add({
|
|
targets: '.ml4 .letters-2',
|
|
opacity: 0,
|
|
scale: ml4.scaleOut,
|
|
duration: ml4.durationOut,
|
|
easing: "easeInExpo",
|
|
delay: ml4.delay
|
|
}).add({
|
|
targets: '.ml4 .letters-3',
|
|
opacity: ml4.opacityIn,
|
|
scale: ml4.scaleIn,
|
|
duration: ml4.durationIn
|
|
}).add({
|
|
targets: '.ml4 .letters-3',
|
|
opacity: 0,
|
|
scale: ml4.scaleOut,
|
|
duration: ml4.durationOut,
|
|
easing: "easeInExpo",
|
|
delay: ml4.delay
|
|
}).add({
|
|
targets: '.ml4 .letters-4',
|
|
opacity: ml4.opacityIn,
|
|
scale: ml4.scaleIn,
|
|
duration: ml4.durationIn
|
|
}).add({
|
|
targets: '.ml4 .letters-4',
|
|
opacity: 0,
|
|
scale: ml4.scaleOut,
|
|
duration: ml4.durationOut,
|
|
easing: "easeInExpo",
|
|
delay: ml4.delay
|
|
}).add({
|
|
targets: '.ml4',
|
|
opacity: 0,
|
|
duration: 0,
|
|
delay: 0
|
|
});
|
|
</script>
|
|
</a>
|
|
|
|
|
|
<form class="d-flex">
|
|
<a href="/profile" style="color: inherit; text-decoration: none;">
|
|
<i class="fas fa-user"></i>
|
|
</a>
|
|
</form>
|
|
|
|
</div>
|
|
</nav>
|