Cikkajánló
Hasznosabb kódokat már jó régen nem hoztam, így ma összedobtam három féle új script-et. A kódok előnézeti képei láthatóak a kiemelt képen. Kettő darab project dobozt készítettem. Ebből az
A design színvilága is egy nagyon-nagyon fontos dolog egy weboldal beindításában. Egyáltalán nem mindegy, hogy milyen színeket, mennyit és hogyan alkalmazunk egy oldalon. Nem tudom, ti hogy vagytok vele,
Igazából ezzel a kicsike programmal azt lehet letesztelni, hogy kisebb vagy nagyobb felbontásban az oldalatok kinézete vagy azon elhelyezett menük, galéria képek, üdvözlő üzenetek nem-e csúsznak el más felbontásokban.
Instagram doboz weboldalra Project dobozok és egy Elit csere effekt Elit csere effekt szöveggel és képekkel Lana Del Rey és Kylie Jenner G-Portálos témák Maisie Williams G-Portálos téma
Képváltó kód 01.


Javascript kód
A .js fájlokat töltsétek le, majd töltsétek fel a tárhelyetekre, az URL címét pedig cseréljétek le a kódban. Kiemeltem az URL részt a Javascript kódban.
G-Portálosoknak: A .js fájlokat oldaladon a Médiatárba töltsd fel!
kepvalto-fejlec-script-01.js, kepvalto-fejlec-script-01-01.js
 

<script src="/js/kepvalto-fejlec-script-01.js"></script>
<script src="/js/kepvalto-fejlec-script-01-01.js"></script>


Képváltó kódja
Akkor lesz szép a script, ha minden képed egyforma nagyságú!!!
 

<div id="slideshow">
 <img alt="" class="active" src="/images/scripts/kepvalto-fejlec/01/001.png" />
<img alt="" src="/images/scripts/kepvalto-fejlec/01/002.png" />
<img alt="" src="/images/scripts/kepvalto-fejlec/01/003.png" />
<img alt="" src="/images/scripts/kepvalto-fejlec/01/004.png" />
</div>


CSS kód
 

<style type="text/css">
#slideshow {
    position:relative;
    height:500px; /* képeid magassága */
}
#slideshow IMG {
    position:absolute;
    top:0; /* mennyi pixellel legyen lejjebb a kép a lap tetejétől */
    left:100; /* a lap bal oldalához képest mennyivel legyen jobbra a kép */
    z-index:8;
    opacity:0.0;
}
#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}
#slideshow IMG.last-active {
    z-index:9;
}</style>

lindadesign Hozzászólások
2 104 megtekintés

Hozzászólások