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)
Script preluare webcam jurnalul
» Scris in categoria: JavaScript, PHP, Scripturi Utile — @ 17:18
Am avut nevoie acum ceva timp de un script prin care sa preiau un webcam de la jurnalul national pentru proprietarul unei pensiuni pe care era amplasat acel webcam.
Prima solutie a fost aceea de a introduce un iframe care ducea catre jurnalul si cu niste pozitii absolute definite in CSS care faceau sa apara acel webcam, insa problema era ca cei de la jurnalul national avea niste bannere care se schimbau periodic si modificau pozitia chenarului cu imaginea respectiva si nu se vedea intotdeauna corect.
Solutia finala este putin mai complexa, dar functioneaza perfect si, avand in vedere faptul ca am vazut destui de multi design-eri care cauta asa ceva si nu prea gasesc m-am hotarat sa o postez aici…
Tineti cont de faptul ca eu ofer o solutie pentru o problema, un script… dar nu sunt raspunzator de modul in care folositi acest script, in mod normal fiind nevoie de acordul celor de la jurnalul national pentru preluarea acelor webcam-uri.
Varianta prezentata de mine este functionala, testata dar va trebuie sa completati campurile indicate cu datele site-ului/serverului vostru.
Pentru o intelegere cat mai buna vom folosi fisiere diferite pentru generare, afisare, refresh si salvare cookie-uri… citeste tot articolul
Comentarii (0)
Scripturi pentru afisare ora
» Scris in categoria: JavaScript, Scripturi Utile — @ 20:42
Va prezentam cateva scripturi prin care puteti afisa ora exacta pe site-ul d-voastra:
1. Ceas Live
Va afisa ora astfel –
Adaugati in codul html al paginii urmatorul cod:
In locul unde vreti sa fie afisat ceasul introduceti: <script language="javascript" src="liveclock.js"></script> (aveti grija ca la src sa fie locatia exacta unde ati salvat scriptul) Iar <body> de la inceputul codului xhtml trebuie inlocuit cu: <body onLoad="show_clock()">
Iar scriptul JavaScript care trebuie salvat pe server il gasiti aici: liveclock.js
! Pentru a il salva direct, click dreapta pe liveclock.js -> salvati linkul ca/save target as.
2. Ceas Analog
Citeste tot articolul pentru restul de scripturi
Comentarii (0)
Calculator JavaScript
» Scris in categoria: Scripturi Utile — @ 0:27
Am creat un javascript simplu pentru site-urile de constructii astfel incat un utilizator sa introduca dimensiunile unei incaperi si apoi bifand unele casute de servicii sa-si calculeze un cost estimativ. Preturile sunt usor de modificat prin variabilele itemNRpret…
Codul scurt ptr. javascript (inserat intr-un fisier extern .js sau in head) este:
function aduna()
{
var item0pret = 6;
var item1pret = 7;
var a = eval(document.calc.lungime.value);
var b = eval(document.calc.latime.value);
var c = eval(document.calc.inaltime.value);
var s = (a * 1) + (b * 1);
var item1 = eval(document.calc.item1.value);
var witem1 = item1pret * item1;
if (calc.item0.checked){
var witem0 = document.calc.item0.value = item0pret;
} else {
var witem0 = document.calc.item0.value = 0;
}
document.calc.rezultat.value = s*2*c*witem0 + a*b*witem1;
}
Iar in body vine ceva de genu:
<form name=”calc” method=”POST”>
<input name=”lungime” type=”text” value=”3.5″>
<input name=”latime” type=”text” value=”1.5″>
<input name=”inaltime” type=”text” value=”1.5″>
<input type=”checkbox” name=”item0″ size=”10″>
<input type=”text” name=”item1″ value=”0″>
<input type=”button” onClick=”aduna()” value=”Calculeaza” >
</form>
Pentru varianta completa (cu multe servicii) sau alte intrebari trimite-ti un e-mail sau folositi formularul de la contact.
Comentarii (0)
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.