Css3 animation

[Deadsell]

Καλησπέρα παιδιά.

Τώρα ξεκίνησα να δουλεύω την CSS3 μέσω Wordpress και να μου αρέσουν τα animation που έχει keyframes.

Αυτό που βρήκα είναι να κάνει ένα animation μετά από delay.

Εγώ αυτό που θέλω να κάνω είναι να γίνετε το animation on-scroll.. κατεβαίνοντας δηλαδή πιο κάτω να ενεργοποιηθεί και όχι με delay.

Σας παραθέτω τον css κωδικά μου .

.arxiki{
    text-align:center;
        opacity: 0.2;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;

}

@keyframes example {
  0%   { left:-350px; top:0px;}
  25%  { left:0px; top:0px;}
	}
.main-navigation a:hover {
    color:#ff0000;
	
}

 

[k33theod]

2 ώρες πριν, Deadsell είπε

Καλησπέρα παιδιά.

Τώρα ξεκίνησα να δουλεύω την CSS3 μέσω Wordpress και να μου αρέσουν τα animation που έχει keyframes.

Αυτό που βρήκα είναι να κάνει ένα animation μετά από delay.

Εγώ αυτό που θέλω να κάνω είναι να γίνετε το animation on-scroll.. κατεβαίνοντας δηλαδή πιο κάτω να ενεργοποιηθεί και όχι με delay.

Σας παραθέτω τον css κωδικά μου .

.arxiki{
    text-align:center;
        opacity: 0.2;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;

}

@keyframes example {
  0%   { left:-350px; top:0px;}
  25%  { left:0px; top:0px;}
	}
.main-navigation a:hover {
    color:#ff0000;
	
}

 

Πρέπει να χρησιμοποιήσεις javascript για να αντιδράσει στο event του scroll.  

Αυτό γίνεται γιατί τα animation ξεκινάνε default με το που φορτώνει το css.

Πού γράφει κανείς css και js στο wordpress; ☹️

 

Επεξ/σία 10 Σεπτεμβρίου 2020 από k33theod

[Deadsell]

4 λεπτά πριν, k33theod είπε

Πρέπει να χρησιμοποιήσεις javascript για να αντιδράσει στο event του scroll.  

Αυτό γίνεται γιατί τα animation ξεκινάνε default με το που φορτώνει το css.

Πού γράφει κανείς css και js στο wordpress; ☹️

javascript δεν ειμαι σιγουρος που γραφει καποιος στο WP. Css γράφει στο costumize και μετά additional css

[k33theod]

Το έχω προσπαθήσει και εγώ αλλά τίποτα.  To WP είναι απίστευτα δύσκολο για οτιδήποτε custom. 

[Deadsell]

49 λεπτά πριν, k33theod είπε

Το έχω προσπαθήσει και εγώ αλλά τίποτα.  To WP είναι απίστευτα δύσκολο για οτιδήποτε custom. 

από οτι έψαξα.. μπορείς να χρησιμοποιήσεις JS μέσα στο Header and Footer που είναι plugin του WP. Απλά δεν ξέρω πως να το κάνω γιατι ειμαι αρχάριος στη JS

[XPHSTOS_]

9 hours ago, k33theod said:

Το έχω προσπαθήσει και εγώ αλλά τίποτα.  To WP είναι απίστευτα δύσκολο για οτιδήποτε custom. 

Νομίζω υπερβάλεις λιγάκι
Προφανώς αν δεν γνωρίζεις το αντικείμενο είναι δύσκολο αλλά κάποιον developer είναι εξαιρετικά απλό.

 

8 hours ago, Deadsell said:

από οτι έψαξα.. μπορείς να χρησιμοποιήσεις JS μέσα στο Header and Footer που είναι plugin του WP. Απλά δεν ξέρω πως να το κάνω γιατι ειμαι αρχάριος στη JS

Χρειάζεσαι javascript για να πετύχεις αυτό που θέλεις..
Υπάρχει ο "δύσκολος" τρόπος και ο εύκολος..
Ο εύκολος είναι με αυτό: https://scrollmagic.io

