Wordpress -> Elementor κινούμενα (animated?) αντικείμενα

[koulouri]

Καλησπέρα στην ομάδα.
Δεν εχω πολλές γνώσεις στο αντικείμενο,
εψαξα πολύ πριν ποστάρω.
Πως μπορουν και βάζουν τετοια κινουμενα αντικείμενα, text που κινείται και εικόνα που παιζει σαν gif,
στην σελίδα τους που ειναι φτιαγμένη με elementor?
Δε βρήκα κανεναν οδηγο, σας παρακαλω, το ψάχνω μέρες
site που το ειδα: link

 

 

[losky89]

Ίσως να ψάξεις πως μπορείς να το κάνεις με κώδικα Javascript 

[kormos]

12 ώρες πριν, koulouri είπε

Καλησπέρα στην ομάδα.
Δεν εχω πολλές γνώσεις στο αντικείμενο,
εψαξα πολύ πριν ποστάρω.
Πως μπορουν και βάζουν τετοια κινουμενα αντικείμενα, text που κινείται και εικόνα που παιζει σαν gif,
στην σελίδα τους που ειναι φτιαγμένη με elementor?
Δε βρήκα κανεναν οδηγο, σας παρακαλω, το ψάχνω μέρες
site που το ειδα: link

 

 Αν αγοράσεις την Pro έκδοση θα μπορείς και εσύ...

 

 

[XPHSTOS_]

Η αλήθεια είναι πως κάτι "έτοιμο" δεν υπάρχει ούτε στον Elementor.
Αλλά δεν είναι κάτι δύσκολο να γίνει.
Δυστυχώς θα χρειαστεί να έχεις γνώσεις CSS animations και ίσως GSAP για να είναι πιο δυναμικό.

O "κύκλος" που κινείται φαινομενικά random, είναι ένα τετράγωνο όπου αλλάζει τα border radius του διαρκώς δημιουργώντας το effect του blob.
Απλό CSS animation, αν θέλεις το ίδιο μπορείς να το κάνεις κυριολεκτικά copy-paste από το site.

Τα γράμματα είναι επίσης απλά σαν animation αλλά έχουν ένα μικρό twist.
Πρέπει κάθε γράμμα να βρίσκεται μέσα σε ένα span (<span>Ι</span><span>α</span>...) έτσι ουτως ώστε να μπορείς να κάνεις το απλό CSS animation από scale 0 και opacity 0 σε scale 1 και opacity 1. Όλα αυτά με ένα μικρό delay μεταξύ των γραμμάτων.

Επειδή συνήθως θέλουμε το περιεχόμενο των τίτλων αυτών να είναι δυναμικό, δηλαδή να έρχονται από το διαχειριστικό όπως το έγραψε ο χρήστης και ο χρήστης δεν θα ήθελε να κάτσει να γράψει μια φράση με κάθε γράμμα μέσα σε span όπως έκανα παραπάνω εκεί έρχεται και κουμπώνει το GSAP για να αλλάβει και το αυτόματο διαχωρισμό της φράσης σε γράμματα μέσα σε span και το animation με πολλές περισσότερες δυνατότητες.

Εμπειρία μεγάλη με elementor δεν έχω αλλά ένα site που δούλεψα πριν κανένα 2μηνο σε αυτό, με την pro έκδοση, τέτοιου είδους animations δεν παρατήρησα.
Αν κάποιος το γνωρίζει με σιγουριά ότι γίνεται ίσως είναι η πιο εύκολη σου λύση.
Εναλλακτικά ξέρω ότι μπορείς να κάνεις παρόμοια πράγματα με το WebFlow.
Αλλά εκεί φεύγουμε από WordPress, πάμε σε άλλο διαχειριστικό.
Φυσικά μπορείς να κρατήσεις τον elementor που έχεις και απλά με το GSAP και λίγο κώδικα πραγματικά, έχουν πολλά παραδείγματα στο site τους, να φτιάξεις το παραπάνω.

[kormos]

