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

Kroki zmiany style="width: 100%" do 50% dla <img src...
RG
  • Rejestracja:około 5 lat
  • Ostatnio:około 18 godzin
  • 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:ponad 10 lat
  • Ostatnio:około 2 lata
  • Lokalizacja:Chorzów
  • Postów:1670
0

Pokaż tą funkcję.


Projektowanie i programowanie. Hobbystycznie elektronika i audio oszołom.
Maciej Cąderek
Maciej Cąderek
  • Rejestracja:ponad 9 lat
  • Ostatnio:ponad 3 lata
  • Lokalizacja:Warszawa
  • Postów:1264
1

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

edytowany 1x, ostatnio: Maciej Cąderek
Freja Draco
Freja Draco
  • Rejestracja:około 7 lat
  • Ostatnio:ponad 3 lata
  • 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


RG
  • Rejestracja:około 5 lat
  • Ostatnio:około 18 godzin
  • 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?

edytowany 1x, ostatnio: Radosław Głębicki
Freja Draco
Freja Draco
  • Rejestracja:około 7 lat
  • Ostatnio:ponad 3 lata
  • 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.


edytowany 1x, ostatnio: Freja Draco
RG
  • Rejestracja:około 5 lat
  • Ostatnio:około 18 godzin
  • 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.
Freja Draco
Freja Draco
Nie zaszkodzi. Może ktoś kiedyś będzie coś guglał i oszczędzisz mu minutę szukania :)

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.