Új hozzászólás Aktív témák
-
-
Üdvözlet!
JS-ben megírt animációkat konvertálok éppen CSS-re, ha már elvileg ott kéne csinálni az ilyeneket
Egy a dolog lényege, mindig JS indítja őket, mert kliens interakció szükséges hozzájuk. Csak egyszer futnak le, ez fontos.
Ezt én úgy oldom, meg, hogy egy adott elemnek van egy adott CLASS meghatározása, és JS segítségével hozzáadok megint egyet, azt, ami tartalmazza az animácó meghívást, így gyönyörűen működik is.Viszont! Mi van akkor, ha ezeket az animációkat (legyen ez mondjuk egy felugró ablak) visszafelé is el akarom játszani, mondjuk amikor JS-el elveszem az adott CLASS-t tőle?
Megoldásnak gondoltam, hogy elveszem, de egyidőben hozzáadok egy másikat, ami visszafelé játssza el, majd elveszem azt is. Csakhogy, ehhez már a JS-t is időzíteni kell. És szerintem feleslegesen bonyolult.Kérdésem tehát az, hogy lehetséges-e valamilyen módon kivitelezni, hogy a CLASS elvételkor lejátsszon egy másikat, vagy ugyan azt, visszafelé?
Előre is köszönöm bárminemű válaszaitokat, remélve, hogy érthetően meg tudtam fogalmazni a fejemben lévő káoszt
But who is watching the guardians?
-
Üdvözlet, remélem nem hiába, bár kellőképpen kihalt eme topik.
Kérdésem viszont akkor is ide tartozik.
Beállítottam egy generált hátteret, CSS-ben adtam meg:
html {
background: linear-gradient(to right, rgba(0, 255, 0, 0.5), rgba(255, 0, 0, 0.5));
}Nagyon szép és jó, amíg el nem kezdek lefelé görgetni. Az oldal megjelenési magasságának 100%-a alatt az alábbi elszíneződés tapasztalható:
A kifotózás a megjelenő kép jobb oldalát átrázolja, aminek alsó részén látható az említett probléma. Érdekességként, ha háttérképet (tényleg képet) állítok be és azt paraméterezem, hogy ott marad, ahol van, hiába görgetek, akkor az működik. Ugyan azon beállítások viszont itt nem.
Próbáltam összedobni egy JSFiddle-t is. Nem tudja megfelelően lekezelni ezt az utasítást.
Remélem kapok segítséget. Köszönöm!
[ Szerkesztve ]
But who is watching the guardians?
-
martonx
veterán
Ha itt szétnézel az remélem segít: html - How to have background gradient fill entire page? - Stack Overflow
Guglizás az élet.Én kérek elnézést!
-
-
nevemfel
senior tag
válasz lanszelot #2862 üzenetére
Megnéztem a videót, de a css-es rész kipróbálásához a Chrome Canary verziója szükséges, plusz még engedélyezni kell a flagek közt az "Experimental featurest". A meló-gépemet meg nem szívesen használnám kísérleti nyúlnak.
Egyékként úgy látom, hogy ez az egész popover + anchor html-ből, css-ből eléggé kiforratlan még, leginkább csak a Chrome ismeri, úgyhogy szerintem ha majd minden mainstream böngészőben implementálva lesz, akkor lesz érdemes visszatérni a témára.
Rally against apathy draws small crowd
-
lanszelot
addikt
válasz nevemfel #2863 üzenetére
Először is köszönöm szépen a választ.
Már nem kell hozzá a Chrome Canary verzió.
És azóta 70% os a támogatás.
Ha megnézed mikori a videó, az is mutatja, és a srác is mondja hogy nagyon gyorsan dolgoznak rajta.A html ben lévő anchor teljesen jól működik. (Ha kell azt a kódot is be linkelem külön. 3-4 sort kell átírni csak.)
Csak mikor megmutatja hogy css -el is lehet onnantól valamiért eltűnik, display none lehet valamiért vagy képernyőn kívülre kerül, de nem látom mi teszi rá.
Valamit elírhattam, csak nem látom. -
martonx
veterán
válasz lanszelot #2864 üzenetére
popover - HTML: HyperText Markup Language | MDN (mozilla.org)
Itt van egy csomó példa. A böngésző támogatás is alakul (FF még nem támogatja). Chrome, Safari is csak pár napja.Én kérek elnézést!
-
lanszelot
addikt
válasz martonx #2865 üzenetére
Hello,
FF is támogatja, csak be kell kapcsolni.
Chrome már akkor is támogatta amikor felírtam az első hozzászólásom.A kérdésem nem a popover-el kapcsolatos, hanem az anchor css -ben használva eltűnik a felugró ablak. Ott a linkben a program. Ha viszont html-ben van az anchor akkor jól működik.
-
lanszelot
addikt
válasz Rat.Sand #2867 üzenetére
Hello.
Még nem tudom mi a hiba, de már tudom hol van.
Css -ben ha az alap formázást kitörlöm, akkor mind a kettő működik.
Ha hozzá adom egyik se.
itt az anchor html -ben [link]
itt az anchor css-ben [link]Tehát valahol az alap formázást rontottam el, amiatt nem látszik a felugró ablak.
No, de hol?
42-44 -ig body hight 150 ez okozza
de még anélkül se tökéletes, mert kilóg[ Szerkesztve ]
-
lanszelot
addikt
válasz Rat.Sand #2871 üzenetére
Hello,
Fentebb írtam: firefoxban engedélyezni kell a popover-tMind a két kód hibás, azért írtam ide.
Nem a gombhoz pozicionál, hanem a body-hoz. Ez a gond, ezért írtam ide.
Valami hiányzik. A gombhoz nem pozicionáltam az anchor-t és ez a gond, de nem tudom hogy kell.Ne a támogatást nézd, azzal nincs gond, a kód rossz. Hiányos.
Az alap formázás 0:40-nel van a videóban.
A "btn" -hez kell pozicionalni a popover-t és ennyi.
Valamit elírtam, de nem tudom mit. nem veszem észre.[ Szerkesztve ]
-
lanszelot
addikt
válasz Rat.Sand #2874 üzenetére
Először is köszönöm szépen a választ.
Igen azt tudom, de nem tudom miért.
Ezért kérdeztem itt.
Tudom, hogy valamit kihagytam.bottom: anchor(top);
left: anchor(center);
Ez nem érvényesül, de nem tudom miért.
És nem tudom hogyan kell a button-hoz igazítani a popover-t.
Így hiába nézegetem.
Kerestem, de nem találom, mert igazából azt se tudom mi az a megadás : valami zárójalben valami
Így hiába nézem, nem tudom mi nem jó.De ha HTML-ben van akkor se jó, mert akkor se a button-hoz igazodik, hanem a boyd után valamihez. Talán a html-hez ,de csak találgatok.
Viszont, hogy miért fogalmam sincs. -
lanszelot
addikt
Hello,
[link] Ebben miért villog a villám?
284 -ik sornál van az animáció hosza, de hol az animáció? -
indigo
aktív tag
válasz lanszelot #2876 üzenetére
Azért villog, mert erről az oldalról lett a CSS-hez 'kölcsönvéve' a villámlás effekt, amely a flash a fenti oldalon.
Ha megnézed a HTML 301. és 303. sorát, láthatod a flash osztályt. Ha magad írod a HTML kódját, akkor beírod az alábbi hivatkozást és használod a villámlás effektet:https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css
-
lanszelot
addikt
Először is köszönöm szépen a választ.
Kimásoltam, és megnéztem.
A villám és a csillag animáció nincs beírva a kódba.
Nem értem miért. Egyszerű opacity állítás.
Minek ahhoz egy külső css.
Mert ha mind onnan szedte volna megértem, de így....Amúgy másként működik, mert csak villognak. Pdeig ctrl+a ctrl+c ctrl+v vel csináltam.
Annyi, hogy a xmlns -t fel raktam a html-be , mert oda való.
Fura. -
lanszelot
addikt
Hello,
Miért nem teszi rá a padding-et az "options"-okre?
[link]
Tableten telefonon ráteszi, csak számítógépen nem. -
inf3rno
nagyúr
Sziasztok!
Az érdekel más hogyan oldja meg. A következő az oldal: van egy stickly navbar bootstrappel, alatta a teljes bemutatkozó oldal, szolgáltatások, árak, stb. A navbaron van a menü "a href=#...". Az oldalaknál "a name=..." van, amire a menü mutat. Az a kínom, hogy a tartalomnál az alcímek becsúsznak a navbar alá. Most fapadosan betettem néhány sortörést, az "a name=..." után, és csak utána van a tényleges alcím, de tök jó lenne, ha lenne valami nem ennyire gányolt HTML+CSS megoldása a dolognak. Valaki?[ Szerkesztve ]
Buliban hasznos! =]
-
Új hozzászólás Aktív témák
- -59% HP EliteBook x360 830 G7:i5 10310U,16GB,256GB,vil.MAGYAR bilI.,IR,13.3" Touch,100%sRGB,WWAN 4G
- Sony PS5 (1116A) + 2TB Samsung SSD bővítés a gyári 825GB mellett, két karral + venom töltőhub
- HP Laptop 15-fd051ne - ÚJ - 15,6" FullHD IPS notebook - Core i5-1335U, 8GB, 512SSD, Win11
- Brother DCP-L2532DW wifis, multifunkciós lézernyomtató
- HP Pavilion x360 14-ek Convertible - ÚJ - 14" TOUCH notebook - i5-1235U, 16GB, 512SSD, Win11
- DJI Avata 2 Fly More Combo (Three Batteries)
- Intel Core I5-8600
- Akció! Dell Optiplex 3080 Micro / I5-10500T / 16GB DDR4 / 256GB SSD /Windows11 Matrica BESZÁMÍTOK
- ASUS Radeon RX 5700 XT Dual EVO 8GB GDDR6
- Videoton AB 1010 autó hangszóró pár eladó a képeken látható állapotban. Mindegyik hangszóró működik,
Állásajánlatok
Cég: Ozeki Kft.
Város: Debrecen
Cég: Alpha Laptopszerviz Kft.
Város: Pécs