jQuery animate onscrollTop και offset βαση selector πως γινεται?

[Ruhl]

Καλησπερα

 

Προσπαθω να καταλαβω πως μπορεις να κανεις κατι animate με jQuery οταν φτασει σε καποιο υψος του παραθυρου απο καποιο element selector και οχι fixed pixel αποσταση απο καποιο στοιχειο.

 

Στην ουσια αυτο που προσπαθω να δημιουργησω ειναι το παρακατω(εικονα): οταν φτανει σε καποιο υψος παραθυρου του εκαστοτε  section  το <h1> που ειναι ιδιο σε ολα η γραμμη απο κατω απο width: 15%; να πηγαινει width: 50%;

 

Προφανως αυτο που εχω στο JS δεν τρεχει αλλα εχω την υποψια οτι καπως ετσι φτιαχνεται , αλλα δεν ξερω αν μπορεις να επιλεξεις τα sudo ::after στην jQuery ? και αν ειναι να το φτιαξω καπως αλλιως το γραφικο με border bottom η κατι αλλο αν δεν επιλεγει τα ::after/before

 

Και τελος πως μπορω γλυτωσω το DRY κωδικα γιατι δεν ειναι οτι καλυτερο να το κανω copy paste για 4-5 sections γιατι  αλαζει μονο το selector για να αναγνωρισει σε ποιο υψος να ενεργοποιηθει.

 

https://codepen.io/ruhl/pen/gobzeG

 

 

 

[dominotrix]

Δοκιμασε αυτο

 

https://prinzhorn.github.io/skrollr/

 

Eχει και relative animate βαση ενος συγκεκριμενου element οποτε λογικα θα σε βοηθησει.

[παπι]

Δεν εχω γινει ακομα cssιστας αλλα δες

https://codepen.io/md5_1_/pen/KZwxXx

[vadou]

Μην προσπαθείς να αλλάξεις τα styles σε pseudo elements απευθείας με js, θα αποτύχεις. Αυτό που μπορείς να κάνεις είναι να αλλάζεις κάποιo class στο element που θες και με αυτόν τον τρόπο να αλλάζει styles στα before/after.

[Ruhl]

Ευχαριστω για τις απαντησεις

#dominotrix ειδα των κωδικα αλλα μου ειναι περιπλοκος δεν τα καταλαβαινω ολα για να παρω το κοματι που θελω(αν ενοουσες γενικα ολο το js αρχειο οχι θελω να το κανω με σκετη jQ χωρις να κανω καποιο import)

https://github.com/Prinzhorn/skrollr/blob/master/src/skrollr.js

 

Ακολουθησα τις συμβουλες του #vadou ετσι και πηρα το pen του #παπι(ευχαριστω) για να μην τα κανω πολυ περιπλοκα με after/before και εφτιαξα το effect που ελεγα αν κανεις scroll sto Hello Word 3 κανει αυτο που ηθελα.

 

https://codepen.io/ruhl/pen/WdvNZG

 

Τωρα το επομενο βημα ειναι να γλυτωσω το DRY 

σκεφτομε απο απλο προγραμματισμο μια:

 

συναρτηση σκρολλ( μεταβλητηΠαραμετροςΕνεργοποιησηID) {

 

ολο το js που εχω στο pen και να κανω μια τοπικη μεταβλητη το ID}

 

και 4 κλησεις της συναρτηση με διαφορετικα ID? πως σας φενεται? εχετε καποια καλυτερη ιδεα?

 

Και κατι ακομα γινεται να βαλω(πως?που   ) καποιο margin(fixed pixel) ωστε να ενεργοποιητε λιγο ποιο πανω απο το συγκεκρημενο id στο jQuery(οχι στην html)γιατι τωρα το βλεπω οτι ενεργοποιειται ακριβως στην μεση της οθονης.

 

