Kroki zmiany style="width: 100%" do 50% dla <img src...

0

Witam po dłuższej przerwie.

Znam Pythona ;-D , a teraz poznaję JavaScript.
Czy ktoś może mi podpowiedzieć jak płynnie zmienić rozmiar obrazka.
Zrobiłem funkcję zmieniającą style width przy skrolowaniu strony. Działa w dwu krokach.
Skroll w dół po przekroczeniu pewnej granicy w pikselach następuje zmiana do 50%.
Przy powrocie znowu 100%. Obrazek/logo jest fixed u góry i chodzi o zajmowanie mniejszej ilości miejsca jeżeli jesteśmy niżej na stronie.
Mam funkcję to robiąca, a chcę ją wywoływać przez setTimeout(mojaFunkcja("xx%",200) i tylko pięć jedna po drugiej z 90%, 80%, 70% 60% 50%.
I coś to się nie dzieje w krokach. Co robię źle i co poprawić?

Pozdrawiam
Radosław Głębicki

0

Pokaż tą funkcję.

1

Takie animacje to się w CSS robi nie w JSie.

1

Robienie tego na setTimeout nie ma obecnie sensu.
Określasz rozmiar wyjściowy i docelowy, a do wykonania płynnej animacji używasz transition:
https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1

0

Jak "wyzwolić" transition po przekroczeniu 100px scrollu w dól strony? Jest coś w CSS czy jednak javascript?

1

To z transition to tylko przykład.

window.onscroll = window_onscroll;
function window_onscroll() {
  zg_okno_skroll_od_gory=window.pageYOffset;
  if (zg_okno_skroll_od_gory>=zg_graniczne_przewiniecie) {
    // zmień wysokość (najlepiej dodając/odejmując odpowiednią klasę do elementu)
  } else {
    // zmień wysokość (najlepiej dodając/odejmując odpowiednią klasę do elementu)
  }

A w praktyce, to warto by najpierw sprawdzać, czy od poprzedniego pomiaru doszło do przejścia przez wartość graniczną, bo inaczej będziesz co kilka pikseli przypisywał do elementu styl lub klasę, czy trzeba czy nie trzeba.

0

ok. Znalezione w otchłaniach internetu:

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("header").style.fontSize = "30px";
  } else {
    document.getElementById("header").style.fontSize = "90px";
  }
}
```
i css transition: 0.2s;
I jest git.
Dzięki za naprowadznie z tym transition.

Pozdrawiam

Podać stronę gdzie to znalazłem? Wypada czy nie bo się nie znam.

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