Görselin sabit kaldığı ama yazıların ya da diğer içiklerin yani content içeriğinin aktığı parrallax yapımı.
HTML:
|
1 2 3 4 5 |
<div class="parallax"> <div class="cover-text"> <span>Sektörün öncülüğünü yapmaktan dolayı gururluyuz!</span> </div> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.parallax { background: url("/assets/images/ozzyparallax.jpg") center center no-repeat fixed; background-size: cover; min-height: 300px; position: relative; } .parallax .cover-text{ width: 80%; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; } .parallax .cover-text span {font-size: 50px;} |