Offset-άγκυρα - CSS-Κόλπα

Anonim

Η offset-anchorιδιότητα ορίζει ένα σημείο μέσα στο πλαίσιο που εφαρμόζεται ως άγκυρα που κινείται κατά μήκος του offset-path.

Αυτό είναι κάπως λεκτικό, οπότε ας το αναλύσουμε λίγο.

Έχετε ένα στοιχείο, πείτε ένα κουτί:

Δείτε το Pen Orange Box από τον Geoff Graham (@geoffgraham) στο CodePen.

Θέλετε αυτό το κουτί να κινείται κατά μήκος ενός μονοπατιού, ας πούμε μια ευθεία γραμμή. Μπορούμε να κάνουμε αυτή τη γραμμή με το SVG απευθείας στο HTML και να το χρησιμοποιήσουμε ως το offset-pathγια το κουτί. Δημιουργούμε το animation κάνοντας χρήση της offset-distanceιδιότητας:

Δείτε το Pen Orange Square on Path από τον Geoff Graham (@geoffgraham) στο CodePen.

Καλα καλα. Τι γίνεται όμως αν θέλουμε το κουτί να μοιάζει να κρέμεται από τη γραμμή; Ξέρετε, σαν ένα άτομο να γλιστράει κατά μήκος μιας φερμουάρ.

Εκεί offset-anchorμπαίνει! Σημειώνει ένα σημείο στο στοιχείο και το χρησιμοποιεί για να τοποθετήσει το στοιχείο στη διαδρομή.

Ακολουθεί ένα παράδειγμα όπου τρία διαφορετικά πλαίσια είναι συνδεδεμένα στην ίδια διαδρομή σε διαφορετικά σημεία αγκύρωσης:

Δείτε το στυλό NMbEpy του Geoff Graham (@geoffgraham) στο CodePen.

Σύνταξη

.box ( offset-anchor: (auto | ); )

Αξίες

  • auto: Παίρνει την τιμή offset-positionόσο η τιμή δεν είναι επίσης autoκαι όσο offset-pathέχει οριστεί σε none.
  • position
    • : Μια μονάδα που υπολογίζεται από το σχετικό πλάτος και ύψος του δοχείου στο οποίο βρίσκεται. Για παράδειγμα, 50% 50%θα ήταν νεκρό κέντρο. Σημειώστε ότι οι λέξεις-κλειδιά εδώ, ακριβώς όπως background-positionόταν center centerθα επέστρεφε το ίδιο αποτέλεσμα.
    • : Μια μονάδα που αντισταθμίζει την άγκυρα από την επάνω αριστερή γωνία του κουτιού του στοιχείου.

Αξίζει να σημειωθεί ότι positionπρόκειται για μια κινούμενη ιδιοκτησία.

Υποστήριξη προγράμματος περιήγησης

Οι offset-*ιδιότητες εξακολουθούν να θεωρούνται πειραματικό χαρακτηριστικό κατά τη στιγμή αυτής της συγγραφής. Εάν η τρέχουσα έλλειψη υποστήριξης του προγράμματος περιήγησης σας κάνει να διστάσετε να το χρησιμοποιήσετε σε ένα έργο, τότε ίσως θελήσετε να εξετάσετε το ενδεχόμενο να χρησιμοποιήσετε το GSAP για αυτό το επίπεδο κινούμενης εικόνας. Αυτό θα σας προσφέρει την ευρύτερη υποστήριξη του προγράμματος περιήγησης αυτήν τη στιγμή.

Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.

Επιφάνεια εργασίας

Χρώμιο Firefox ΙΕ Ακρη Σαφάρι
46 72 Οχι 79 Οχι

Κινητό / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 Οχι

Από τα Chrome 46 και Opera 33 (και τις σχετικές εκδόσεις για κινητά) έχουμε "αρχική υποστήριξη" στο Blink (χωρίς σημαία).

Επιπλέον πληροφορίες

  • Προδιαγραφή επιπέδου 1 της ενότητας Motion Path
  • Εισιτήριο WebKit # 139128
  • Εισιτήριο Mozilla # 1186329
  • Αίτημα λειτουργίας Microsoft Edge