Zwiększenie czcionki po wyświetleniu elementu

0

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

0

Można użyć metody getBoundingClientRect do sprawdzenia czy element jest w obszarze który Ci e interesuje i przełączyć klasę

1

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 ;)

1

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));
}

Źródło: https://codepen.io/pedrodj46/pen/BKBOaJ

1

Ha!

Pikne dzięki!!!!
Widzę, że mam nockę juz zaplanowaną.
Teraz tylko sprawdzę czy moje skarpety są czyste i w dodatku pachna neutralnie ;)

Dzięki
Torin

1 użytkowników online, w tym zalogowanych: 0, gości: 1