animacja przy określonej wysokości przeglądarki

Question

Witam, chciałbym stworzyć animację która odpala się dopiero kiedy użytkownik zjedzie do danej sekcji.
Dlaczego ten kod nie działa a konsola wyświetla error że funkcja getBoundingClientRect() jest pusta. Z góry junior przeprasza za brak wiedzy :P
 

https://codepen.io/jakub-woowski/pen/ejzdez

Mam pomysł, wydaję mi się że po prostu ten kod nie dodaje mi klasy emph::before która odpowiada w sumie za tą animacje

Comments

tak przy okazji to nie jesteś w stanie wrzucić takiego kodu na Codepena? + html jeszcze

O wiele łatwiej by się pomagało i pewnie sporo szybciej dostałbyś odpowiedź :)

Answer 1

const contact = document.querySelector('contact__header');

a czy przypadkiem nie brakuje Ci gdzieś tutaj kropeczki? :P bo co to za selektor contact__header?

Comments

O dzizas faktycznie :D Ale mimo to animacja nie działa xd

---

a gdzie masz np zdarzenie scrollowania?
Jak chcesz żeby coś działo się po kliknięciu to podpinasz pod jakiś element listener, a teraz o ile dobrze rozumiem chcesz żeby coś działo się podczas scrollowania?
To też wypadałoby ogarnąć, bo tak to cały ten Twój kod odpala się tylko raz.

---

on ma się odpalać tylko raz. Mianowicie chodzi to że jak użytkownik przescroluje do sekcji to ma zadziałać efekt podkreślenia nagłówka i efekt tego pozostać.

---

no dobra, ale czy przypadkiem nie pobierasz pozycji scrolla tylko raz na starcie? czyli jak jest na samej górze i ma 0? :D

zapisujesz se w zmiennej to 0, ktoś scrolluje, scrolluje, nadal scrolluje a to 0 jest nadal zerem :D

---

a to jak to zrobić żeby sprawdzało cały czas  ? xd pętlą to zrobię ?

---

no przecież Ci już wyżej podpowiedziałam podczas jakiego zdarzenia powinieneś mieć to sprawdzane :P

---

proszę spojrzeć czy o to chodzi (chyba powinienem wrócić do tutoriali) :D

---

no co tu dużo pisać, konsola powie Ci wszystko...

---

już nie ma błędów 

---

powiem Ci, że już strasznie nakombinowałeś w tym kodzie.

Zastanów się dobrze, czego oczekujesz, co powinno się wydarzyć i nawet rozpisz sobie na kartce po polsku co i jak.

Albo przeczytaj sobie tak ze zrozumieniem swój kod, bo podejrzewam, że Ty sam nie wiesz, co tam się dzieje :D

Answer 2

window.addEventListener('scroll', function () {
	let h2 = document.querySelector('.contact__header')
	
	if(window.scrollY >= h2.getBoundingClientRect().top) {
		h2.style.transition = '3s all'
		h2.style.color = 'blue'
    } else {
		h2.style.color = 'red'
    }
})

Masz przykład działającego "mechanizmu" ze sprawdzaniem warunku.

Jak chcesz sprawdzić, czy działa w obie strony to po zeskrolowaniu w górę, naciśnij ctrl + - żeby oddalić stronę.

Answer 3

a przypadkiem nie musisz dodać do getBoundingClientRect() dodatkowej wartości window.scrollY?

contactHeight = contact.getBoundingClientRect().top + window.scrollY;

Po omacku trochę próbuję ale warto sprawdzić.

Comments

nope, to nie to ;D