CSS3 animatsioonid – Peidetud jalus

Selles peatükis õpime sellist huvitavat efekti nagu ‘parallax scrolling‘. Tegemist on üritusega luua illusioon sügavusest 2D ruumis. Näiteks tagaplaanil olevad objektid liiguvad aeglasemalt kui esiplaanil olevad. Siit www.awwwards.com leiad lahedaid näiteid, kuidas on seda efekti kasutatud. Meie kasutame seda veebilehe jaluse kuvamiseks. Et jalus on peidetud, kuni kasutaja on jõudnud lehe lõppu. Ja siis koos kerimisega, kuvakse ka jaluse osa. Kusjuures selle efekti tegemiseks saame täiesti hakkama ainult CSS muutmisega.

Kasutame selle harjutuse tegemiseks eelmist harjutust ja lisame vahetult enne lõppu, <div id=”content”> sisse div-konteineri.

<!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="06.css">
    <link rel="stylesheet" href="normalize.css">
</head>
<body>
<div id="content">
    <header>
        <div id="logo">metshein.com</div>
        <ul id="nav">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </header>
	<div id="main">
	    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quidem odio harum animi, dolores provident, iure voluptatem id dolore quasi eligendi. Sapiente quae, accusamus nam amet at voluptas distinctio. Soluta.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quidem odio harum animi, dolores provident, iure voluptatem id dolore quasi eligendi. Sapiente quae, accusamus nam amet at voluptas distinctio. Soluta.</p>
	    ... siia palju teksti ...
	    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quidem odio harum animi, dolores provident, iure voluptatem id dolore quasi eligendi. Sapiente quae, accusamus nam amet at voluptas distinctio. Soluta.</p>
    </div> 
    <div id="footer">
        <p>Jalus 2022</p>
    </div>
</div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $(window).scroll(function(){
            if($(window).scrollTop() >= 100){
                $('header').css('padding','0');
                $('#logo').css('font-size','20px');
            }else{
                $('header').css('padding','25px 0');
                $('#logo').css('font-size','30px');
            }
           }); 
        });
    </script>
</body>
</html>

Peame sättima nüüd natuke ka eelmist koodi (#main). Kuna näiteks jalus paistab läbi teksti tuleb lisada tausta värv. Seejärel tekitame jaluse jaoks ruumi ja toome sisu ettepoole. Efekti tekitamiseks lisame alla serva joone ja varju.

#main{
    background: #34495e;
    margin-bottom: 100px;
    z-index: 1;
    padding-bottom: 20px;
    border-bottom: 2px solid #666;
    box-shadow: 0 12px 15px rgba(0,0,0,.45);
    
}

Nüüd peaksid saama kerida, aga jalus ise on kuskil peidus. Kõigepealt ütleme, et jalus peab jääma lehe alla serva paika ning seejärel saadame alumiseks.

#footer{
    position: fixed;
    bottom: 0;
    z-index: -1;
    width: 100%;
    height: 100px;
    line-height: 100px;
    padding: 10px;
    color: #fff;
    background: #2C3E50;
}

Nüüd peaks efekti näha olema.

 

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