Probleme mit marqueejs
Hallo,
ich habe versucht, marquee.js in eine Website einzubauen.
Hier ist ein Beispiel zu sehen:
https://codepen.io/anon/pen/KROLzG
In manchen Fällen (hängt wohl von der Bildschirmauflösung ab) verschwindet der Text auf der linken Seite zu früh. Also er slidet nicht komplett durch.
Wie lässt sich dieses Problem lösen?
Über Hilfe wäre ich gerade unglaublich dankbar.
Der hier verwendete Code
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<style>
.marquee {
width: 100vw;
height:calc(100vh / 8);
font-size:2em;
font-family: 'Press Start 2P';
}
a{
text-decoration: none;
}
hr{
border:2px;
height:2px;
background-color: black;
width: 100vw;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js"></script>
<div class="marquee">
<a href="index.html">Nice day</a>
</div>
<hr>
<div class="marquee">
<a href="index.html">I love pizza</a>
</div>
<hr>
<div class="marquee">
<a href="index.html">I love beer</a>
</div>
<hr>
<div class="marquee">
<a href="index.html">I love you</a>
</div>
<hr>
<div class="marquee">
<a href="index.html">And I hate nothing</a>
</div>
<hr>
<div class="marquee">
<a href="index.html">I am so cool</a>
</div>
<hr>
<div class="marquee">
<a href="index.html">So nice</a>
</div>
<hr>
<div class="marquee">
<a href="index.html">So nice</a>
</div>
<script>
$('.marquee').marquee({
});
</script>
</body>
</html>