Memasang Show Hide Scroll To Top Untuk Blog Amp
Scroll to top berkhasiat untuk mempermudah pengunjung untuk kembali ke atas sehabis menggulung layar ke bawah. Beberapa waktu yang kemudian aku sudah memposting beberapa action pada AMP, di antaranya action untuk ScrollToTop.
Dan sekarang kita akan menciptakan tombol ScrollToTop dengan show hide tombol onscroll yang aku sanggup dari halaman pola AMP. Namun di sini aku memakai ikon SVG untuk tombol ScrollToTop.
Untuk pengaruh show hide di AMP, kita memakai amp-position-observer dan amp-animation dan karenanya sanggup dicoba di demo berikut:
Silahkan scroll halamannya, ScrollToTop ini tidak ditampilkan di halaman static.
Jika Anda ingin mencoba menggunakannya, silahkan ikuti langkah-langkahnya berikut ini.
Silahkan simpan kedua js berikut di atas instruksi
</head>. Jika sudah ada di template maka silahkan lewati langkah ini. <b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "error_page"'>
<script async='async' custom-element='amp-position-observer' src='https://cdn.ampproject.org/v0/amp-position-observer-0.1.js'/>
<script async='async' custom-element='amp-animation' src='https://cdn.ampproject.org/v0/amp-animation-0.1.js'/>
</b:if>
Kemudian silahkan simpan CSS berikut pada style amp-custom
/* Scroll To Top */
.scrollToTop{color:#fafafa;font-size:1.4em;box-shadow:0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24);width:50px;height:50px;border-radius:100px;border:none;outline:0;background:#FF1744;z-index:9999;bottom:10px;right:10px;position:fixed;opacity:0;visibility:hidden}
#marker{position:absolute;top:100px;width:0;height:0}
.scrollToTop svg{width:34px;height:34px;vertical-align:middle;}
Untuk merubah warna tombol silahkan sesuaikan instruksi yang aku tandai di atas.
Kemudian di bawah instruksi
<body> silahkan simpan instruksi berikut untuk target action ScrollToTop. <div id='totop'/>
Dan terakhir silahkan simpan instruksi berikut di atas instruksi
</body> <b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "error_page"'>
<amp-animation id="showAnim"
layout="nodisplay">
<script type="application/json">
{
"duration": "200ms",
"fill": "both",
"iterations": "1",
"direction": "alternate",
"animations": [{
"selector": "#scrollToTopButton",
"keyframes": [{
"opacity": "1",
"visibility": "visible"
}]
}]
}
</script>
</amp-animation>
<amp-animation id="hideAnim"
layout="nodisplay">
<script type="application/json">
{
"duration": "200ms",
"fill": "both",
"iterations": "1",
"direction": "alternate",
"animations": [{
"selector": "#scrollToTopButton",
"keyframes": [{
"opacity": "0",
"visibility": "hidden"
}]
}]
}
</script>
</amp-animation>
<div id="marker">
<amp-position-observer on="enter:hideAnim.start; exit:showAnim.start"
layout="nodisplay">
</amp-position-observer>
</div>
<button id="scrollToTopButton"
on="tap:totop.scrollTo(duration=200)"
class="scrollToTop">
<svg viewBox="0 0 24 24">
<path fill="#fff" d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" />
</svg>
</button>
</b:if>
Selesai, silahkan cek penampakannya di halaman depan dan postingan.
Praktis bukan? Selamat mencoba
Sumber: https://ampbyexample.com/visual_effects/scroll_to_top/
0 Response to "Memasang Show Hide Scroll To Top Untuk Blog Amp"
Post a Comment