1. Hello Guest, selamat datang di Forum WinPoin. Kamu bisa bertanya, berdiskusi, sharing, dan ngobrolin apapun seputar Windows, Windows Phone, PC, Gadget, atau hal seputar Teknologi lainnya. Selamat berkomunitas! ;)

Solved Cara Menggunakan Library Jquery ScrollMe

Discussion in 'Developer Corner' started by Ahmad Jazuli, Sep 23, 2017.

Thread Status:
Not open for further replies.
  1. Ahmad Jazuli

    Ahmad Jazuli Member

    Joined:
    Jun 2, 2017
    Messages:
    60
    scroll.jpg
    Jquery ScrollMe
    ini saya gunakan agar "konten baru" muncul setelah di Scroll dulu.
    Jika di Platform Wordpress menggunakan Plugin, di Blog, saya ingin menggunakkan Jquery ScrollMe ini..

    Masalahnya, saat saya coba dengan kodingan diatas, tidak terjadi apa-apa.. adakah teman-teman yang bisa membantu ?? :);)
    Documentation : http://scrollme.nckprsn.com
     
  2. Ambrizal Suryadinata

    Ambrizal Suryadinata Saya Ganteng Staff Member

    Joined:
    Jan 25, 2014
    Messages:
    2,587
    konten baru muncul setelah discroll ?
    Ini Infinite Scroll atau Scroll Effect ?.
     
  3. NubieBytes

    NubieBytes Member

    Joined:
    Sep 6, 2017
    Messages:
    89
    Mungkin kurang file ".css" nya itu mas Jazuli. Dari ss saya tidak lihat ada tag untuk ngambil css. Script ini 'kan elemennya selain js itu sendiri juga membutuhkan css untuk marking effect-nya. Mungkin saya salah sih.
    Tapi coba aja tambahkan:
    Code:
    <link rel="stylesheet" href="http://scrollme.nckprsn.com/style.css" media="screen">
    di bawah/di atas tag berikut:
    Code:
    <script src=""></script>
    Save dan test running.
    Saya coba ini secara lokal di pc.
    Code:
    <!DOCTYPE html>
    <html>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <head>
    <title>Test ScrollMe</title>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
    <script src='http://scrollme.nckprsn.com/js/jquery.scrollme.js'></script>
    <style type='text/css'>
    * { text-align:center; }
    
    .wrapper
    {
      max-width:30em;
      margin:2em auto;
    }
    
    .scrollme
    {
      padding:2em;
      border:1em solid #e8e8e8;
      perspective:600px;
    }
    
    .animateme
    {
      width:80%;
      padding:10%;
      background:#e8e8e8;
      transform-origin:center center center;
    }
    </style> 
    </head>
     
    <body>
    <div class="wrapper">
    <h1>ScrollMe PlayMe</h1>
    
    <p>&darr;</p><p>&darr;</p><p>&darr;</p><p>&darr;</p><p>&darr;</p><p>&darr;</p><p>&darr;</p><p>&darr;</p>
    <p>&darr;</p><p>&darr;</p><p>&darr;</p><p>&darr;</p><p>&darr;</p><p>&darr;</p><p>&darr;</p><p>&darr;</p>
      
    <div class="scrollme">
    <h2>Scroll me!</h2>
    <div 
    class="animateme"
    data-when="span"
    data-from="0"
    data-to="1"
    data-easing="easeinout"
    data-rotatey="360"
    >
    <h2>Animate me!</h2><h2>Animate me!</h2><h2>Animate me!</h2><h2>Animate me!</h2><h2>Animate me!</h2><h2>Animate me!</h2><h2>Animate me!</h2><h2>Animate me!</h2><h2>Animate me!</h2><h2>Animate me!</h2>
    </div>
    </div>
      
    <p>&uarr;</p><p>&uarr;</p><p>&uarr;</p><p>&uarr;</p><p>&uarr;</p><p>&uarr;</p><p>&uarr;</p><p>&uarr;</p>
    <p>&uarr;</p><p>&uarr;</p><p>&uarr;</p><p>&uarr;</p><p>&uarr;</p><p>&uarr;</p><p>&uarr;</p><p>&uarr;</p>
      
    </div>
    </body>
    </html>
    It work! Silakan dicoba.
    P.S: Klo masih ngga work, coba link rel dan script src ditambahkan langsung ke dalam template blog yang mas pake.
     
    Last edited: Sep 23, 2017
    • Like Like x 1
  4. Ahmad Jazuli

    Ahmad Jazuli Member

    Joined:
    Jun 2, 2017
    Messages:
    60
  5. Ahmad Jazuli

    Ahmad Jazuli Member

    Joined:
    Jun 2, 2017
    Messages:
    60
    Kurang tahu juga mas, baru belajar hihi..
     
  6. NubieBytes

    NubieBytes Member

    Joined:
    Sep 6, 2017
    Messages:
    89
    Saya sudah coba copas seluruh tag html yang saya buat secara lokal, di textbox area untuk isi content pada blog, memang ngga work, karena template yang aktif adalah template yang sudah di modifikasi. Dan, ngga ngizinin ada input script lain jika langsung diinput dari textbox area.

    Pada console, memang terdapat error, tapi itu ngga berhubungan dengan scrollme, tapi script lain yang sudah terpasang di blog mas Jazuli. Jika mas Jazuli cek di console untuk setiap halaman pada blog akan muncul error. Mungkin script² yg ada terpasang pada template ada yang ngga kompatibel dengan versi browser yg sekarang dipake.

    Saran saya sih, mas Jazuli edit template custom yang sekarang dipake. Jika kita input script scrollme dkk pada template dia bisa work (IMHO). Tapi perlu hati-hati juga, karena perlu nyesuaikan dengan elemen² css yang sudah ada di template, karena itu bisa merubah layout dari halaman² blog. Mas akan lihat apa yang saya maksud, jika cek ke link yang saya kasih di bawah. Layout (alignment) text di halaman blog saya berubah, karena ngga melakukan penyesuaian.

    Contohnya:
    [​IMG]
    Hasilnya:
    Test ScrollMe

    P.S: Ini script yang terdeteksi error di template blog mas Jazuli. Tapi itu ngga masalah sih sebenarnya.
    Code:
    <script type='text/javascript'>
    //Related Post Thumb
    $("ul#related-summary li img").each(function(){$(this).attr("src",$(this).attr("src").replace(/\/s[0-9]+(\-c)?\//,"/w200-h140-c/"))});
    //<![CDATA[
    // Nav
    !function(t){var e=t("a.blog-pager-newer-link"),l=t("a.blog-pager-older-link");t.get(e.attr("href"),function(l){e.html(t(l).find(".post h1.post-title").text())},"html"),t.get(l.attr("href"),function(e){l.html(t(e).find(".post h1.post-title").text())},"html")}(jQuery);
    // Double Click
    $('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
    function blockLinks(e,n){for(var a=document.getElementById(e),m=a.getElementsByTagName(n),t=0;t<m.length;t++)-1!==m[t].innerHTML.indexOf("</a>")&&(m[t].innerHTML="Warning!! SPAM has been detected!",m[t].className="spammer-detected")}blockLinks("comment_block","p");
    //]]>
    </script>
    <script type='text/javascript'>
    //<![CDATA[
    // Sticky widget
    $(function(){if($("#HTML4").length){var o=$("#HTML4"),t=$("#HTML4").offset().top,i=$("#HTML4").height();$(window).scroll(function(){var s=$("#comments").offset().top-i+100,f=$(window).scrollTop();if(f>t?o.css({position:"fixed",top:80}):o.css("position","static"),f>s){var n=s-f;o.css({top:n})}})}});
    //]]>
    </script>
     
    Last edited: Sep 24, 2017
    • Informatif Informatif x 1
  7. Ahmad Jazuli

    Ahmad Jazuli Member

    Joined:
    Jun 2, 2017
    Messages:
    60
    Tapi mas, saat saya hapus kode script yang "Error di Console" pada Template saya, dan saya coba ternyata berhasil..
    hehe, makasih banyak ilmunya mas :pegel:
     
  8. NubieBytes

    NubieBytes Member

    Joined:
    Sep 6, 2017
    Messages:
    89
    Heheh.. memang sih. Menghapus script yg error ada dalam pikiran saya. Hanya saja, karena saya ngga tahu fungsi script itu untuk apa di template yg dipake, jadi saya ngga nyaranin. Kind of Respect untuk yg buat template, jadi saya ngga pernah kasih saran untuk menghapus script bawaan.

    Klo modifikasi sih, saya rasa okelah. Heheh...
    Saya pribadi jarang nyentuh blog yg di blogspot, hanya yg di wordpress.
     
Thread Status:
Not open for further replies.

Share This Page