Posted by Aak
Aak-share.com Updated at: 5:37:00 AM

Cara Membuat Halaman Static Effek Paralax/Image Scrolling di Blog

No comments:
Cara Membuat Halaman Static Effek Paralax/Image Scrolling ~ Paralax menurut Istilah Fotografi adalah 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 akibat pergeseran perspektif sebagaimana dapat 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 menentukan jarak benda-benda langit.



Untuk Paralax yang ini bisa pergeseran pada sustu titik pada gambar, gambar pada titik akan terlihat bergerak atau bergeser ketika Anda scroll halaman baik itu keatas maupun kebawah, jika 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> lalu pasangkan kode 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 kode </body>, lalu salin kode 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 baru lalu copy kode 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!


Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments