Főoldali design 1. rész

Felhasznált technológiák:

  • jQuery
  • CSS3

Demo leírása:

Elkészítettem az első Főoldali demo oldalat, amely benne van a jQuery és a CSS3 technológiák. Ez egy összetett oldal. Nem is használom a grafikai munkát, kivéve nyilas gombok, azok külsőről letöltöttem. 5db Jquery rész van és teljesen CSS3-vel használtam fel a design beszabást.

jQuery-ról:

scroll: scripts/scroll-startstop.events.jquery.js

Ezt nem én írtam meg, hanem angol szakember és ez természetesen plugin. Bár ez plugin, mégis nincs benne valami licenc szöveg..., ellenére tisztelem ez programot és nem fogok változtatni, se módosítani, még azt se írni, hogy "én írtam ez a programot".

Müködése: Jobb oldalon van az alsó sarknál 2db nyíl gomb, egyik felfelé nyomja, másik pedig lefelé.

Referencia silde:

Ezt a programot természetesen én írtam és szeptemberben blogon cikket is feltöltöttem, mely található ez az információról és a leírásáról: http://blog.juszkocs.hu/2010/09/referenciak-slide-pelda-jquery-vel.html

Információ gomb:

Ez slide-s program. Megnyomod ez a gombot, kinyitja lefelé és megmutatja a szöveget. Amikor mégegyszer megnyomod ez a gombot, akkor lezárja.

Ez a programot én írtam.

5db felsőmenü:

Amikor hozzányúlod az egered, hoverálásakor effektusan fölfelé mozgatja és így meg tudod olvasni egy kis leírás a menüről. Ez a programot én írtam és természetesen slide-s program.

Nagykép és 5db bélyegkép váltó:

Van egy nagyképen lábjegyzet, ott 2 féle látható, egyik lépési/kiválasztó gomb, másik szövegdoboz. Amikor hozzáéred az egérrel a lábjegyzeten, ilyenkor automatikusan megjelenik az 5db bélyegkép, ki lehessen választani egy képet és automatikusan megjelenik. Amikor előző vagy következő nyílt gombot nyomod, pirossal jelezi a gomb, hogy hányadik képen vagy. 5db bélyegképet alapértelmezetten nem látja, de amikor az egér hoverálásakor megjelenik, az sokkal jobb és kényelmesebb, mert csakígy látod "teljesen és 100%"-osan nagy képet.

CSS3-ről:

Semmi extra, szokásosan gradient-vel, shadow-val és border-radius-val megoldottam.

Demo oldala:

http://dev.juszkocs.hu/old/Fooldal_demo_1_resz.html

Motivációm:

Ez volt a tervem, hogy dev.juszkocs.hu honlapon legyen a design terv, de most lett demo oldal. Miért meggondoltam magam? Azért mert CSS3 technológiák miatt nem minden böngészőn és verzión ugyanazon néz ki. Számomra a legfontosabb, hogy böngészőfüggetlen legyen. De addigis szeretném megmutatni mindenkinek, hogy mennyire képes vagyok készíteni CSS3 technológiával design beszabásaként és jQuery programot írni.

Megjegyzés küldése

0 Megjegyzések