CSS trik s scrollanjem in dvema ozadjema

dve_ozadji
Zanimiv CSS trik, ki bo zagotovo pritegnil oko vsakega obiskovalca vaše spletne strani. Trik se pojavi šele, ko obiskovalec scrolla po strani. Ko gre po strani navzdol logo, ki je prvotno v headerju, zaradi dveh ozadij spremeni barvo. Najbolje, da si ogledate primer.

 

PRIKAZ trika s scrollanjem in dvema ozadjema

 

Namesto dveh barvnih logotov lahko poizkusite tudi s kombinacijo barvne in črno bele slike.

 

Pa si oglejmo kodo:

 

<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<style type="text/css">

body{margin:0;}

.prvi{
      height: 210px;
      padding:40px 40px 40px 300px;
      background: #3399ff url(slika1.png) no-repeat 15px 15px fixed;
}

.drugi{
      background: transparent url(slika2.png) no-repeat 15px 15px fixed;
      text-align: center;
}

.vsebinaSredina{
    width: 250px;
    margin: auto;
    text-align: justify;
}

</style>

</head>

<body>
<div class="prvi"> HEADER </div>
<div class="drugi">
<div class="vsebinaSredina">
 ...
</div>

</div>

</body>
</html>

 

PRIKAZ trika s scrollanjem in dvema ozadjema

 

RAZLAGA kode:

 

prvi in drugi div predstavljata header in vsebinski del spletne strani. Prvi div ima za ozadje nastavljeno rdeč logo, drugi div pa zelen logo. Obe ozadji imata nastavljeno background-attachment: fixed (v kodi background), zaradi tega je logo stalno na ekranu, le da ko scrollamo in se prvi div premakne navzgor njegovo mesto nadomesti drugi div in tako zelen logo prekrije rdečega.

 

drugi div ima nastavljen tex-align: center zaradi tega, ker sem hotel imeti besedilo na sredini, kar sem dosegel s tem, da sem poleg text-align: center dodal še en div, ki sem ga poimenoval vsebinaSredina, ki ima goločen margin: 0 auto in pa širino. Vsa vsebina je torej na sredini, poravnana pa je obojestransko.

 

To bi bila hitra razlaga efekta.

 

Nekateri so šli še dlje in ustvarili marsikaj zanimivega:

 

predstavitev avta

 

potapljač

 

Upam, da boste trik znali okusno uporabljati. Veliko sreče in navdiha. ;)

 

 

Vsi vodiči so na voljo BREZPLAČNO!
Pišite mi

Želite mnenje ali pomoč pri vašem projektu?

Pišite mi in bom pomagal, kakor bom v tistem trenutku lahko.