Al tijden was ik op zoek naar een manier om een promotionele tekst te laten scrollen achter een andere tekst. Normaal is zelf coderen de eerste optie die ik bedenk, maar in dit geval dacht ik dat hier een plugin voor nodig zou hebben. En er ook één gevonden, maar die kwam met een flink financieel offer.
Daardoor heb ik het hele project maar even op de zijlijn gezet, totdat ik ineens een idee kreeg. Tijdens het zoeken naar een oplossing voor een ander probleem.
Het is natuurlijk prima mogelijk om zoiets te maken met alleen html en css.
Css animaties zijn hier uitstekend geschikt voor. Onderstaand het resultaat:
En hier de gebruikte code
<div class="content">
<div class="slider-wrapper">Coderen met gebruik van:
<div class="slider">
<div class="slider-text1">HTML</div>
<div class="slider-text2">CSS</div>
<div class="slider-text3">PHP</div>
</div>
</div>
</div>
<style>
/*.content {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}*/
.slider-wrapper {
font-size: 24px;
color:#000;
font-weight: bold;
text-transform: uppercase;
display: flex;
align-items: start;
justify-content: start;
}
.slider{
height: 24px;
padding-left:5px;
overflow: hidden;
}
.slider div {
color:#000;
height: 50px;
margin-bottom: 50px;
padding: 0;
text-align: left;
box-sizing: border-box;
}
.slider-text1 {
/*background: lightgreen;*/
animation: slide 6s ease infinite;
}
.slider-text2 {
/* background: skyblue;*/
}
.slider-text3 {
/* background: lightcoral;*/
}
@keyframes slide {
0% {margin-top:-300px;}
5% {margin-top:-200px;}
33% {margin-top:-200px;}
38% {margin-top:-100px;}
66% {margin-top:-100px;}
71% {margin-top:0px;}
100% {margin-top:0px;}
}
</style>