× İletişim Formu AMP'de Gizle / Göster / Değiştir Örnekleri Arlina Design 8/30/2017 Etiketler : AMP Arlina Design <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <title>AMP'de Gizle / Göster / Değiştir Örnekleri</title> <link rel="canonical" href="amps.html" > <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate> body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both} @-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} @-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} @-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} @-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} @keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} </style> <noscript> <style amp-boilerplate> body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style> </noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> <style type="text/css"> /* Styles for example */ body{font:14px/1 sans-serif} .button-set{padding:0 10px;margin:10px 0} button{background:transparent;cursor:pointer;border:2px solid #000;border-width:0 0 2px;padding:4px 0;margin-right:10px;font-size:14px} h3{font-size:14px;display:inline-block;margin:0;width:140px} #normal-element{background:#f0f0f0;padding:10px} .spacer{height:100vh} </style> </head> <body> <div class="button-set"> <h3>AMP.navigateTo()</h3> <button on="tap:AMP.navigateTo(url='http://google.com')">google.com</button> <select on="change:AMP.navigateTo(url=event.value)"> <option value="http://google.com">google.com</option> <option value="http://yahoo.com">yahoo.com</option> <option value="http://bing.com">bing.com</option> </select> </div> <div class="button-set"> <h3>AMP.print()</h3> <button on="tap:AMP.print">Yazdır</button> </div> <div class="button-set"> <h3>amp-img:</h3> <button on="tap:img-on-viewport.show">Göster</button> <button on="tap:img-on-viewport.hide">Gizle</button> <button on="tap:img-on-viewport.toggleVisibility">Görünürlüğü aç / kapat</button> </div> <div class="button-set"> <h3>Normal element:</h3> <button on="tap:normal-element.show">Göster</button> <button on="tap:normal-element.hide">Gizle</button> <button on="tap:normal-element.toggleVisibility">Görünürlüğü aç / kapat</button> <button on="tap:normal-element2.scrollTo">Kaydırma</button> <button on="tap:normal-element2.scrollTo('position' = 'bottom')">Alta Kaydır</button> <button on="tap:normal-element2.scrollTo('position' = 'center')">Kaydırma Merkezi</button> <button on="tap:normal-element2.scrollTo('duration' = 5000)">Yavaşça Kaydırma</button> <button on="tap:input-element.focus">Odakla</button> <button on="tap:normal-element2.scrollTo('position' = 'top'), input-element.focus">Kaydır ve Odakla</button> </div> <amp-img src="https://ampbyexample.com/img/amp.jpg" layout="responsive" width="1080" height="610" id="img-on-viewport"></amp-img> <div id="normal-element" hidden> Başlangıçta gizlenmiştim. </div> <div class="spacer"> </div> <div id="normal-element2"> Beni görmek için dolaşmak zorundasın. </div> <input type="text" id="input-element"/> <div class="spacer"> </div> </html> YENİ YAYIN ÖNCEKİ YAYIN "AMP'de Gizle / Göster / Değiştir Örnekleri" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
AMP'de Gizle / Göster / Değiştir Örnekleri Arlina Design 8/30/2017 Etiketler : AMP Arlina Design <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <title>AMP'de Gizle / Göster / Değiştir Örnekleri</title> <link rel="canonical" href="amps.html" > <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate> body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both} @-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} @-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} @-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} @-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} @keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} </style> <noscript> <style amp-boilerplate> body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style> </noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> <style type="text/css"> /* Styles for example */ body{font:14px/1 sans-serif} .button-set{padding:0 10px;margin:10px 0} button{background:transparent;cursor:pointer;border:2px solid #000;border-width:0 0 2px;padding:4px 0;margin-right:10px;font-size:14px} h3{font-size:14px;display:inline-block;margin:0;width:140px} #normal-element{background:#f0f0f0;padding:10px} .spacer{height:100vh} </style> </head> <body> <div class="button-set"> <h3>AMP.navigateTo()</h3> <button on="tap:AMP.navigateTo(url='http://google.com')">google.com</button> <select on="change:AMP.navigateTo(url=event.value)"> <option value="http://google.com">google.com</option> <option value="http://yahoo.com">yahoo.com</option> <option value="http://bing.com">bing.com</option> </select> </div> <div class="button-set"> <h3>AMP.print()</h3> <button on="tap:AMP.print">Yazdır</button> </div> <div class="button-set"> <h3>amp-img:</h3> <button on="tap:img-on-viewport.show">Göster</button> <button on="tap:img-on-viewport.hide">Gizle</button> <button on="tap:img-on-viewport.toggleVisibility">Görünürlüğü aç / kapat</button> </div> <div class="button-set"> <h3>Normal element:</h3> <button on="tap:normal-element.show">Göster</button> <button on="tap:normal-element.hide">Gizle</button> <button on="tap:normal-element.toggleVisibility">Görünürlüğü aç / kapat</button> <button on="tap:normal-element2.scrollTo">Kaydırma</button> <button on="tap:normal-element2.scrollTo('position' = 'bottom')">Alta Kaydır</button> <button on="tap:normal-element2.scrollTo('position' = 'center')">Kaydırma Merkezi</button> <button on="tap:normal-element2.scrollTo('duration' = 5000)">Yavaşça Kaydırma</button> <button on="tap:input-element.focus">Odakla</button> <button on="tap:normal-element2.scrollTo('position' = 'top'), input-element.focus">Kaydır ve Odakla</button> </div> <amp-img src="https://ampbyexample.com/img/amp.jpg" layout="responsive" width="1080" height="610" id="img-on-viewport"></amp-img> <div id="normal-element" hidden> Başlangıçta gizlenmiştim. </div> <div class="spacer"> </div> <div id="normal-element2"> Beni görmek için dolaşmak zorundasın. </div> <input type="text" id="input-element"/> <div class="spacer"> </div> </html>
Yorum Gönder