Tutorial Responsive Social

Creare un Wall Interattivo con foto prese da Instagram

By Andrea Marchetti
@marchetti_design

AGGIORNAMENTO NUOVA VERSIONE 2.0: Creare un infinite scroll Responsive con foto prese da Instagram tramite hashtag

Qualche articolo fa avevamo parlato del Wall Interattivo, realizzato tramite Instagram per il sito di coca cola #showyourheart.

Oggi proviamo a ricreare una struttura simile con foto estrapolate da instagram, utilizzando uno script veramente cool: Instagram Scroll.

Questo script carica foto da instagram in una pagina web con “infinite scroll”. La tecnica permette il caricamento di immagini in automatico (tramite ajax) quando si arriva alla fine della pagina.

1) Applicazione Instagram

Come prima cosa creiamo l’app instagram seguendo le istruzioni di questo precedente tutorial.

2) Instagram scroll

Scarichiamo instagram-scroll e lo richiamiamo nell’header del nostro file index.html insieme a jquery.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<script src="instagram-scroll.js"></script>

Inizializziamo il plug-in.

<script>

$(function(){

  return LoadResults();

})

</script>

Fatto questo all’interno del body della nostra pagina inseriamo il div dove verranno caricate le foto.

<div class="instagram"></div>

Ora apriamo il file instagram-scroll.js e settiamo le opzioni dello script.

Settiamo il plug-in.

// Tag to display

var tag_name = ‘TAG_NAME’;

// Your client id (given by instagram api)

var client_id = ‘CLIENT_ID’;

var thumb_dimension = 220;

var div_to_add_pics = ‘#img’;

// Include Instagram caption with image?

var include_caption = false;

// Include Instagram username with image?

var include_username = false;

• al posto di TAG_NAME inseriamo il tag instagram per il quale vogliamo mostrare le foto (nel esempio io utilizzerò #whipriders)
• al posto di CLIENT_ID inseriamo l’id della nostra applicazione
• al posto di #img inseriamo il div dove vogliamo visualizzare le foto, nel nostro caso .instagram
• come ultima cosa settiamo i due valori include_caption e include_username come true

3) Style and Message

Ora le nostre foto verranno incluse con username e caption. Con un minimo di stile rendiamo la lista di foto una griglia.

.instagram ul {list-style-type: none;margin:0; padding:0}

.instagram ul li{float:left;margin:0;padding:0;width:20%!important;position: relative;overflow: hidden}

Animazioni

Le caption ora sono visualizzate sotto le foto, per farle comparire con una animazione al hover del mouse aggiungiamo il seguente css.

.username{position: absolute; top:8px; left:8px;color:#fff;;background: #f4594f;padding:6px 12px; text-transform: uppercase;opacity:1;font-size:12px;}

.caption{position: absolute;bottom:-300px;background: #fff;padding:10px 15px;background: #333; color:#fff;opacity: 0;

	-webkit-transition: all 0.3s ease-in-out;

	-moz-transition: all 0.3s ease-in-out;

	-ms-transition: all 0.3s ease-in-out;

	-o-transition: all 0.3s ease-in-out;

	transition: all 0.3s ease-in-out;}

.instagram ul li:hover > .caption{opacity: 0.8;background: #333;bottom: 0}

Ora passando sopra le immagini vedremo le caption con uno slideUp dal basso.

Messaggio

Per ricavare lo spazio per logo e messaggio utilizziamo i css3 e la propieta nth-child()

.instagram .whipriders:first-child li:nth-child(1)

.instagram .whipriders:first-child li:nth-child(2),

.instagram .whipriders:first-child li:nth-child(3),

.instagram .whipriders:first-child li:nth-child(4){margin-bottom: 20%}

Con questo codice applichiamo un margine inferiore della esatta altezza delle immagini sotto le prime 4 foto della pagina.

Nello spazio ricavato posizioneremo logo e messaggio. Inseriamo il codice necessario.

Html

<div id="message">

	<img src="logo.png"/>

	<h1>I più Gasati su Instagram</h1>

	<h2>Smezzate l’inferno e hashtaggate come <br/> non ci fosse un domani <strong>#whipriders</strong></h2>
</div>

Css

#message{width:60%; position: absolute;z-index:999;margin-top:20%; left:20%;height:30%;display:none}

#message img{float:left; width:30%;}

#message h1{font-weight: 900; font-size: 40px;text-transform: uppercase;color:#f4594f;margin:9% 0 0 0;padding: 0}

#message h2{font-size:30px; margin:0;padding: 0;font-weight: 400}

Cosi facendo otteniamo il nostro Wall Interattivo con messaggio e logo.

Nella demo funzionante ho aggiunto i link ai social. Tutto è disponibile per il download qui di seguito.

Stay Tuned!

Responsive, Social

Potrebbero interessarti:

Slider Responsive Full Screen con testi animati utilizzando Flex Slider

Come costruire un Sito Web Responsive

Creare un Parallax Design accattivante e Responsive con Bootstrap

Realizzare una griglia in Html5 con foto e info richiamate da Instagram