Farallax Text Scroll

Memasang kode Farallax Text Scroll Untuk menerapkan kode tersebut
Langkah awal 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 dan 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

Parallax Step 1 - Link 1

 <style class="Mys2010-styles">
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top: -15px;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #fff;  
font-size:  6px;
background: -moz-linear-gradient(top, #333 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad;  
}
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
text-shadow: 0px 0px #FFf;  
font-size:  11px;
background:  #111;
border-top: 2px solid #f0f;
z-index: 9999;
}  
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #666 50%, transparent 90%); 
}

#M-2010, #teks, #posisi, #dibawah  {
    position: absolute;
    font-size: 11px;
    margin: 2px
}
#M-2010, #teks div {
    text-decoration: underline;
    cursor: pointer
}
#teks, #posisi {
    text-align: right;
    right:  50px;
}
#teks, #dibawah {
    text-align: left;
    left:  50px;
}
 #dibawah, #posisi {
    bottom: 17px;
}

#Wrapper {
  width: 100%;
  position: relative;
  display: block;
  text-align: center;
  height: 300vh;
  background: #fff;
  z-index: 98;
}
#Title{
  color: #fff;
  font-family: audiowide;
  text-align: left;
  display: inline-block;
  z-index: 2;
  position:fixed;
  top: 20%;
  left: 23%;
}
#Title h1{
  font-size: 8vw;
  margin-bottom: 0;
  padding-bottom: 0;
  opacity: 0;
}
#Title h3 {
  font-family: lato;
  font-weight: 100px;
  font-size: 3vw;
  margin-top: -0.5em;
  padding-top: 0;
  margin-left: 2px;
  opacity: 0;
}
#Title h3 span {
  font-size: 40px;
  margin-left: 3px;
  opacity: 0.7;
}
#surfingVideo {
  width: 100vw;
  height: auto;
  min-height: 100vh;
  background: #000;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}
