Efect “page peel” prin jQuery
» Scris in categoria: JQuery, Scripturi Utile — @ 11:55
Sunt sigur ca toti ati vazut acel efect intr-un colt dreapta al site-ului de genul celui care l-am folosit aici:http://www.sibiu.name/anunturi/
Desi parca varianta flash parca e mai “cool” este mai greu de creat/implementat chiar si de modificat daca gasiti o varianta free pe net.O solutie frumoasa si mult mai usoara este folosirea jQuery pentru acest efect. Pentru asta aveti nevoie de urmatoarele coduri:
1. Partea de HTML
Pentru inceput trebuie sa introduceti reclama intr-un container (pentru a evita eventuale conflicte de pozitionare) si de un block de continut cu o poza.
<div id="efect_peel"> <a href="#"> <img src="efect_peel.png" alt="" /> <span class="bloc">Web Design</span> </a> </div>
2. Partea de CSS
Acum trebuie sa stilizam si sa ascundem putin acest container prin CSS.
#efect_peel { position: relative; } #efect_peel img { width: 50px; height: 52px; //* Putin mai mare pentru umbra *// z-index: 99; position: absolute; right: 0; top: 0; -ms-interpolation-mode: bicubic; } #efect_peel .bloc { width: 50px; height: 50px; position: absolute; z-index: 50; right: 0; top: 0; background: url(webdesign.png) no-repeat right top; text-indent: -9999px; }
3. Partea de jQuery
In final trebuie sa introduceti scriptul jQuery impreuna cu libraria jQuery intre <head></head> pentru a adauga efectul de peel.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#efect_peel").hover(function() { //On hover $("#efect_peel img , .bloc").stop() .animate({ //Modifica dimensiunile imaginii si ale blocul din acel bloc (Width + height) width: '307px', height: '319px' }, 500); } , function() { $("#efect_peel img").stop() //Cand luati mouse-ul de pe el sa revina la dimensiunea de 50x52 .animate({ width: '50px', height: '52px' }, 220); $(".bloc").stop() //Cand luati mouse-ul de pe el sa revina la dimensiunea de 50x50 .animate({ width: '50px', height: '50px' }, 200); //Acesta se va retrage putin mai repede ptr a nu arata urat in IE }); }); </script>
Comentarii (0)
Lasă un răspuns
Ultimele Articole
- Galerie Foto in drupal
- Efect “page peel” prin jQuery
- Script preluare webcam jurnalul
- Schimbare DIV si Imagine cu JQuery
- Greseli intalnite in web design
- Redirectionare permanenta (301)
- Scripturi pentru afisare ora
- Coduri Culori (nume, hex, rgb)
- Conditionari PHP in WordPress
- Titlu WordPress Optimizat SEO
- Limitarea lungimii prin PHP
- Steaguri PNG
- Web Design CSS Text
- Primii pasi in SEO
- Web Design – CSS background
- Primii pasi in CSS
- Calculator JavaScript
- SEO – Ce inseamna?
- On-page SEO
- Off-Page SEO
Categorii
- XHTML (1)
- Wordpress (2)
- Web Design (6)
- SEO (5)
- Scripturi Utile (4)
- PHP (5)
- JQuery (2)
- JavaScript (3)
- Imagini PNG (1)
- Fără categorie (1)
- Drupal (1)
- CSS (4)
- COMENTARII RECENTE
- Cristina B: N-am pag. web, dar doresc sa-mi fac una prin forte proprii. N-am nici suficienti bani sa platesc asemenea...
- admin: adauga: background-repeat: repeat;
- Mihnea: am si eu o problema am incercat cu background-image:url(”); dar imi afiseaza imaginea doar pe o bucata...
- Florin: foarte interesant articolul
- Web Design: Un articol bun
Web Design: Oferta Lunii martie
conditionari php
CSS
css background
css text
html
off-page seo
on-page seo
optimizare web
php
SEO
text-align
text-decoration
Web Design
wordpress
xhtml CSS (4)
Drupal (1)
Fără categorie (1)
Imagini PNG (1)
JavaScript (3)
JQuery (2)
PHP (5)
Scripturi Utile (4)
SEO (5)
Web Design (6)
Wordpress (2)
XHTML (1)
WP Cumulus Flash tag cloud by Roy Tanck and Luke Morton requires Flash Player 9 or better.