ÖRNEK İNDİR
Html Kod Yapısı
Simple Parallax Section Two
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.
CSS Kod Yapısı
@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;
}
KAYNAK: http://minimalcoding.net/blog/css-ile-basit-parallax-background-effect-yapimi/
