CSS3 animatsioonid – Pööramine ja viivitamine (Harjutus 2)

Pööramine

Mul on mõned ideed veel, et kuidas ära kasutada üleminekute animatsioone. Aga selle jaoks peame meenutama sellist toredat CSS3 atribuuti nagu transform. Selle abil on võimalik objekti pöörata, suurendada/vähendada, väänata ja muuta perspektiivi.

Lisame oma HTML dokumenti pildi.

<h1>Pööramised</h1>
            <div class="pilt"><img src="https://lorempixel.com/150/150/people/" alt="LoremPixel"></div>  

Ja kui hiirega üle lohistada, siis muudame näiteks natuke suuremaks ja keerame 360-kraadi.

.pilt{
    position: absolute;
    transition: all 1s ease-in-out;
}

.pilt:hover{
    transform: scale(1.3) rotate(360deg);
}

Huvitava efekti saab, kui kasutada hoopis 3D pööramist. Tekitame sellise efekti, et kui hiirega üle pildi liikuda, siis pilt nagu keeraks ümber ja teisel pool on mingi tekst. Kahe külje tegemiseks kasutame kahte div-elemente, mille mähime veel omakorda div-elemendi sisse.

       <h1>Pööramised</h1>
        <div class="gallery">
            <div class="pilt">
                <div class="kylg">
                <img src="https://lorempixel.com/150/150/people/" alt="LoremPixel">
                </div>
                <div class="kylg taga">Karin Eegreid</div>
            </div>
        </div>

Lisame CSS’is ülemineku animatsiooni – liikudes üle pildi pööratakse seda 180-kraadi.

.pilt{
    transition: all 1s ease;
}

.pilt:hover{
    transform: rotateY(180deg);
}

Kahjuks valib kood keskkoha lehe keskele ning pilt liigub ühest äärest teise. Anname kogu div-elemendile kindla laiuse.

.gallery{
    position: relative;
    height: 150px;
    width: 150px;
}

.pilt{
    transition: all 1s ease;
}

.pilt:hover{
    transform: rotateY(180deg);
}

Põhiosa on nüüd valmis. Vormindame tagakülje andes suurused, et tekst oleks keskel ja taust valge. Edasi pöörame tagumise külje peegelpilti. Siis peidame alumise div-elemendi teise taha ning täiendae kogu animatsiooni perspektiiviga.

.gallery{
    position: relative;
    height: 150px;
    width: 150px;
    -webkit-perspective: 600;
    perspective: 600;
}

.pilt{
    transform-style: preserve-3d;
    transition: all 1s ease;
}

.pilt:hover{
    transform: rotateY(180deg);
}

.pilt .kylg{
    position: absolute;
    backface-visibility: hidden;
    overflow: hidden;
}

.pilt .taga{
    transform: rotateY(180deg);
    background-color: #fff;
    text-align: center;
    height: 150px;
    width: 150px;
    line-height: 150px;
}

Viivitamine

Hetkel loodud animatsioonid alustavad kõik ühel hetkel. Kui on soovi, et mõni animatsioon võiks alustada natuke hiljem, siis kasutame atribuuti transition-delay. Kui kasutada lühiversiooni, siis lisa lihtsalt neljanda parameetrina. Näiteks loome ühe nupu, kus on kaks teksti.

        <h1>Viivitus</h1>
        <a class="btn" href="#">
            <span class="txtbig">Click me</span>
            <span class="txtsmall">Download</span>
        </a>

Ja anname väikese kujunduse, mis lükkab teise teksti 100px paremale ja peidame selle ära.

/* VIIVITUS */
.btn{
    background: #2ecc71;
    border-radius: 10px;
    display: block;
    width: 200;
    height: 45px;
    margin: 0 auto;
    padding: 5px;
    position: absolute; 
    box-shadow: 0px 1px 3px #fff;
    font-family: Arial;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
}

.btn span{
    position: relative;
}

.btn span.txtbig{
    font-size: 22px;
    top: 12px;
    right: -35px;
}

.btn span.txtsmall{
    font-size: 14px;
    right: -100px;
    top: 17px;
}

Kui hiirega üle liikuda, siis liigutame põhiteksti natuke üles ja teise teksi liigutame keskele.

.btn span.txtbig{
    font-size: 22px;
    top: 12px;
    right: -35px;
    transition: all 0.3s ease;
}

.btn:hover span.txtbig{
    top: 5px;
}

.btn span.txtsmall{
    font-size: 14px;
    right: -100px;
    top: 17px;
    transition: all 0.3s ease;
}

.btn:hover span.txtsmall{
    right: 45px;
}

Mõlemad tekstid liiguvad ühel ajal. Lisame väiksemale tekstile viivituse 0,3sekundit.

.btn span.txtsmall{
    font-size: 14px;
    right: -100px;
    top: 17px;
    transition: all 0.3s ease 0.3s;
}

Nüüd liigub suur tekst üles ja siis alles pärast seda liigub väike tekst keskele.

Harjutus 2

Sinu ülesandeks on lisada veebielehe töötajate pildid. Kui hiirega üle nende piltide liikuda, siis kuvatakse töötajate kontaktid.

Viimased postitused

Meist

metshein.com on pakkunud juba üle kümne aasta tasuta eestikeelseid infotehnoloogiaga seotud kursusi. Sama kurssi püütakse järgida ka edaspidi. Eesmärk muuta arvutiõpe võimalikult lihtsaks!

metshein.com: parim eestikeelne koolitusportaal

Autorist ja kontakt: kliki siia

Kontrolli tunnistust

Tööribale