Ekrandaki resmi birazcık karartarak ve Scrool aşağı kayarken resmin harici alanlarını kullanıcıya yansıtarak şık bir görünüm elde edebilirsiniz. Buna basit parallax efekt diyenler de var soranlara duyurulur 🙂
HTML Kodları:
<section id="statement" class="section-box"> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <h4 class="text-black lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dolor illo soluta nulla, <br>doloremque necessitatibus dolorem, suscipit omnis et maxime. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </h4> </div> </div> </div> </section>
Örnek css Kod:
(Aşağıda Örnek linear-gradient kullanımı da bulunmaktadır bu olmadan da parallax yapabilirsiniz.)
#statement { background: linear-gradient( rgba(20, 20, 20, .8), rgba(20,20,20, .8)), url("../img/ornekbg.jpg"); background-repeat: no-repeat; background-attachment:fixed; background-position: center; background-size: cover; }
Örnek Görünüm: