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

Kroki zmiany style="width: 100%" do 50% dla <img src...
Radosław Głębicki
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Sardine, Italy
  • Postów: 187
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

katakrowa
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Chorzów
  • Postów: 1670
0

Pokaż tą funkcję.

Maciej Cąderek
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Warszawa
  • Postów: 1264
1

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

Freja Draco
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 3394
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

Radosław Głębicki
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Sardine, Italy
  • Postów: 187
0

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

Freja Draco
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 3394
1

To z transition to tylko przykład.

Kopiuj
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.

Radosław Głębicki
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Sardine, Italy
  • Postów: 187
0

ok. Znalezione w otchłaniach internetu:

Kopiuj
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.

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.