Hallo,
ich habe versucht, marquee.js in eine Website einzubauen.
Hier ist ein Beispiel zu sehen:
<a href="https://codepen.io/anon/pen/KROLzG">https://codepen.io/anon/pen/KROLzG</a>
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.
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>