[CSS3 + HTML] Slideshow Immagini con effetto fade a scorrimento manuale
Oggi vi dirò come avere un bellissimo slider di immagini sul vostro forum e vi dirò le modifiche che potrete apportare al codice per personalizzarlo come meglio credete. Innanzi tutto vediamo il risultato come sarà:
Esempio. Come potete vedere le immagini hanno un effetto dissolvenza ad ogni cambio,il che rende molto gradevole l'effetto. Gli usi di questo codice possono essere svariati per i vostri forum e sicuramente la vostra fantasia vi porterà a farne il miglior uso. Vediamo come si installa e come si configura.
* con IE non si vede l'effetto fade,ma lo slider funziona.
Questo è il CSS dello slideshow. Gli attributi potete lasciarli così come l'esempio,oppure potete configurarli a vostro piacimento (nei limiti della sintassi css logicamente). Da notare che width: 640px ed height: 480px, sono le dimensioni anche delle immagini da posizionare in HTML.
CITAZIONE
#slider {width: 640px;
height: 480px;
margin: 35px auto 0;
position: relative;
background: #FFF;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);}
#slider:before, #slider:after {content: '';
position: absolute;
width: 60%;
height: 20px;
-ms-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-webkit-transform: rotate(-4deg) skew(-10deg);
-moz-transform: rotate(-4deg) skew(-10deg);
-o-transform: rotate(-4deg) skew(-10deg);
-ms-transform: rotate(-4deg) skew(-10deg);
transform: rotate(-4deg) skew(-10deg);
left: 10px;
bottom: 13px;
z-index: -1}
#slider:after {left: auto;
right: 10px;
-webkit-transform: rotate(4deg) skew(10deg);
-moz-transform: rotate(4deg) skew(10deg);
-o-transform: rotate(4deg) skew(10deg);
-ms-transform: rotate(4deg) skew(10deg);
transform: rotate(4deg) skew(10deg)}
#slider ul {width: 140px;
height: 30px;
padding: 0 0 0 0;
position: absolute;
z-index: 9;
list-style: none;
left: 50%;
margin-left: -70px;
bottom: 8px}
#slider ul li:first-child {margin-left: 16px}
#slider ul li {float: left;
margin-right: 12px;
margin-top: 14px}
#slider ul li:last-child {margin-right: 0}
#slider ul li a {width: 12px;
height: 12px;
display: block;
outline: none;
border: none;
position: relative;
z-index: 2;
background: #AAA;
box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.6), 0 1px 1px 0 white;
border-radius: 50%}
#slider ul li a:hover {background: #888}
#slider img {position: absolute;
left: 0;
top: 0;
opacity: 0;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease}
#slider img:target {opacity: 1}
#slider img#five {opacity: 1}
#slider img:not(:target), #slider img:target ~ img#five {opacity: 0}
#slider ul li a[href="#five"] {background: #777}
#one:target ~ ul li a[href="#one"],
#two:target ~ ul li a[href="#two"],
#three:target ~ ul li a[href="#three"],
#four:target ~ ul li a[href="#four"],
#five:target ~ ul li a[href="#five"] {background: #777}
#two:target ~ ul li a[href="#five"],
#three:target ~ ul li a[href="#five"],
#four:target ~ ul li a[href="#five"],
#one:target ~ ul li a[href="#five"] {background: #AAA}
#creditiangelneo {float: right; font-size: 10px; font-style: italic; margin-right: 20px}
Questo di seguito è il codice HTML. Al posto di IMMAGINE dovrete mettere l'url dell'immagine che vorrete vedere nello slideshow. (Le immagini devo rispettare le dimensioni indicate nel css!)
HTML
<div id="slider">
<!-- Sildes -->
<img id="one" src="IMMAGINE" />
<img id="two" src="IMMAGINE" />
<img id="three" src="IMMAGINE" />
<img id="four" src="IMMAGINE" />
<img id="five" src="IMMAGINE" />
<ul>
<li>
<a href="#one"></a>
</li>
<li>
<a href="#two"></a>
</li>
<li>
<a href="#three"></a>
</li>
<li>
<a href="#four"></a>
</li>
<li>
<a href="#five"></a>
</li>
</ul>
</div>
<div id="creditiangelneo"><a href="http://jackforum.forumcommunity.net/?t=51176975">Slideshow Immagini con effetto fade a scorrimento manuale by AngelNeo89 </a></div>
I made this very cool slider using just CSS3 (Not a single line of JS or jQuery is used in this slider). | | |
| | La guida è stata interamente creata da AngelNeo89 per il Jackforum. Se volete postarla sui vostri forum mandatemi un mp che sarò ben lieto di postarla anche sul vostro sito. |
| |
| | |
.
Jackforum - videogames, sport, bitcoin, pc, manga, salute e benessere,... 