.pagar-1 {
   -webkit-animation: parallax_bg linear -20s infinite both;
           animation: parallax_bg linear -20s infinite both;
  background: url(http://www.fellowshipbbc.org/wp-content/uploads/2013/05/Semitransparent-red-background-20-percent-opacity.png) 0 100% repeat-x;
  z-index: 1;
  position: absolute;
  bottom:-370px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 935px; 
}
</style>

<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> EDITED BY. <a href="https://Link Download"title="Download Full Code"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> COPYRIGHT <a href="http://demoshow-mys2010.blogspot.co.id/2016/07/pemutar-videoe-text-scroll.html"title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; PLAY - Mp4 </a> 
</div>
<h2>
<audio id="mys2010" src="https://sites.google.com/site/studiedingsongmp3/laguku/Capoeira-Paranaue-Mys2010.mp3"controls="controls"></audio></h2>
</a></div>
</div>

<div id="mainWrapper">
<div class="row" id="Wrapper">
<video id="surfingVideo" width="1280" height="720" autoplay loop muted>
<source src="https://sites.google.com/site/code6916/file/Cibeber-Cimahi-M2010s.mp4" type="video/mp4">
</video>
<div id="Title">

<div id="butterfly">
<div id="butter1" class="butter">
<div class="butterFly1 butterFly">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYDu2_nwIs7Mf5uVt-5FXf8StHrcDhOjVftC5fXM-xyvUHGQKevo-Fce8cDRBwxJQ5n5Zc-aiOGAX3wlB0ElD6Izq6HNSaoYo4Mun1LWHndPtQnpCKZ4FtzSXV4YxzQYi3EOtvQ3mt-CE/s1600/kupu-3-mys2010.png" alt="" /></div>
</div>
<div id="butter2" class="butter">
<div class="butterFly2 butterFly">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYcIHGLveuhclVgXgQ3oTtkaByfp7fe9hI9WBpE1oduK0Cfi7hFrGXBdNiPkS7MoYAdBfUwT7OM6DIY4z6NuJFcKsA7_byxnwlJlK3LYU3oXn2W32uBeHqQDCGzib7w39mxpZ_mBTZ1lU/s1600/kupu-2-mys2010.png" alt="" /></div>
</div>
<div id="butter3" class="butter">
<div class="butterFly3 butterFly">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPhwTjGg1wpc47Ozb9pbvbZwTrXVomtaVwIm7p0Brd4fLrScxBpkRWVDpcO_11NzA1SSbBOeHLcIj2xro7Up6nQIpS3eeaxHh1f2i9yqGAa4YEvkLaYBy_ALSkZGIxU04I9GDnINceX4I/s1600/kupu-1-mys2010.png" alt="" /></div>
</div>
</div>
<link href="https://sites.google.com/site/usesitesto/file-code/kupu-kupu-mys2010.css " rel="stylesheet" type="text/css">

<h1>
<span style="color:blue">Parallax</h1>
<h3>
<span style="color:green">Edited by . Myscript2010</p>
<span>Learn Editing Script Cibeber Cimahi</span></h3>
</div>


<div class="parallax pagar-1">
<div style="position: fixed; bottom: 29px; right: 10px;width:100px;height:100px;">
<a href="https://sites.google.com/site/code6916/file/Cibeber-Cimahi-M2010s.mp4"><img border="0" src="https://sites.google.com/site/pelajaranku1/fileku/logo-mys2010.png" title="Download Mp4" width="90" height="20"></a>   
</div>
<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/07/farallax-text-scroll.html" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>
</div>

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>
<script src='https://sites.google.com/site/code6916/file/jQuery-Parallax-M2010.css'>
</script> 

<script>resizeDebounced = true;
resizeDebounceTime = 100;
resizeDebounce = null;
$(function () {
    resize();
    window.onscroll = function () {
        var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        if (window.pageYOffset > h * 3) {
            $('#Wrapper').addClass('done');
            $('#surfingVideo')[0].pause();
        } else {
            $('#surfingVideo')[0].play();
            $('#Wrapper').removeClass('done');
            $('#Title h1').css({ opacity: Math.min(Math.linearConvert(h * 3 * 0.05, h * 3 * 0.5, 0, 1, pageYOffset), 1) });
            $('#Title h3').css({ opacity: Math.min(Math.linearConvert(h * 3 * 0.35, h * 3 * 0.5, 0, 1, pageYOffset), 1) });
        }
        var chap2IntroTop = $('#chap2Intro').offset().top;
        var chap2IntroBottom = chap2IntroTop + $('#chap2Intro').height();
        if (pageYOffset >= chap2IntroBottom || pageYOffset + h < chap2IntroTop) {
            $('#chap2Intro').addClass('offscreen');
        } else {
            $('#chap2Intro').removeClass('offscreen');
            var imgpos = Math.linearConvert(chap2IntroTop - h, chap2IntroBottom, -(w * 0.1), -(w * 0.3), pageYOffset);
            $('#chap2Intro img').css({ 'transform': 'translate3d(' + imgpos + 'px,0,0)' });
        }
        $('.fader, .interstitial').each(function (idx) {
            if ($(this).onScreen()) {
                $(this).addClass('visible');
            } else {
                $(this).removeClass('visible');
            }
        });
    };
});
window.onresize = function () {
    if (resizeDebounced) {
        resize();
    }
};
function resize() {
    resizeDebounced = false;
    try {
        clearTimeout(resizeDebounce);
    } catch (e) {
    }
    if ($(window).width() / $(window).height() < 1.777777777) {
        $('#mainWrapper').removeClass('landscape').addClass('portrait');
    } else {
        $('#mainWrapper').removeClass('portrait').addClass('landscape');
    }
    resizeDebounce = setTimeout(function () {
        resizeDebounced = true;
    }, resizeDebounceTime);
}
Math.linearConvert = function (oldMin, oldMax, newMin, newMax, oldValue) {
    return (oldValue - oldMin) * (newMax - newMin) / (oldMax - oldMin) + newMin;
};
$.fn.onScreen = function () {
    var et = $(this).offset().top;
    var pb = window.pageYOffset + $(window).height();
    return pb > et + 50;
};

</script>

<ul class="mys2010-list">
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>   
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>  
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>   
<script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script> 
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js">
</script> 

<script>
      $(function () {
$('video,audio').mediaelementplayer({
success: function (mediaElement, domObject) {
var audio_src = $('li.current').attr('data-url');
mediaElement.setSrc(audio_src);
mediaElement.addEventListener('ended', function (e) {
mys2010PlayNext(e.target);
}, false);
},
keyActions: []
});
$('.mys2010-list li').click(function () {
$(this).addClass('current').siblings().removeClass('current');
var audio_src = $(this).attr('data-url');
$('audio#mys2010:first').each(function () {
this.player.pause();
this.player.setSrc(audio_src);
this.player.play();
});
});
});
function mys2010PlayNext(currentPlayer) {
if ($('.mys2010-list li.current').length > 0) {
var current_item = $('.mys2010-list li.current:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('if ' + audio_src);
} else {
var current_item = $('.mys2010-list li:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('elseif ' + audio_src);
}
if ($(current_item).is(':last-child')) {
$(current_item).removeClass('current');
} else {
currentPlayer.setSrc(audio_src);
currentPlayer.play();
}}    
</script>

Lihat Step 1 pada link 1 
DISPLAYS

If you want to directly copy  and  paste you canDownload Here  Farallax Text Scroll 

Step 2 link 2 Pemutar Video 
SEE THE CODE

Source code by. All Sources
Design code is edited by. Mys2010 In Codepen

Category: Farallax Text Scroll

Tweet