edit εβαλα στο if (wScrollTop+200   φενεται να δουλευει απο ποιο πανω αλλα μηπως δεν ειναι το καταληλο σημειο για κατι τετοιο? ασχετα αν δουλευει.

 

Δεν εχω πολυ χρονο τωρα θα κανω τις δοκιμες αργοτερα και θα κανω update στο τοπικ.

[Ruhl]

Οκ το τελιωσα 

https://codepen.io/ruhl/pen/WdvNZG

 

Τωρα δουλευει οπως το ειχα σκεφτει,κατι αλλο να γλυτωσω οσο γινεται το DRY δεν σκεφτηκα αν θελει καποιος να μου πει αλλη προσεγγιση εστω και θεωρητικη θα χαρω να ακουσω την γνωμη του, αν σας ειναι χρησιμο το γραφικο αρχηστε τα κοπι παστα .

[dominotrix]

Τι εννοεις DRY ?

[Predatorkill]

Dont Repeat Yourself

[gsarig]

Το codepen που βλέπω δεν παίζει σε Firefox. Σε ό,τι αφορά τον τρόπο υλοποίησης, εντελώς θεωρητικά, θα έκανα τα εξής:

 

1. Πρώτα από όλα θα προτιμούσα ::before / ::after αντί για ένα κενό span. Γενικά δεν μου αρέσει ως πρακτική το να βάζω άδεια στοιχεία (divs/spans) καθαρά για διακοσμητικούς λόγους και όπου μπορώ προτιμώ τα pseudo elements. Έτσι κρατάς πιο καθαρή την html σου και διαχωρίζεις καλύτερα τους ρόλους όπου html = δομή και css = εμφάνιση.
2. Θα απέφευγα τα IDs και θα προτιμούσα να χρησιμοποιήσω μια class για να αναγνωρίζω τα στοιχεία που πρέπει να έχουν κίνηση.
3. Στην js θα πρόσθετα απλώς ένα class όταν το στοιχείο έφτανε στο επιθυμητό σημείο. Μάλιστα, θα προτιμούσα το class να μπει όχι στον τίτλο που θέλω να γίνει animate αλλά στον γονέα του. Ο λόγος είναι ότι με αυτό τον τρόπο μπορείς αργότερα αν το θελήσεις να δώσεις κίνηση και σε άλλα στοιχεία χωρίς να χρειάζεται να τροποποιήσεις την javascrit (μόνο με css).

Δες ένα πρόχειρο pen: https://codepen.io/gsarig/pen/VyLNEa

[Ruhl]

Το codepen που βλέπω δεν παίζει σε Firefox. Σε ό,τι αφορά τον τρόπο υλοποίησης, εντελώς θεωρητικά, θα έκανα τα εξής:

 

1. Πρώτα από όλα θα προτιμούσα ::before / ::after αντί για ένα κενό span. Γενικά δεν μου αρέσει ως πρακτική το να βάζω άδεια στοιχεία (divs/spans) καθαρά για διακοσμητικούς λόγους και όπου μπορώ προτιμώ τα pseudo elements. Έτσι κρατάς πιο καθαρή την html σου και διαχωρίζεις καλύτερα τους ρόλους όπου html = δομή και css = εμφάνιση.
2. Θα απέφευγα τα IDs και θα προτιμούσα να χρησιμοποιήσω μια class για να αναγνωρίζω τα στοιχεία που πρέπει να έχουν κίνηση.
3. Στην js θα πρόσθετα απλώς ένα class όταν το στοιχείο έφτανε στο επιθυμητό σημείο. Μάλιστα, θα προτιμούσα το class να μπει όχι στον τίτλο που θέλω να γίνει animate αλλά στον γονέα του. Ο λόγος είναι ότι με αυτό τον τρόπο μπορείς αργότερα αν το θελήσεις να δώσεις κίνηση και σε άλλα στοιχεία χωρίς να χρειάζεται να τροποποιήσεις την javascrit (μόνο με css).

Δες ένα πρόχειρο pen: https://codepen.io/gsarig/pen/VyLNEa

Πρωτα απο ολα ευχαριστω για τον χρονο σου και τις συμβουλες σου.

Ναι με pseudo after ξεκινησα αλλα δεν εχω καλη η γενικα γνωση jQuery απο οτι φενεται βαση τον τοσο απλοποιημενο κωδικα σου που ειδα στην προσεγγιση νιωθω σαν ανθρωπος τον σπηλαιων τωρα.Και για τα ID δικιο εχεις τυπικα τα εβαλα στο pen ,αν και παντα βαζω 1 id σε καθε section για μετα χρηση στην JS γιατι εκαναν καποιες επιλογες ποιο ευκολες οπως το scrollspy.

 

 

Και το 3 πολυ σημαντικο, γιατι σκεφτομουν σε καποια σημεια προσθηκη animation μετα το αρχικο.Κατι πανω σε αυτο αν θελω στο ιδιο container να κανει κατι fade in η να ερχεται απο καποιο σημειο(αριστερα/δεξια) απλα του βαζω μια καθυστεριση καποια milisec h sec μεσα στην if? αλλα αυτο με περιοριζει στο υψος scroll του container ,οποτε αν θελω για κατι ακομα ποιο κατω(1-2-3scroll) ακομα μια if με select τα επομενα στοιχεια για να παρει εκεινο το υψος?

 

Επισης μηπως γνωριζεις για ποιο λογο δεν τρεχει η δικια μου εκδοση σε firefox, δεν μπορω να το καταλαβω? δεν νομιζω οτι θελει καποιο prefix εκτος απο το transition που δεν εχει σημασια.

 

 

Κατι ακομα και στις 2 εκδοσεις εχει ενα μικρο bug επειδη ειναι fixed το μεγεθος +200 και αν πας πχ στο δικο σου τελευταιο στοιχειο ενεργοποιητε εντελως οπου νανε.Μετα το παρατηρησα και καπως οχι 100% αλλα πολυ κοντα στην θεση καταφερα να το λυσω με κατι τετοιο στον δικο μου κωδικα στο desktop chrome

var wScrollTopDistance = sPos+(sPos * 0.3);

(στην δικια σου εκδοση δοκημασα να το κανω και με τις 2 μεταβλητες δεν γινεται με τιποτα, μηπως θελει για περισσοτερη ακριβεια

αυτες τις 4 συναρτησεις?(ερωτηση ειναι δεν γνωριζω σε βαθος jQ)

.offset().top

.outerHeight()

.height()

.scrollTop()

)

Γιατι για καποιον λογο που δεν το καταλαβαινω ουτε αυτο,ενω τα νουμερα εχουν ολα ιδιες διαστασεις μεσω css οσο ποιο κατω κατεβαινεις γινoντε ποιο μεγαλα και βγαινει εντελως εως λιγο εκτος απο την πρωτη ενεργοποιηση?

 

Γενικα το 200 νουμερο αυτο ειναι επειδη δεν γινεται καποιες φορες να βαλεις το στοιχειο ακριβως στο view port εκεινο και θες λιγο ποιο πανω η ποιο κατω και αυτο σκεφτηκα.

[gsarig]

Αν και το έφτιαξα στα γρήγορα χωρίς να το τεστάρω ιδιαίτερα, δεν είδα να δημιουργεί το πρόβλημα που αναφέρεις. Το κοιτάζω τόσο σε chrome όσο και σε firefox και παίζει μια χαρά. Πάτα ένα refresh - πρόσθεσα και μια βοηθητική οριζόντια γραμμή που δείχνει πού ακριβώς είναι τα 200 pixels που έχω θέσει ως όριο (πάντα με ::before, για να μην μολύνουμε την html ). Στις δοκιμές που κάνω η αλλαγή δείχνει να γίνεται σωστά σε όλα τα slides.

 

Η τιμή 200 είναι αυθαίρετη. Την έβαλα μόνο και μόνο για να μην χρειάζεται να περιμένει μέχρι το κείμενο να φτάσει στην κορυφή της σελίδας για να αλλάξει, γιατί σε αυτή την περίπτωση δεν προλάβαινες να το δεις. Εάν, δηλαδή, το .slide div περιλάμβανε κι άλλα στοιχεία πάνω από το p που θες να κάνεις animate, θα μπορούσες να την αφαιρέσεις τελείως.

 

Όσο για την κίνηση σε άλλα στοιχεία, δεν χρειάζεται να πειράξεις καθόλου την js. Απλώς θα προσθέσεις έξτρα κλάσεις στα css σου που θα στοχεύουν στα άλλα στοιχεία και την καθυστέρηση θα την ορίζεις μέσα στο transition. Δες το τροποποιημένο παράδειγμα που ανέβασα - στο slide 3 εμφανίζεται άλλο ένα στοιχείο με καθυστέρηση 300ms, ωστε να φορτώνει αφού ολοκληρωθεί η υπογράμμιση του τίτλου.

 

Edit: Εβγαλα τελείως την τιμή 200 από την js και πρόσθεσα τα 200 pixels ως padding στο .slide - νομίζω πως είναι πιο σωστό να το χειρίζεσαι κι αυτό με CSS.

[Ruhl]

Ευχαριστω και παλι ,ναι ετσι πιστευω μεσω css καλυτερα, παντος εφαγα σκαλωμα για ποιον λογο δεν τρεχει το δικο μου σε firefox? κολαει η javascript σε καποια αναγνωριση ID η class στο class επειδη το επιλεγω με μικρο κενο ? πραγματικα δν μπορω να σκεφτω κατι και ουτε καν θα το εβλεπα αν δεν το ελεγες τωρα στα κοντα, στο τελος μονο αφου το τελιωνα ολο θα το προσεχα.

[gsarig]

Το δικό σου έχει το εξής λάθος: το .line είναι span, στο οποίο όμως έχεις δώσει στο css τιμές content: ''; και display: inherit;

 

Το content:''; είναι περιττό και το χρησιμοποιούμε σε pseudo elements (::before και ::after). Μάλλον ξέμεινε επειδή έκανες copy paste τον κώδικα από κάπου αλλού.

 

Αυτό που προκαλεί το πρόβλημα, όμως, είναι το display: inherit. To span από μόνο του είναι στοιχείο που έχει display: inline. Με το να του ορίσεις εσύ το display: inherit του λες να πάρει το display του γονέα του, δηλαδή στην προκειμένη περίπτωση του h1. Στο h1 για κάποιο λόγο έχεις δηλώσει display: table, οπότε και το span το κληρονομεί. Για να μπορέσει όμως το span να πάρει το πλάτος που θες, πρέπει να του ορίσεις το display:block (ή να αφαιρέσεις το display: table από το h1, μιας και το h1 έχει από προεπιλογή display: block).

[Ruhl]

Το δικό σου έχει το εξής λάθος: το .line είναι span, στο οποίο όμως έχεις δώσει στο css τιμές content: ''; και display: inherit;

 

Το content:''; είναι περιττό και το χρησιμοποιούμε σε pseudo elements (::before και ::after). Μάλλον ξέμεινε επειδή έκανες copy paste τον κώδικα από κάπου αλλού.

 

Αυτό που προκαλεί το πρόβλημα, όμως, είναι το display: inherit. To span από μόνο του είναι στοιχείο που έχει display: inline. Με το να του ορίσεις εσύ το display: inherit του λες να πάρει το display του γονέα του, δηλαδή στην προκειμένη περίπτωση του h1. Στο h1 για κάποιο λόγο έχεις δηλώσει display: table, οπότε και το span το κληρονομεί. Για να μπορέσει όμως το span να πάρει το πλάτος που θες, πρέπει να του ορίσεις το display:block (ή να αφαιρέσεις το display: table από το h1, μιας και το h1 έχει από προεπιλογή display: block).

 

Ναι μπλεχτικα στα copy paste γιατι το ξεκινησα με ::after και το παπι εκανε copy paste τον δικο μου κωδικα και προσθεσε δικα του χωρις χρηση psuedo elements και εγω εστιαζα στην jQ αγνοοντας html/css μιας και δουλευε οπως νανε μεσα στα σκατα και περιτο κωδικα

 

Ευχαριστω για την αναλυση