Jo 7 kommenttia. Kommentoi sinäkin!
Taustakuvatesti on päivän sana. Tai linkki. Tuolla testisivulla on siis sellainen jännittävä efekti, jossa parin kuvatiedoston ja CSS-merkkauksen avulla on luotu kolmiulotteista menoa ja meininkiä. PNG-kuvatiedostot, jotka on tallennettu 24-bittisiksi ja osittain läpinäkyviksi (alpha channelilla) on sijoitettu toinen toisensa päälle.
Tällaisen efektin näin ensimmäistä kertaa jollakin englanninkielisellä nettisivustolla, jossa oli ikään kuin viidakon pöpelikköä toteutettu nettisivuston ulkoasuun tällä tavalla.
Samuel kirjoitti 18 päivää sitten:
Hahaha, you sure got my attention! Toi on kyllä kieltämättä helvetin tyylikäs. Käytetään vaikka tuota? Puutkin on tyylikkäitä.
Petri kirjoitti 18 päivää sitten:
Nööööy… Siis voihan tätäkin käyttää, mutta tarkoitin alunperin demonstroida sinulle sitä kolmiulotteisuutta, jota ajattelin siihen vaaleanpunaiseen ulkoasuun. Laitoin sinulle pari päivää sitten demoversion siihen sivustoon ja siinä olisi tarkoitus käyttää periaatteeltaan samaa kolmiulotteisuusefektiä kuin mitä tässä esitellään. Ääh. Suollan tänään tekstiä turhan tönkösti, mutta laitan kohta siulle mailia tämän tapauksen merkeissä.
Gocom kirjoitti 17 päivää sitten:
Prosentuaalisesti toistuva kuva ja toinen kuva ja toinen kuva… Siis täh? Mikä on tuon idea, siis muuta kuin olla vain kuvia, kuvien päällä. En silleen näe tuossa silleen mitään kolmiulotteista sinäänsä. Ja eipä tuota png:tä saa toimimaan mitenkään IE:llä sillä se toistuu. Tai saa javascriptin avulla, mutta samalla hajoaa jotain muuta, kuten position: absolute. Luultavammin.
Toisekseen liikkuvat pallot. Hmm, okei. prosenttien takia, mutta joo… Kuka muuten liikuttelee ikkunaa edes takaisin kuin addiktoitunut scrätcääjä dj jolla on vierotusoireita, tai epileetikko jonka käsi tärisyttää ikkunaa edestakaisin? :P
Tuosta tuli mieleen. Kuinkakohan moni selaa nettiä pienennetyllä ikkunalla ja kuinka moni kokoruudulla… Vaikuttaa suunnitteluun aikatavalla tuo seikka joo. Erityisesti taulukoita ja rajoittamatonta floattia/leveyttä/positionia käytettäessä. Ja tietysti korkeuttakin, erityisesti jos sivusto on suunniteltu selattavaksi oikealta vasemmalle, eikä ylhäältä alas.
Petri kirjoitti 17 päivää sitten:
Tuo on siis esimerkki, joka näyttää miten sen elävän taustakuvan saa toteutettua. Liikkuvien pallojen ja viivojen ja hahmojen tilalle voi rakentaa vaikka minkälaista… Täl’viisiin voisi laittaa esimerkiksi kaupungin rakennusten siluetteja vieretysten ja syvyyssuunnassa.
Selainikkunan koon säätäminen on kieltämättä aika harvinaista, mutta tällä tempulla saa joka tapauksessa luotua eri kokoisten selainikkunoiden käyttäjille omanlaisensa taustakuvan. :-)
Kimmo. kirjoitti 16 päivää sitten:
Tarkoittanet pöpeliköllä Silverback -sivuston parallax-efektiä? Tutoriaali How to recreate Silverback’s parallax effect selventää asiaa.
Petri kirjoitti 16 päivää sitten:
Jep! Tuo Silverbackin suunnalla käytetty efekti on juuri se mitä yritin apinoida. Niinhän se menikin. Siellä on sitä taustakuvatsydeemiä käytetty todella hyvin. Kannattaa kunkin käydä tarkastamassa tilanne osoitteessa www.silverbackapp.com niin näette miten se tositilanteessa toimii.
Timo L. kirjoitti 9 päivää sitten:
Yritin tehdä Silverlightilla vastaavaa, joka reagoisi hiireen liikkeisiin, mutten saanut kovin nättiä aikaiseksi. Täytynee yrittää paremmalla ajalla uudelleen.