ψάξε για wp_enqueue_scripts και θα βρεις αρκετά παραδείγματα για το πως να φορτώσεις δική σου javascript στο wordpress

[k33theod]

Ένας τρόπος για να γίνει είναι να ορίσεις το animation play state σε paused και να το ενεργοποιήσεις με onscroll

Λειτουργικός κώδικας εδώ https://codepen.io/k33theod/pen/YzqLQKm

Πως αυτό θα μεταφερθεί σε WP 🙃

[Deadsell]

56 λεπτά πριν, k33theod είπε

Ένας τρόπος για να γίνει είναι να ορίσεις το animation play state σε paused και να το ενεργοποιήσεις με onscroll

Λειτουργικός κώδικας εδώ https://codepen.io/k33theod/pen/YzqLQKm

Πως αυτό θα μεταφερθεί σε WP 🙃

ωραιος τροπος... και ευκολος σχετικά. μπήκα στο cpanel στα αρχεία μου και μετά στο theme και μετά στο functions.php . Από οτι διάβασα εκεί μπαίνουν όλες οι JS. Μου βγάζει ένα error όμως 

Επεξ/σία 12 Σεπτεμβρίου 2020 από Deadsell

[XPHSTOS_]

10 hours ago, Deadsell said:

ωραιος τροπος... και ευκολος σχετικά. μπήκα στο cpanel στα αρχεία μου και μετά στο theme και μετά στο functions.php . Από οτι διάβασα εκεί μπαίνουν όλες οι JS. Μου βγάζει ένα error όμως 

Αν αυτό το γράφεις στο functions.php είναι λογικό να σου βγάζει error.
Αυτό πρέπει να είναι σε αρχείο .js και να το κάνεις enqueue μέσα από το functions.php

[Deadsell]

14 ώρες πριν, XPHSTOS_ είπε

Αν αυτό το γράφεις στο functions.php είναι λογικό να σου βγάζει error.
Αυτό πρέπει να είναι σε αρχείο .js και να το κάνεις enqueue μέσα από το functions.php

προσπαθησα να το ψαξω ετσι οπως λες αλλα δεν βγαζω ακρη με αυτον τον κωδικα γιατι δεν ξερω απο JS και πολλα

[k33theod]

Ότι είναι μέσα σε php tags πρέπει να είναι έγκυρος php κώδικας. Κλείσε το tag ?>  και μετά αν θες το ξαναανήγεις <?php

Επεξ/σία 13 Σεπτεμβρίου 2020 από k33theod

[Επισκέπτης]

Α εγώ δε θα το έψαχνα και πολύ.

Θα άνοιγα το header.php στο wp_theme μου και θα τα έβαζα μέσα στο header τα js που θέλω

Επεξ/σία 13 Σεπτεμβρίου 2020 από Επισκέπτης

[Deadsell]

6 ώρες πριν, k33theod είπε

Ότι είναι μέσα σε php tags πρέπει να είναι έγκυρος php κώδικας. Κλείσε το tag ?>  και μετά αν θες το ξαναανήγεις <?php

εβγαλα άκρη και δούλεψε!!! πως μπορώ να προσθέσω κι άλλες κλάσεις css να το κάνουν αυτό μεσα στο js?

[k33theod]

Για πες πως το έκανες το χειάζομαι και εγώ

To καλύτερο είναι να δώσεις ένα έξτρα όνομα στην κλάση με κενό πχ class ="class_name animate_name " Ότι css έχει να κάνει με animation το μεταφέρεις κάτω από .animate_name μετά μπορείς με απλή js να πάρεις όλα τα στοιχεία που θες να κανουν animation με document.querySelectorAll('.animate_name') και μετά σε for loop τους βάζεις τον event Listener

Επεξ/σία 14 Σεπτεμβρίου 2020 από k33theod

[gsarig]

Μια πολύ απλή υλοποίηση που είχα φτιάξει πριν από κάτι χρόνια: https://codepen.io/gsarig/pen/YzqvezY

(την επόμενη φορά που θα το χρειαστώ θα το μετατρέψω σε καθαρή js για να ξεφορτωθώ την εξάρτηση της jQuery)