Kreatore.it

Sviluppo applicativi Lamp

Figcaption slideUp

Scritto da: | Categorie: ,

Un metodo carino ed elegante per presentare degli articoli aventi un’immagine o delle immagini che abbiano una descrizione è quella utilizzata sul sito http://artearti.net/ che prevede l’uso di JQUERY per creare l’animazione.

Il metodo è molto semplice, e sfruttando la proprietà .hover del framework javascript si ottiene un effetto elegante e divertente; vediamolo in azione con il codice utilizzato

<figure class="slideup">
<img src="http://lorempixel.com/280/320/people" alt="People" />    
<figcaption>
<h2>Proin in cursus justo</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut mi lectus. Curabitur ac massa eget ipsum dictum elementum. Donec eget semper diam. Proin in cursus justo. Nulla imperdiet rhoncus rutrum. Proin fermentum, lacus eu sodales bibendum, libero mi rutrum felis, quis faucibus quam lectus dictum turpis. Quisque aliquet lacinia mi, vel placerat sem convallis sed. Vivamus sodales elementum massa, nec iaculis nisl tempor ut.</p>
</figcaption>
</figure>

Di seguito il codice css per colorare la foto:

figure.slideup{
width:280px;
height:320px;
border:solid 2px #fff;
overflow:hidden;
position:relative;
margin:0 0 20px;
}
figure.slideup img {
position:absolute;
top:0;
left:0;
border:0;
padding:0;
}
figure.slideup figcaption {
background:rgba(255,125,78,0.5);
width:100%;
height:320px;
position:absolute;
bottom:0;
left:0;
top:220px;
border-top:1px solid #fff;
}
figure.slideup figcaption h2 {
font-size:22px;
height:50px;
margin:0 0 10px;
padding:0 10px;
}
figure.slideup figcaption p{
font-size:12px;
line-height:20px;
padding:0 10px;
}

ed ecco il codice JS che crea il movimento:

$('figure.slideup').css({cursor:'pointer'}).hover(
function(){$("figcaption", this).animate({top:'0px'},300);	},
function() {$("figcaption", this).animate({top:'220px'},500);
});
Tags: , , , ,

Articoli Simili

Cerca per tag

admin, ajax, android, apache, app, audio, backup, beta, blog, bordi, browser, caffè, calcolo, calibre, categorie, cd, chrome, clienti, cloud, cms, condivisione, css3, csv, database, debian, desktop, drive, driver, dump, e-reader, evolution, file, firefox, flash, font, foto, freelance, funzioni, gd, gedit, gimp, htc, html5, iexplorer, immagini, indirizzo, inkscape, internet, iphone, java, javascript, jquery, kivy, kv, less, lettura, link, linux, live, mac, macchina, mail, menu, mobile, mod, mp3, mysql, nautilus, newsletter, ombra, open office, opera, os, paypal, pdf, picasa, plugin, python, safari, skype, smartphone, smf, ssh, stampante, tabs, tag, tastiera, terminale, test, testo, textile, textpattern, theme, ubuntu, usb, video, web editor, website, windows, wysiwyg, xfce4, youtube

Cerca per categoria

© 2011 Kreatore.it :: Sito web realizzato da Marco Casalegno

TXP | Admin | Home | Back to Top

Tutte le informazioni e le immagini sono rilasciate sotto licenza secondo la Creative Commons License 2.0.