Cara Menciptakan Halaman Static Effek Paralax/Image Scrolling Di Blog

Cara Membuat Halaman Static Effek Paralax/Image Scrolling Paralax berdasarkan Istilah Fotografi yakni perubahan kedudukan sudut dari dua titik diam, relatif satu sama lain, sebagaimana yang diamati oleh seorang pengamat yang bergerak. Secara sederhana, paralaks merupakan pergeseran yang tampak dari suatu obyek (titik 1) terhadap latar belakang (titik 2) yang disebabkan oleh perubahan posisi pengamat.

Paralaks sering didefinisikan sebagai "pergerakan yang tampak" dari sebuah obyek terhadap latar belakang yang jauh tanggapan pergeseran perspektif sebagaimana sanggup dilihat pada gambar 1. Ketika dilihat dari titik pandang A, obyek tampak berada di depan kotak biru. Ketika titik pandang diubah ke titik pandang B, obyek tampak bergerak ke depan kotak merah. Fenomena ini biasa dimanfaatkan dalam astronomi untuk memilih jarak benda-benda langit.

Demo   CODE

Untuk Paralax yang ini sanggup pergeseran pada sustu titik pada gambar, gambar pada titik akan terlihat bergerak atau bergeser dikala Anda scroll halaman baik itu keatas maupun kebawah, jikalau Anda amati gambar akan bergerak dari satu titik ketitik yang lain . Untuk membuatnya berikut langkah-langkahnya :

Silahkan buka editor Template , kemudian Anda cari kode ]]></b:skin> kemudian pasangkan aba-aba dibawah ini diatasnya :

.Parallasse{
margin:200px 0px;
background-color:#555555;
background-attachment:fixed;
background-repeat:repeat-y;
background-size: auto 120vh;
background-position:50vw center;
}
.Img_1{
  background-image:url('URL Gambar');
}
.Img_2{
  background-image:url('URL Gambar');
}
.Img_3{
  background-image:url('URL Gambar');
}
.Img_4{
  background-image:url('URL Gambar');
}
.TitleText{
  color:white;
  font-size:18px;
  padding:40px 55% 40px 40px;
}
a{
color:orange;
}

Selanjutnya Anda cari aba-aba </body>, kemudian salin aba-aba dibawah ini dan pasangkan diatasnya

<script src="/assets/common/stopExecutionOnTimeout.js?t=1"></script>
<script type="text/javascript">
function getPosition(element) {
    var xPosition = 0;
    var yPosition = 0;
    while (element) {
        if (window.CP.shouldStopExecution(1)) {
            break;
        }
        xPosition += element.offsetLeft - element.scrollLeft + element.clientLeft;
        yPosition += element.offsetTop - element.scrollTop + element.clientTop;
        element = element.offsetParent;
    }
    window.CP.exitedLoop(1);
    return {
        x: xPosition,
        y: yPosition
    };
}
function SetBackgroundPos(w) {
    b = (document.documentElement || document.body.parentNode || document.body).scrollTop;
    e = getPosition(w);
    c = b - e.y;
    valY = e.y / 10;
    valH = 120 + c / 50;
    w.style.backgroundPosition = '50vw  ' + c * 0.1 + 'px ';
    w.style.backgroundSize = 'auto ' + valH + 'vh';
}
var myList = document.getElementsByClassName('Parallasse');
window.onscroll = function (event) {
    for (n = 0; n < myList.length; n++) {
        if (window.CP.shouldStopExecution(2)) {
            break;
        }
        SetBackgroundPos(myList[n]);
    }
    window.CP.exitedLoop(2);
};
</script>

Selanjutnya pemasangan HTML, silahkan Anda menuju Entri gres kemudian copy aba-aba dibawah ini dan pastekan pada mode HTML .

<div class="Parallasse Img_1" style="background-position: 50vw -20px; background-size: auto 116vh;">
  <div class="TitleText">
    <a href="URL Tujuan" target="_blank">Judul Artikel</a>

Tuliskan Deskripsi Artikel Anda disini

</div>
</div>
<div class="Parallasse Img_2" style="background-position: 50vw -73.2px; background-size: auto 105.36vh;">
  <div class="TitleText">
  <a href="URL Tujuan" target="_blank">Judul Artikel</a>

Tuliskan Deskripsi Artikel Anda disini

</div>
</div>
<div class="Parallasse Img_3" style="background-position: 50vw -126.4px; background-size: auto 94.72vh;">
  <div class="TitleText">
    <a href="URL Tujuan" target="_blank">Judul Artikel</a>

Tuliskan Deskripsi Artikel Anda disini

</div>
</div>
<div class="Parallasse Img_4" style="background-position: 50vw -179.60000000000002px; background-size: auto 84.08vh;">
  <div class="TitleText">
    <a href="URL Tujuan" target="_blank">Judul Artikel</a>

Tuliskan Deskripsi Artikel Anda disini

</div>
</div>

Semoga bermanfaat!



Sumber http://www.websiteedukasi.com/