Jak zrobić proste animacje na stronie internetowej? Poradnik #1

Jak zrobić proste animacje na stronie internetowej? Poradnik #1

Już kiedyś wspominaliśmy, że chcemy dzielić się naszą wiedzą, dlatego na naszym blogu pojawi się seria porad, w których podpowiemy jak zrobić nowoczesną stronę internetową. Ten wpis poświecimy opcji, która sprawi, że wybrane sekcje na stronie będą mogły być animowane. Takie rozwiązanie może być użyte np. w sekcji Team lub Product – gdzie kafelka z nazwą po najechaniu myszą zamieni się w zdjęcie lub zdjęcie zamieni się w opis.

Aby napisać powstała w pełni responsywna karta dla danej sekcji, potrzebujemy do tego programu do pisania kodu, my korzystamy z Bracket – dzięki niemu o wiele prościej i przyjemniej jest tworzyć swoją stronę internetową.

Zaczynamy od stworzenia nowego dokumentu w programie Bracket i zapisujemy go w rozszerzeniu .html, gdy zaczynamy od pustego dokumentu dodajemy sekcje <head>.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
    <HEAD>
        <TITLE>Stopka E-mail</TITLE>
        <link rel="stylesheet" type="text/css" >
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" >
        <meta charset="utf-8">
</head>

Następnie w sekcji body ustawiamy wszystkie divy:

<BODY>
    <div class="card">
        <div class="front"><img src="tapeta.jpg"></div>
        <div class="back">
            <div class="details"><h2>Przemysław Lange<br><span>Grafik komputerowy</span></h2>
                <div class="social-icons">
                    <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>    
                    <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>       
                    <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>    
                    <a href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a>    
        
                </div>
            </div>
        </div>
    </div>
    
</BODY>

Są dwie możliwości dodawania stylów przez CSS. Możemy to zrobić bezpośrednio w kodzie html lub tworzymy osobny plik .css. W tym projekcie użyjemy go bezpośrednio:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');
body
{
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif; 
}
img 
{
    width: 300px;
    height: 400px;
}
.card
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 300px;
    height: 400px;
    transform-style: preserve-3d;
    perspective: 600px;
    transition: 0.5s; 
}

.card .front
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #000;
    backface-visibility: hidden;
    transform: rotateX(0deg);
    transition: 0.5s;
    
}
.card:hover .front
{
     transform: rotateX(-180deg);
}

.card .back
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #000;
    backface-visibility: hidden;
    transform: rotateX(180deg);
    transition: 0.5s;
    
}
.card .back:before
{
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.1);
}
.card:hover .back
{
     transform: rotateX(0deg);
}

.card .back .details
{
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
     transform: translateY(-50%);
}

.card .back .details h2
{
    margin: 0;
    padding: 0;
    font-size: 24px;
    color: #fff;
}

.card .back .details h2 span
{
    color: #a7a7a7;
    font-size: 16px; 
}

.social-icons
{
    padding: 10px; 0;
}

.social-icons a
{
    display: inline-block;
    width: 36px;
    height: 36px; 
    text-align: center;
    background: #262626;
    color:#fff;
    text-decoration: none;
    border-radius: 50%; 
    transition: 0.5s; 
}

.social-icons a .fa
{
    line-height: 36px;
}

.social-icons a:hover 
{
     background: #e91e63;
     
}

Uzupełniamy sekcję head w niezbędny kod i powstaje responsywna karta dla wybranej przez nas sekcji.

<TITLE>Stopka E-mail</TITLE>
        <link rel="stylesheet" type="text/css" >
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" >
        <meta charset="utf-8">
        <style>
            
            
            @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');

W razie problemów, odpowiemy na wszelkie pytania i z chęcią pomożemy w udoskonalaniu Twojej strony internetowej. Mamy nadzieję, że nasz poradnik zainspiruje Was do korzystania z estetycznych, w pełni responsywnych i nowoczesnych rozwiązań, jakie proponujemy.