Cześć!
Jest sobie dość długa strona (w sensie na kilka ekranów przewijania) i taka ma być
Na tejże stronie jest kilka istotnych paragrafów.
I pacjent chce żeby podczas scrolowania strony w chwili gdy dany nagłówek pojawi się już w widocznym obszarze na chwilę wyraźnie powiększyła sie czcionka.
Ni cholery nie wiem jak to zrobić.
Brak wiedzy zupełny :(
Pozdrawiam w ta piękna sobotę
Torin
Można użyć metody getBoundingClientRect do sprawdzenia czy element jest w obszarze który Ci e interesuje i przełączyć klasę
Tutaj masz libke:
https://michalsnik.github.io/aos/
https://github.com/michalsnik/aos
wystarczy do tekstu dodać data-aos="zoom-in"
ew. do pobawienia:
https://codepen.io/anon/pen/LXZPew
lub inna opcja:
http://scrollmagic.io/
https://github.com/janpaepke/ScrollMagic
więcej bajerów masz w moim temacie w stopce ;)
Znalazłem gotowca:
<div class="container">
<div class="text text-1">
Lorem ipsum <span></span>
</div>
<div class="text text-2">
Lorem ipsum <span></span>
</div>
</div>
$red:#f20;
.container{
height:100rem;
.text{
text-align:center;
font-size:1.5rem;
&.text-1{
margin-top:5rem;
}
&.text-2{
margin-top:50rem;
}
span{
color:$red;
}
}
}
$(window).scroll(function(){
$('.text').each(function(){
if(isScrolledIntoView($(this))){
$(this).children('span').text('visible');
}
else{
$(this).children('span').text('invisible');
}
});
});
function isScrolledIntoView(elem){
var $elem = $(elem);
var $window = $(window);
var docViewTop = $window.scrollTop();
var docViewBottom = docViewTop + $window.height();
var elemTop = $elem.offset().top;
var elemBottom = elemTop + $elem.height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}