Css ile Basit Parallax Background Effect yapımı

16 Haziran 2015

minimalcoding

2426 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ı




 <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>

<h1>Only CSS <br/>Simple Parallax Background Effect </h1>

</div>

</div>

</section>

<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>

</section>

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;
}

@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;

}

Css ile Basit Parallax Background Effect yapımı

Örnek

Html Kod Yapısı

CSS Kod Yapısı

Yorum yap