CSS3 animatsioonid – Pildivahetaja

Kõiki seni õpitud tehnikaid, saame kasutada hõlpsasti ka pildivahetaja loomisel. Lisame pildid, mis vahetuvad automaatselt mingi aja möödudes. Kui oleme piltide lisamisega hakkama saanud, siis lisa viimaseks sama pilt, mis on esimene. Sel juhul ei pane kasutaja tähele, kui piltite kerimine hakkab algusest peale.

<!DOCTYPE html>
<html lang="et">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS animatsioonid</title>
    <link rel="stylesheet" href="05.css">
    <link rel="stylesheet" href="normalize.css">
</head>
<body>
<div id="main">
	<div id="content">
       <div class="slider">
           <img src="https://lorempixel.com/700/300/sports/" alt="">
           <img src="https://lorempixel.com/700/300/food/" alt="">
           <img src="https://lorempixel.com/700/300/cats/" alt="">
           <img src="https://lorempixel.com/700/300/sports/" alt="">
       </div>
    </div>
</div>
</body>
</html>

Nüüd tuleks pildid horisontaalseks saada. Seega läheme CSS kallale. Kõigepealt ütleme pilti ümbritsevale div-konteinerile, kui lai on kogu pildivahetaja. Hetkel 4 pilti, seega 400%.

html{
    background-color: #34495e;
    width: 100%;
}

.slider{
    position: relative;
    width: 400%;
    margin: 0;
    left: 0;
}

Valime suuruse pildivahetaja suuruse ning kui palju korraga kogu piltide laiusest kuvame ehk 25%.

html{
    background-color: #34495e;
    width: 100%;
}

#content{
    width: 60%;
    margin: auto;
}

.slider{
    position: relative;
    width: 400%;
    margin: 0;
    left: 0;
}

.slider img{
    width: 25%;
    float: left; 
}

Selleks, et pilte ei kuvataks väljaspool soovitud ala, lisame atribuudi overflow: hidden

#content{
    width: 60%;
    margin: auto;
    overflow: hidden;
}

Edasi on jäänud see ainult animeerida. Lisame .slider klassile animatsiooni kestvuse ja nime ning loome sellele animatsiooni.

html{
    background-color: #34495e;
    width: 100%;
}

#content{
    width: 60%;
    margin: auto;
    overflow: hidden;
}

.slider{
    position: relative;
    width: 400%;
    margin: 0;
    left: 0;
    -webkit-animation: 20s pildivahetaja infinite;
}

.slider img{
    width: 25%;
    float: left; 
}

@-webkit-keyframes pildivahetaja {
    from { left: 0%; }
    25% { left: 0%; }
    30% { left: -100%; }
    55% { left: -100%; }
    60% { left: -200%; }
    75% { left: -200%; }
    to { left: -300%; }
}

Nüüd peaks toimuma pildite liikumise animatsioon koos pausidega. Kuna viimane pilt on sama mis esimene, siis kasutaja ei pane muutust tähele.

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