Location Unknown
2021 • PG • 1hr 38min
Marco, a disillusioned backpacker in his late 20s, embarks on a solitary journey in search for meaning.
Cast
Sei pronto a dare un tocco di dinamismo al tuo sito web con un poster animato? Questo tutorial ti guiderà attraverso il processo di creazione di un’interazione animata per poster di film utilizzando solo HTML e CSS. Questo tipo di animazione è perfetto per chi vuole arricchire il proprio portfolio, creare una landing page dinamica o aggiungere dettagli visivi interessanti senza l’uso di JavaScript.
Che cos’è una Poster Interaction?
Una poster interaction è una tecnica che consente di animare l’immagine del poster per dare agli utenti un’anteprima coinvolgente con dettagli aggiuntivi sul contenuto. In questo caso, i dettagli del film, come il cast, la valutazione e la descrizione, sono mostrati in modo elegante al passaggio del mouse. Questo approccio è utile per rendere una pagina visivamente più accattivante e per aumentare l’engagement dell’utente.
Struttura HTML per il Poster Animato
Il codice HTML è relativamente semplice e si basa su una serie di elementi div annidati per formare la struttura del poster e dei relativi dettagli.
Ecco il codice HTML per iniziare:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CyberAlchimista | Poster Animato CSS</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'>
<link rel='stylesheet' href='style.css'>
</head>
<body>
<div class="wrapper">
<div class="card">
<div class="poster">
<img src="img/img_1.jpg" alt="Location Unknown">
</div>
<div class="details">
<h1>Location Unknown</h1>
<h2>2021 • PG • 1hr 38min</h2>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<span>4.2/5</span>
</div>
<div class="tags">
<span class="tag">Italian</span>
<span class="tag">Drama</span>
<span class="tag">Indie</span>
</div>
<p class="desc">
Marco, a disillusioned backpacker in his late 20s, embarks on a solitary journey in search for meaning.
</p>
<div class="cast">
<h3>Cast</h3>
<ul>
<li><img src="https://i.postimg.cc/jqgkqhSb/cast-11.jpg" alt="Marco Andrews" title="Marco Andrews"></li>
<li><img src="https://i.postimg.cc/8P7X7r7r/cast-12.jpg" alt="Rebecca Floyd" title="Rebecca Floyd"></li>
<li><img src="https://i.postimg.cc/2SvHwRFk/cast-13.jpg" alt="Antonio Herrera" title="Antonio Herrera"></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>Stile CSS per l’Animazione
Il CSS svolge un ruolo fondamentale per creare l’animazione e gli effetti visivi della nostra poster interaction. Usando diverse tecniche di CSS3, possiamo ottenere un risultato fluido e dinamico.
Ecco il codice CSS che puoi usare per creare l’effetto animato:
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Inter, sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #11131e;
}
.wrapper {
position: relative;
width: 100%;
height: 100%;
padding: 20px;
display: flex;
align-content: center;
justify-content: center;
gap: 24px;
flex-wrap: wrap;
}
.card {
position: relative;
width: 325px;
height: 450px;
background: #000;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 10px 10px rgba(0, 0, 0, .2);
cursor: pointer;
}
.poster {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.poster::before {
content: '';
position: absolute;
bottom: -45%;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transition: .3s;
}
.card:hover .poster::before {
bottom: 0;
}
.poster img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: .3s;
}
.card:hover .poster img {
transform: scale(1.1);
}
.details {
position: absolute;
bottom: -100%;
left: 0;
width: 100%;
height: auto;
padding: 1.5em 1.5em 2em;
background: #000a;
backdrop-filter: blur(16px) saturate(120%);
transition: .3s;
color: #fff;
z-index: 2;
}
.card:hover .details {
bottom: 0;
}
.details h1,
.details h2 {
font-weight: 700;
}
.details h1 {
font-size: 1.5em;
margin-bottom: 5px;
}
.details h2 {
font-weight: 400;
font-size: 1em;
margin-bottom: 10px;
opacity: .6;
}
.details .rating {
position: relative;
margin-bottom: 15px;
display: flex;
gap: .25em;
}
.details .rating i {
color: #e3c414;
}
.details .rating span {
margin-left: 0.25em;
}
.details .tags {
display: flex;
gap: .375em;
margin-bottom: .875em;
font-size: .85em;
}
.details .tags span {
padding: .35rem .65rem;
color: #fff;
border: 1.5px solid rgba(255 255 255 / 0.4);
border-radius: 50px;
}
.details .desc {
color: #fff;
opacity: .8;
line-height: 1.5;
margin-bottom: 1em;
}
.details .cast h3 {
margin-bottom: .5em;
}
.details .cast ul {
position: relative;
display: flex;
flex-wrap: wrap;
gap: 0.625rem;
width: 100%;
}
.details .cast ul li {
list-style: none;
width: 55px;
height: 55px;
border-radius: 50%;
overflow: hidden;
border: 1.5px solid #fff;
}
.details .cast ul li img {
width: 100%;
height: 100%;
}Come Funziona il CSS
- Poster Animation: Usando la pseudo-classe
:hoverper il card e il poster, riusciamo a creare un effetto di ingrandimento per l’immagine del poster. - Details Animation: La sezione details viene nascosta inizialmente e appare con un effetto scorrevole verso l’alto al passaggio del mouse, grazie alla proprietà
bottomanimata da-100%a0.
Conclusioni
Il Poster Animato realizzato con HTML e CSS è un ottimo esempio di come possiamo creare esperienze coinvolgenti per gli utenti senza la necessità di JavaScript. Con questo effetto dinamico, puoi aggiungere un elemento visivo accattivante a qualsiasi sito web, migliorando il design e rendendo i tuoi contenuti più interattivi.
Hai trovato utile questa guida? Continua a seguire Cyberalchimista sui social (@cyberalchimista) per altri tutorial e consigli sullo sviluppo web! 😊
