Ákos mai cikkéből megtudhatjuk, hogyan tudjuk megoldani tetszőleges oldalelemre, hogy "kivilágosodjon", "előtűnjön".
Az effektet JQuery segítségével oldjuk meg, ami beszerezhető itt!
1. A HTML felépítése
A dokumentumba a letöltés után meg kell csinálnunk a kapcsolatot a JQuery-hez.
<script type="text/javascript" src="js/jquery-1.3.min.js"></script>
Amennyiben nem a fenti helyre mentjük, akkor az útvonalat természetesen aktualizálni kell.
2. Saját Scriptek elkészítése
Hozzuk létre a custom.js állományt, tetszőleges szövegszerkesztővel, illetve akár a DreamWeaverben, vagy bármilyen html szerkesztővel.
Mentsük ezeket is a js mappába. A fájl tartalma legyen a következő:
// JavaScript Document
$(function() {
//MINDEN BEÁLLÍTÁSA 70% OPACITÁSRA
$("#text").css("opacity","0.7");
// EGÉR RÁVITELÉNEK KEZELÉSE
$("#text").hover(function () {
// ÁTLÁTSZÓSÁG 100%-RA ÁLLÍTÁSA
$(this).stop().animate({
opacity: 1.0
}, "slow");
},
// EGÉR LEMOZGATÁSÁNAK KEZELÉSE
function () {
// OPACITÁS VISSZAÁLLÍTÁSA 70%-RA
$(this).stop().animate({
opacity: 0.7
}, "slow");
});
});
Hozzuk létre a custom2.js állományt, a következő tartalommal:
// JavaScript Document
$(function() {
//MINDEN BEÁLLÍTÁSA 50% OPACITÁSRA
$(".szurkul").css("opacity","0.5");
// EGÉR RÁVITELÉNEK KEZELÉSE
$(".szurkul").hover(function () {
// ÁTLÁTSZÓSÁG 100%-RA ÁLLÍTÁSA
$(this).stop().animate({
opacity: 1.0
}, "slow");
},
// EGÉR LEMOZGATÁSÁNAK KEZELÉSE
function () {
// OPACITÁS VISSZAÁLLÍTÁSA 50%-RA
$(this).stop().animate({
opacity: 0.5
}, "slow");
});
});
3. A html-hez csatoljuk a két új scrip-et is:
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="js/custom2.js"></script>
A custom.js script azt csinálja, hogy minden text azonosítóval rendelkező elemet kezdésként átlátszóva tesz, majd az egér rá vitelekor, megszünteti az átlátszóságot.
A custom2.js script azt csinálja, hogy minden szurkul osztályba tartozó elemet kezdésként átlátszóva tesz, majd az egér rá vitelekor, megszünteti az átlátszóságot.
4. Script beállítási lehetőségek
a. $(".szurkul")rész
Azt jelzi, hogy mire vonatkozik a script
• ”.osztaly neve” ->html kódban: class=”osztaly neve” – ha több elemre szeretnénk alkalmazni, akkor ez a megoldás a célszerű.
• ”#azonosito neve” ->html kódban: id=”osztaly neve”
• 200 és 600 millimásodperc közötti érték lehet
b. "slow" rész
Az átalakulás időtartama:
• ”fast” ->gyors
• ”slow”->lassú
• ”200 és 600” milli másodperc közötti érték lehet
c. ("opacity","0.5");
1.0 a 100% opacitás, a nem átlátszó, a 0.8 opacitás érték 80%-os átlátszóságot jelent.
d. Amennyiben több különböző elemre, vagy többféle beállítást szeretnénk alkalmazni
Több custom.js állományt kell elkészítenünk ( más-más névvel ), módosítani kell bennük a fenti megoldásokkal, hogy mire vonatkozzon, és a kívánt módokra kell beállítani az opacitás és az animáció beállításait.
5. Létrehozzuk a html-ben a fenti elemeket.
A minta állományból néhány elem:
<a href="#"><img src="images/01.png" alt="aetuts" class="szurkul" border="0" height="83" width="121"></a>
<div id="text"><p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras
id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis
varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus
nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci
ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra
condimentum, lorem tellus eleifend magna, eget fringilla velit magna
id neque. </p></div>
Természetesen az így előkészített oldalelemeket érdemes linké átalakítani.
A forrás:
http://www.hv-designs.co.uk/2009/01/19/jquery-fade-infade-out/
http://www.hv-designs.co.uk/2010/01/13/learn-how-to-add-a-jquery-fade-in-and-out-effect/
Jó gyakorlást kívánunk!
Legyen profi a webdesign-ban, és a php-webprogramozásban!
Jelentkezzen a június elején induló kiscsoportos,
Akkreditált Webdesigner Mester,
Akkreditált Webprogramozó, és
Akkreditált Web Artist tanfolyamainkra!
Az induló tanfolyamok jellemzői:
- kétnyelvű, akkreditált bizonyítvány (angol-magyar)
- álláslehetőség a képzés végén releváns szakterületen
- részletfizetési lehetőség
- ajándék Pendrive!
- kezdés május végén
- oktatás heti egy alkalommal, 4 órában
- kiscsoportos képzés
- piacképes, gyakorlati tudás
Jelentkezzen még időben, de legkésőbb június 4.-e éjfélig!
Jelentkezzen itt!
Vagy bármelyik másik elérhetőségünkön!
Várjuk szeretettel!
Netlogi C School
Gyakorlat orientált informatika oktatás rugalmas időbeosztással!
www.netlogi-tanfolyamok.net
