CSS3 animatsioonid – Kleepuv päis

Idee on nüüd selline, et sinu veebilehel on teatud kõrgusega päis. Kui lehte hakkad alla kerima, siis päis muutub väiksemaks, kuid jääb lehe ülaserva nähtavaks (sticky header, fixed header). Päise saame CSS’i abil lihtsalt ära fikseerida, aga kui tahame veel nutikat animatsiooni, siis peame kasutama natuke jQuery koodi. Alustame nagu ikka HTML struktuurist.

<!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 rohkem 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>
</body>
</html>

Et efekti saaksime testida, siis lisa oma koodi rohkem teksti.

Järgmiseks anname sisule natuke kujundust – muudame tausta värvi ja määrame fondi. Sisutekstile ka mingi laius ja paigutus keskele. Ja siin lükkasin teksti 150px allapoole, et jääks pärast päise alt paistma.

body{
    margin: 0;
    padding: 0;
    background-color: #34495e;
    color: #ccc;
    font-family: Verdana, sans-serif;
}

#main{
    width: 970px;
    margin: auto;
    padding: 15px;
    position: relative;
    top: 150px;
}

Edasi vormindame päise ja muudame kohe selle fikseerituks ja z-index’i abil hoiame selle alati kõige pealmisena. Järgneva kujundusga paneme paika ka logo ja menüü.

header{
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
    padding: 25px 0;
    z-index: 999;
    background: #2C3E50;
}

#logo{
    float:left;
    font-size: 30px;
    font-weight: bold;
    padding: 10px;
    line-height: 50px;
}

#nav{
    display: block;
    position: relative;
    float: right;
    margin: 0;
    padding: 0 5px 0 0;
    list-style: none;
    line-height: 43px;
}

#nav>li{
    display: block;
    float: right;
}

#nav>li>a{
    display:block;
    padding:  16px 10px 11px 10px;
    font-size: 16px;
    text-decoration: none;
    text-transform: uppercase;
    color: #888;
}

#nav>li:hover>a{color: #F1C40F;}

Nüüd on kujundus paigas ja kui teksti kerida, siis päis on kenasti paigas. Meie soov on, et see muutuks kerides väiksemaks ja see toimuks animeeritult. Lisame päisele animeeritud ülemineku.

header{
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
    padding: 25px 0;
    z-index: 999;
    background: #2C3E50;

    transition: all .25s;
    -webkit-transition: all .25s;
    -moz-transition: all .25s;
    -ms-transition: all .25s;
    -o-transition: all .25s;
}

Animatsiooni käivitamiseks ühendame veebilehe jQuery raamistikuga:

...
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

</body>
</html>

Ja lisame jQuery koodi scroll() sündmuse, mis reageerib kerimisele. Kui keritud on 100 ja rohkem piksleid, siis muudame soovitud CSS parameetreid ja nende väärtusi. Hetkel muudame päise kõrgust polstri arvelt ja muudame logo väiksemaks. Ja kui keritud on, taastame algse olukorra.

...
    <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>

 

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