third_party/polymer/components-chromium/core-pages/demo.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4
   5   <meta charset="utf-8">
   6   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   7
   8   <title>core-pages</title>
   9
  10   <script src="../platform/platform.js"></script>
  11
  12   <link rel="import" href="core-pages.html">
  13
  14   <style>
  15
  16     html, body {
  17       height: 100%;
  18     }
  19
  20     body {
  21       display: flex;
  22       justify-content: center;
  23       align-items: center;
  24       font-family: sans-serif;
  25     }
  26
  27     core-pages {
  28       width: 300px;
  29       height: 300px;
  30       border: 1px solid black;
  31       -webkit-user-select: none;
  32       border-radius: 5px;
  33     }
  34
  35     core-pages > div {
  36       display: flex;
  37       justify-content: center;
  38       align-items: center;
  39       border-radius: inherit;
  40     }
  41
  42     core-pages.fancy {
  43       border: none;
  44       margin-left: 2em;
  45     }
  46
  47     core-pages.fancy > div {
  48       opacity: 0;
  49       -webkit-transform: translate3d(-100px, 0, 0) scale(0.9);
  50       transform: translate3d(-100px, 0, 0) scale(0.9);
  51       transition: all 1s cubic-bezier(.03,.56,.7,.98);
  52       color: white;
  53     }
  54
  55     core-pages.fancy > div:nth-child(1) {
  56       background-color: red;
  57     }
  58
  59     core-pages.fancy > div:nth-child(2) {
  60       background-color: green;
  61     }
  62
  63     core-pages.fancy > div:nth-child(3) {
  64       background-color: blue;
  65     }
  66
  67     core-pages.fancy > div:nth-child(4) {
  68       background-color: purple;
  69     }
  70
  71     core-pages.fancy > div:nth-child(5) {
  72       background-color: black;
  73     }
  74
  75     core-pages.fancy .core-selected + div {
  76       -webkit-transform: translate3d(100px, 0, 0) scale(0.9);
  77       transform: translate3d(100px, 0, 0) scale(1);
  78     }
  79
  80     core-pages.fancy .core-selected {
  81       opacity: 1;
  82       -webkit-transform: translateX(0);
  83       transform: translateX(0);
  84     }
  85
  86     core-pages.fancy div.begin {
  87       -webkit-transform: translate3d(100px, 0, 0) scale(0.9);
  88       transform: translate3d(100px, 0, 0) scale(0.9);
  89     }
  90
  91   </style>
  92
  93 </head>
  94 <body unresolved>
  95
  96   <core-pages id="first" selected="0">
  97     <div>One</div>
  98     <div>Two</div>
  99     <div>Three</div>
 100     <div>Four</div>
 101     <div>Five</div>
 102   </core-pages>
 103
 104   <core-pages class="fancy" selected="0">
 105     <div>One</div>
 106     <div>Two</div>
 107     <div>Three</div>
 108     <div>Four</div>
 109     <div>Five</div>
 110   </core-pages>
 111
 112   <script>
 113     document.querySelector('#first').onclick = function(e) {
 114       this.selected = (this.selected + 1) % this.items.length;
 115     };
 116
 117     document.querySelector('core-pages.fancy').onclick = function(e) {
 118       this.selected = (this.selected + 1) % this.items.length;
 119       this.async(function() {
 120         if (this.selectedIndex == 0) {
 121           this.selectedItem.classList.remove('begin');
 122         } else if (this.selectedIndex == this.items.length - 1) {
 123           this.items[0].classList.add('begin');
 124         }
 125       });
 126     };
 127   </script>
 128
 129 </body>
 130 </html>