MagyarmagyarGörgetési sorozat: rögzített szakaszok a képkockák fölött
Szöveg vagy widget rögzítése a sorozat fölé két képkockaszám között: azonosító, Indítás és Vége, pozíció és animációk.
Egy képsorozat önmagában dísz. Történetté a megfelelő pillanatban megjelenő szöveg teszi: egy sor, amely mozdulatlanul áll a képkockák fölött, majd átadja a helyét a következőnek. A Görgetési sorozat widget Rögzített szakaszok funkciója ezt csinálja: megadod egy widget CSS IDját és azokat a képkockaszámokat, amelyek között látszania kell. A widget alapjait az áttekintő fejezet írja le.
Szükséged van számozott képkockákra, és a sorozatot tartalmazó szakasznak vagy tárolónak legyen Min magassága, különben nincs mit végiggörgetni.
Adj azonosítót a tartalmi widgetnek
Szekció neve “Adj azonosítót a tartalmi widgetnek”- Add a rögzíteni kívánt widgetet (például Címsor vagy Szövegszerkesztő) ugyanabba a szakaszba vagy tárolóba, ahol a Görgetési sorozat widget van.
- Jelöld ki, nyisd meg a Haladó fület, és írj egy nevet a CSS ID mezőbe. Használj betűket és számjegyeket, szóköz nélkül, például
capA. - Ugyanezen a fülön állítsd a Z-Index értékét a sorozaténál magasabbra. A sorozat saját Z-Index értéke a Stílus fülön 0-ról indul, így az 1-től felfelé bármi a tartalmat előre hozza.
Állítsd be a rögzített szakaszt
Szekció neve “Állítsd be a rögzített szakaszt”- Jelöld ki a Görgetési sorozat widgetet, és nyisd meg a Tartalom fül Egyéb opció szakaszát.
- Kapcsold be a Rögzített szakaszok kapcsolót. Bekapcsolva Megjelenítés a felirata.
- Kattints az Elem hozzáadása gombra, és töltsd ki a sort.
A képen a Szakasz ID, az Indítás, a Vége, a Fent (%), az Animáció indítása és az Animáció befejezése mező látszik az első sorban.
| Mező | Mit írj bele |
|---|---|
| Szakasz ID | A tartalmi widgetnek adott CSS ID, # nélkül |
| Indítás | Az a képkockaszám, amelynél a tartalom megjelenik. A képkockaszámok 1-től a sorozat képeinek számáig futnak |
| Vége | Az a képkockaszám, amelynél a tartalom eltűnik |
| Fent (%) | Milyen messze van a képernyő tetejétől rögzítve, a nézetablak százalékában. A 10 a teteje közelébe teszi, a 65 nagyjából kétharmadra lefelé. Alapérték: 5 |
| Animáció indítása / Animáció befejezése | Elhagyható belépő és kilépő effekt. Az alapérték mindkettőnél Nincs, ilyenkor a tartalom egyszerűen megjelenik és eltűnik |
Az Animáció indítása választékai: Nincs, Előtűnés, Előtűnés alulról, Előtűnés felülről, Előtűnés balról, Előtűnés jobbról és Beforgatás. Az Animáció befejezése lista ugyanezek a kilépő változatok, a legördülőben látható felirataikkal.
Minden további tartalomhoz kattints újra az Elem hozzáadása gombra. Mindegyiknek saját CSS ID és saját sor kell. A sor fejlécében a Szakasz ID látszik, így a sorok könnyen megkülönböztethetők.
Hogyan viselkedik
Szekció neve “Hogyan viselkedik”A teszt egy 12 képkockás sorozat volt két felirattal. Az elsőnél az Indítás 2, a Vége 5, a Fent (%) 8; a másodiknál az Indítás 8, a Vége 11, a Fent (%) 65.
A képen a 4. képkockánál az első felirat a képernyő tetején áll.
A képen a második felirat vette át a helyet, és lejjebb áll, mert a Fent (%) értéke 65.
- Az Indítás és a Vége között a tartalom a Fent (%) pozícióban marad, miközben mögötte a képkockák váltakoznak.
- A tartományon kívül rejtett, és akkor is újra rejtett, ha a látogató továbbgörgetett a teljes sorozaton.
- Visszagörgetve ugyanazok a képkockák fölé visszatér.
- A tartományok átfedhetnek: két olyan sor, amelynek az Indítás és Vége tartománya keresztezi egymást, egyszerre rögzül, mindkettő a saját Fent (%) pozíciójában.
Korlátozások
Szekció neve “Korlátozások”- Az Indítás és a Vége képkockaszám, ezért csak a saját képkockaszámodhoz képest van értelme. Ha módosítod a képek számát, minden sort újra át kell nézni.
- A szerkesztőben az Indítás mező leírása azt mondja, hogy „nézetablakban vagy px-ben megadva”. Ez a leírás téves: a mező mellett lévő súgószöveg és a tényleges viselkedés is képkockaszámot használ.
- A Rögzített szakaszok csak a widgettel azonos szakaszon vagy tárolón belüli tartalmat rögzíti.
- A szerkesztőben nincs előnézet a rögzített állapotról, ezért a közzétett oldalon ellenőrizd.
Hibaelhárítás
Szekció neve “Hibaelhárítás”A tartalom sosem jelenik meg. Ellenőrizd, hogy a Szakasz ID pontosan egyezik a widget CSS IDjával, a nagybetűkkel együtt, és hogy nem írtad elé a # jelet.
A tartalom a képkockák mögött jelenik meg. Emeld a tartalmi widget Z-index értékét a Haladó fülön. A sorozat alapból 0-n áll.
A tartalom csak felvillan. Az Indítás és a Vége túl közel van egymáshoz, vagy a szakasz túl alacsony. Szélesítsd a képkockatartományt, vagy emeld a szakasz Min magasságát, hogy több görgetés jusson egy képkockára.
Semmi sem mozdul. A szakasznak vagy tárolónak olyan Min magasság kell, amelyet végig lehet görgetni.
Készült: