
16 Haziran 2015
minimalcoding
2545
0
Css ile Basit Parallax Background Effect yapımı
Bu yazımızda sadece CSS’in “background-attachment:fixed” özelliğini kullanarak basit kullanışlı , ekstra bir eklenti gerektirmeden (Javascript vb.) , parallax background yapımından bahsediyor olacağız. Uygulamanın daha anlaşılır olması için örnek yapıyı icelemenizde fayda var source kodlara download linkinden ulaşabilirsiniz…
Örnek
See the Pen YXxQYE by MinimalCoding (@MinimalCoding) on CodePen.
Example | Download |
Html Kod Yapısı
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<link rel=stylesheet href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css"> <section class="header"> <div class="mask"> <div class="text-align"> <h1>Only CSS <br/>Simple Parallax Background Effect </h1> </div> <a href="#section" class="section"><i class="fa fa-chevron-circle-down"></i></a> </div> </section> <section class="section-one" id="section"> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <h1>Simple Parallax Section Two</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non malesuada dolor. Vestibulum ipsum nisi, dictum sit amet semper id, auctor vel purus. Nunc in ipsum euismod leo interdum eleifend sed ut massa. Nunc ullamcorper imperdiet orci in scelerisque. Sed at scelerisque sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis vestibulum interdum velit ac venenatis. Praesent semper mollis laoreet. Morbi gravida rhoncus massa, at hendrerit ante mollis vel. Etiam sed lorem eu purus mollis ornare non eget eros.</p> </div> </div> </div> </section> |
CSS Kod Yapısı
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
@import url(http://fonts.googleapis.com/css?family=Inconsolata:400,700&subset=latin,latin-ext); html, body { width: 100%; height: 100%; font-family: "Inconsolata"; -webkit-font-smoothing: antialiased; background-color: #E9E7E7; } h1 { color: #F5A623; font-weight: 400; margin-bottom: 15px; margin-top: 0; font-size: 32px; } h2 { font-size: 32px; color: white; font-weight: 400; } h4 { font-size: 24px; margin-bottom: 50px; font-weight: 400; } .header { width: 100%; height: 100%; background-image: url("http://minimalcoding.net/wp-content/uploads/2015/06/res3.gif"); background-size: cover; background-position: center center; position: relative; background-attachment: fixed; left: 0; top: 0; } .header .mask { position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); } .header .mask .text-align { position: relative; display: inline-block; padding: 0px 20px; text-align: center; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); } .header a { color: #F5A623; font-size: 24px; position: absolute; bottom: 20%; left: 50%; transform: translate(-50%, 0%); -webkit-transform: translate(-50%, 0); -webkit-transition: color 300ms ease-in-out; -o-transition: color 300ms ease-in-out; transition: color 300ms ease-in-out; } .header a:hover, .header a:active, .header a:focus { text-decoration: none; color: white; } .section-one { padding-top: 50px; position: relative; padding-bottom: 50px; min-height: 500px; } .section-one a { color: #2D2E31; font-size: 24px; bottom: 20%; -webkit-transition: color 300ms ease-in-out; -o-transition: color 300ms ease-in-out; transition: color 300ms ease-in-out; } .section-one a:hover, .section-one a:active, .section-one a:focus { text-decoration: none; color: #F5A623; } |
Minimal Coding Privacy Policy
Sitemizi ziyaret eden kullanıcılar aşağıdaki koşulları, yazılanlarla sınırlı olmamak şartıyla kabul etmiş sayılacaktır. “www.minimalcoding.net” sitesinde yer alan tüm bilgiler,tasarım,logo,yorum ve tavsiyeler ile ses, görüntü, yazı içeren bilgi ve belgeler (“İçerik”) ile buradan yapılan tüm linkler, kullanıcıya genel bilgi vermek amacıyla sunulmuştur.
Burada mevcut olan İçerik, Minimal Coding'i Kaynak göstermeden paylaşılamaz ve yayınlanamaz. Bu siteye erişim serbest ve anonimdir.