Parallax Scrolling Text Simple

Memasang Kode Parallax Scrolling Text Simple
Login ke akun blog klik tombol blog baru, buat satubuah link baru   
kemudian beri nama sesuai fungsi,  klik Edit HTML pada link baru tersebut, 
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut :  * Get Blank Template. edit background warna sesuai keinginan klik simpan selesai.

Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style>
body {
margin: 0;
font-family:'Latha', sans-serif;
color:#000;
} 
#bg {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirQVAeELBFv0lzvxLWjN-oq68HQ4CLjCcAtOusXcyGGs9fP0J5Mxjd_yBEtsJYq0HJD4sjceR_aKrzHu0bLWeFPtnCuFSY2XIw3iCnW-WWCqFNctmn5ehdkQ-we5sp8RE9_aSdWf2VE2Sn/s1600/Transparent-M2010.png");
  position: fixed;
  width: 100%;
  height: 4000px;
  z-index: 1;
  top: 0;
}
h1 {
  font-family: 'agency fb', serif;
  text-align: center;
  color:#333;
  font-size: 2.5em;
  background: rgba(255, 255, 255, 0.8);
  padding: 10px;
  border: 1px dotted #000;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  text-shadow: 1px 1px #222;
}
h3 {  
  font-family: 'Playbill', serif;
  text-align: center;
  font-size:3em;
  color:#ff0;
  background-color: rgba(13, 255, 151, 0.1);
  margin-top:-40px;
  padding: 16px;
  border: 1px dotted #000;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  text-shadow: 1px 1px #222;
}
 
#content {
  position: relative;
  z-index: 5;
  width: 800px;
  margin: 0 auto;
}
#content p {
  background: rgba(255, 255, 255, 0.8);
  padding: 20px;
  margin: 50px 0px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
  line-height: 1.8em;
  border: 1px dotted #000;
}
a {
  display: inline-block;
  padding: 10px 15px;
  background:#dad;
  color: #fff;   
  border-top: none;
  text-decoration: none;
  -webkit-transition: background .5s;
  transition: background .5s;  
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
}
a:hover {
  background: #000;
}
a[href='#content'] {
  float: right;
  border: 1px solid #fff;
  border-bottom: none;
}
</style>

<link href='http://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Arbutus+Slab' rel='stylesheet' type='text/css'>

<div id="bg"></div>
<div id="content"><br>
  <a rel="nofollow" rel="noreferrer"href="#bottom">Ke Bawah</a>

<h1>YOUR TEXT HERE</h1>  
 <p>Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br></p>
   
<p>Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br>
Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br></p>
   
<p>Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br>
Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br>Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br>
Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br></p>
   
<p>Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br>
Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br>Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br>
Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br></p>
   
<p>Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br>
Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br>Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br>
Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br></p>

<p id="bottom"> Edited by. Myscript2010</p>

<a rel="nofollow" rel="noreferrer"href="#content">Ke Atas</a>
</div>

<script src="//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js"></script>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>

<script>
    // Parallax function
function p() {
  // Get the scrollbar position
  var topPos = $(window).scrollTop();
  // Move our background at a slower rate than content
  $('#bg').css('top', (0 - (topPos * .2)) + 'px');
}
// Bind the Parallax function to the Scroll Event
$(window).on('scroll', function (e) {
    p();
});
// This just gives us the ability to scroll automatically, it is just a bonus...not needed for this to function.
$("a").click(function (event) {
    event.preventDefault();
    $('html,body').animate({
        scrollTop: $(this.hash).offset().top
      }, 2500, 'easeInOutQuad');
  }); 
  </script>

Code by. All Source
Edited by. Mys2010 On Codepen

DEMOSHOW

If you want to directly copy  &  paste you canDownload  Parallax Scrol Text Simple  

Category: Parallax Scrolling Text Simple