× İletişim Formu Blogger AMP HTML Başa Dön Butonu (Scroll To Top) Arlina Design 2/05/2018 Etiketler : AMP Arlina Design <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <HTML amp='amp'> <head> <style amp-custom='amp-custom'> .post-body{padding:16px} .post{width: 100%;height:250px;margin-bottom:16px;border:2px solid #ddd} .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);cursor:pointer;width:40px;height:40px;border-radius:2px;border:none;outline:0;background:#ff9b51;z-index:99;bottom:16px;right:16px;position:fixed;opacity:0;visibility:hidden} #marker{position:absolute;top:100px;width:0;height:0} .scrollToTop:after{background: no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIGhlaWdodD0iMjQiIHdpZHRoPSIyNCI+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik01IDR2MmgxNFY0SDV6bTAgMTBoNHY2aDZ2LTZoNGwtNy03LTcgN3oiLz48L3N2Zz4=);content:'';margin:0;display:inline-block;vertical-align:middle;width:24px;height:24px} </style> <script async='async' src='https://cdn.ampproject.org/v0.js'></script> <script async='async' custom-element='amp-position-observer' src='https://cdn.ampproject.org/v0/amp-position-observer-0.1.js'></script> <script async='async' custom-element='amp-animation' src='https://cdn.ampproject.org/v0/amp-animation-0.1.js'></script> </head> <body> <div id='totop'></div> <div class='post-body'> <div class='post'></div> <div class='post'></div> <div class='post'></div> <div class='post'></div> <div class='post'></div> <div class='post'></div> <div class='post'></div> <div class='post'></div> <div class='post'></div> <div class='post'></div> </div> <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"></button> </body> </HTML> YENİ YAYIN ÖNCEKİ YAYIN "Blogger AMP HTML Başa Dön Butonu (Scroll To Top)" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Blogger AMP HTML Başa Dön Butonu (Scroll To Top) Arlina Design 2/05/2018 Etiketler : AMP Arlina Design <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <HTML amp='amp'> <head> <style amp-custom='amp-custom'> .post-body{padding:16px} .post{width: 100%;height:250px;margin-bottom:16px;border:2px solid #ddd} .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);cursor:pointer;width:40px;height:40px;border-radius:2px;border:none;outline:0;background:#ff9b51;z-index:99;bottom:16px;right:16px;position:fixed;opacity:0;visibility:hidden} #marker{position:absolute;top:100px;width:0;height:0} .scrollToTop:after{background: no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIGhlaWdodD0iMjQiIHdpZHRoPSIyNCI+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik01IDR2MmgxNFY0SDV6bTAgMTBoNHY2aDZ2LTZoNGwtNy03LTcgN3oiLz48L3N2Zz4=);content:'';margin:0;display:inline-block;vertical-align:middle;width:24px;height:24px} </style> <script async='async' src='https://cdn.ampproject.org/v0.js'></script> <script async='async' custom-element='amp-position-observer' src='https://cdn.ampproject.org/v0/amp-position-observer-0.1.js'></script> <script async='async' custom-element='amp-animation' src='https://cdn.ampproject.org/v0/amp-animation-0.1.js'></script> </head> <body> <div id='totop'></div> <div class='post-body'> <div class='post'></div> <div class='post'></div> <div class='post'></div> <div class='post'></div> <div class='post'></div> <div class='post'></div> <div class='post'></div> <div class='post'></div> <div class='post'></div> <div class='post'></div> </div> <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"></button> </body> </HTML>
Yorum Gönder