Στις 21/9/2024 στις 10:07 ΜΜ, kormos είπε

 Αν αγοράσεις την Pro έκδοση θα μπορείς και εσύ...

 

 

Με Elementor Pro μπορείς να εμφανίσεις κινούμενα κείμενα.

Δείχνει να κάνει χρήση το https://wordpress.org/plugins/easy-textillate/

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

Η αλήθεια είναι πως κάτι "έτοιμο" δεν υπάρχει ούτε στον Elementor.
Αλλά δεν είναι κάτι δύσκολο να γίνει.
Δυστυχώς θα χρειαστεί να έχεις γνώσεις CSS animations και ίσως GSAP για να είναι πιο δυναμικό.

O "κύκλος" που κινείται φαινομενικά random, είναι ένα τετράγωνο όπου αλλάζει τα border radius του διαρκώς δημιουργώντας το effect του blob.
Απλό CSS animation, αν θέλεις το ίδιο μπορείς να το κάνεις κυριολεκτικά copy-paste από το site.

Τα γράμματα είναι επίσης απλά σαν animation αλλά έχουν ένα μικρό twist.
Πρέπει κάθε γράμμα να βρίσκεται μέσα σε ένα span (<span>Ι</span><span>α</span>...) έτσι ουτως ώστε να μπορείς να κάνεις το απλό CSS animation από scale 0 και opacity 0 σε scale 1 και opacity 1. Όλα αυτά με ένα μικρό delay μεταξύ των γραμμάτων.

Επειδή συνήθως θέλουμε το περιεχόμενο των τίτλων αυτών να είναι δυναμικό, δηλαδή να έρχονται από το διαχειριστικό όπως το έγραψε ο χρήστης και ο χρήστης δεν θα ήθελε να κάτσει να γράψει μια φράση με κάθε γράμμα μέσα σε span όπως έκανα παραπάνω εκεί έρχεται και κουμπώνει το GSAP για να αλλάβει και το αυτόματο διαχωρισμό της φράσης σε γράμματα μέσα σε span και το animation με πολλές περισσότερες δυνατότητες.

Εμπειρία μεγάλη με elementor δεν έχω αλλά ένα site που δούλεψα πριν κανένα 2μηνο σε αυτό, με την pro έκδοση, τέτοιου είδους animations δεν παρατήρησα.
Αν κάποιος το γνωρίζει με σιγουριά ότι γίνεται ίσως είναι η πιο εύκολη σου λύση.
Εναλλακτικά ξέρω ότι μπορείς να κάνεις παρόμοια πράγματα με το WebFlow.
Αλλά εκεί φεύγουμε από WordPress, πάμε σε άλλο διαχειριστικό.
Φυσικά μπορείς να κρατήσεις τον elementor που έχεις και απλά με το GSAP και λίγο κώδικα πραγματικά, έχουν πολλά παραδείγματα στο site τους, να φτιάξεις το παραπάνω.

 

[koulouri]

Πηρα κωδικους απο φίλο που εχει στο site του Elementor Pro εκδοση
και ειδα για τα animation οτι ειναι το LOTTIE..
Γενικα ευχαριστω παρα πολύ για τις απαντησεις σας!
Μια τελευταια για όσους γνωρίζουν!
Αν εχω (χομπίστας ειμαι, εχω γενικές γνώσεις πληροφορικής-προγραμματισμού πάνω από τον μέσω χρήστη αλλα όχι σε επαγγελματικό επίπεδο)
διάθεση να ασχοληθώ να φτιάξω το site της συντροφου μου,
αγορασω την Pro εκδοση €4.92/Mo Billed annually. Pay €59 today φτιαξω το site σε 1 μηνα (λεμε τωρα)
και μετά δεν ανανεωσω, σταματανε να λειτουργουν τα PRO features?
 

[friggs]

Δεν ξέρω για το συγκεκριμένο, αλλά συνήθως δεν σταματάει η pro έκδοση αλλά δε μπορείς να κάνεις update το plugin και κατά συνέπεια αργά η γρήγορα και το υπόλοιπο σάιτ γιατί μπορεί να μην είναι συμβατές οι εκδόσεις