Witajcie,
robię swoją stronę internetową i chciałbym aby niektóre animacje, które są na stronie były wywoływane dopiero kiedy zescrolluję stronę do miejsca w którym znajduje się element.
Poniżej zamieszczę kawałek kodu html oraz css.
Niestety na javascript w ogóle się nie znam i muszę się go nauczyć sam, problem leży w tym, że nie wiem w co ręce włożyć, a bardzo mi zależy na jak najszybszym skończeniu i opublikowaniu strony bo 23 wracam na studia i później może nie być na to czasu.
1) Mam zrobiony plik o rozszerzeniu ".js" w folderze w którym znajduje się strona, ale nie wiem jak mam w javascript zaznaczyć, że chodzi mi o jakiś konkretny element.
2)Rozumiem, że plik o rozszerzeniu ".js" umieszczam w sekcji head tak samo jak plik css?
3)Jak napisać w Javascript, żeby animacja, która jest w css była wywoływana dopiero gdy dojadę stroną do miejsca w którym element animowany się znajduje?
Fragment html
<article id="pasek">
<div id="border_left" class="tekst" ></div>
<div id="litery" class="tekst" >
<p class="rok_założenia">2020</p>
<p class="tekst_rok_założenia" >Rok założenia</p>
</div>
<div id="border_right" class="tekst" ></div>
</article>
Fragment CSS
div.tekst{
display:inline-block;
animation-name: fade-in;
animation-duration: 3s;
}
@keyframes fade-in{
0% {opacity: 0; transform:translateY(20px);}
100% {opacity: 1; transform:translateY(0px);}
}