examples/animations.amp.html - main - githubmirror/amphtml

examples/animations.amp.html
189 строк5 KB
Caroline Liu
Apply lang="en" to examples/ (#34759)
10 июн 2021, 17:30
10 июн 2021, 17:302ee75c4
<!doctype html>
<html ⚡ lang="en">
<head>
  <meta charset="utf-8">
  <title>Animations Examples</title>
  <link rel="canonical" href="amps.html" >
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-custom>
    .buttons {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
    }

    .block {
      width: 100px;
      height: 100px;
      display: block;
      background: pink;
      position: absolute;
      top: 50px;
      left: 10px;
      z-index: 2;
      --start-y: -240px;
      --start-o: 0.1;
    }

    .rot-image {
      --angle: 20deg;
      --delay: 0.1s;
    }
    #image3 {
      --angle: 10deg;
      --delay: 0.4s;
    }

    .rain {
      position: absolute;
      top: -20px;
      left: 0;
      right: 0;
      height: 0;
      z-index: 1000;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-around;
      align-items: center;
    }
    .drop {
      width: 20px;
      height: 20px;
      background: rgba(0, 0, 0, 0.25);
      border-radius: 50%;
    }

    @keyframes rotate {
      100% {
        transform: rotate(calc(var(--angle) * -3));
      }
    }

    @supports (unknown: red) {
      @keyframes rotate {
        100% {
          transform: rotate(calc(var(--angle) * -6));
        }
      }
    }
  </style>
  <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>
  <script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
</head>
<body>

<amp-animation id="anim1" layout="nodisplay" trigger="visibility">
<script type="application/json">
{
  "duration": "1s",
  "iterations": "4",
  "fill": "both",
  "direction": "alternate",
  "animations": [
    {
      "media": "(max-width: 320px)",
      "selector": ".rot-image",
      "easing": "cubic-bezier(0,0,.21,1)",
      "keyframes": {
        "transform": "rotate(var(--angle))"
      }
    },
    {
      "media": "(min-width: 321px)",
      "selector": ".rot-image",
      "delay": "var(--delay)",
      "easing": "cubic-bezier(0,0,.21,1)",
      "keyframes": "rotate"
    },
    {
      "animation": "anim2",
      "selector": "#image2",
      "easing": "cubic-bezier(0,0,.21,1)"
    },
    {
      "animation": "anim-rain",
      "--max-delay": "5s"
    }
  ]
}
</script>
</amp-animation>

<amp-animation id="anim2" layout="nodisplay">
<script type="application/json">
{
  "keyframes": [
    {"transform": "translateX(calc(width('#image1') / 2)) translateY(var(--start-y))", "opacity": "var(--start-o)"},
    {"transform": "translateY(calc(10% + 10px))", "opacity": "calc(var(--start-o) * 7)"}
  ]
}
</script>
</amp-animation>

<amp-animation id="anim-rain" layout="nodisplay">
<script type="application/json">
{
  "selector": ".drop",
  "--delay": "rand(0.1s, var(--max-delay))",
  "delay": "var(--delay)",
  "direction": "normal",
  "subtargets": [
    {
      "index": 0,
      "direction": "reverse"
    },
    {
      "selector": ".antigrav",
      "direction": "reverse",
      "--delay": "0s"
    }
  ],
  "keyframes": {"transform": "translateY(120vh)"}
}
</script>
</amp-animation>

<div class="rain">
  <div class="drop"></div>
  <div class="drop"></div>
  <div class="drop antigrav"></div>
  <div class="drop"></div>
  <div class="drop"></div>
  <div class="drop"></div>
  <div class="drop"></div>
</div>

<amp-img id="image1" class="rot-image"
    src="img/sea@2x.jpg"
    width=527 height=193 layout="responsive"></amp-img>

<amp-img id="image3" class="rot-image"
    src="https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w1002-h367-no/PANO_20150726_171347%257E2.jpg"
    width=527 height=193 layout="responsive"></amp-img>

<amp-img id="image2"
    class="block"
    layout="responsive" width="100" height="100"
    src="img/hero@1x.jpg"></amp-img>

<a id="a1"></a>

<div class="buttons">
  <button on="tap:anim1.start">Start</button>
  <button on="tap:anim1.restart">Restart</button>
  <button on="tap:anim1.restart(delay='-0.5s')">Restart at -0.5s</button>
  <button on="tap:anim1.pause">Pause</button>
  <button on="tap:anim1.resume">Resume</button>
  <button on="tap:anim1.togglePause">Toggle Pause</button>
  <button on="tap:anim1.seekTo(time=2000)">Seek to 500</button>
  <button on="tap:anim1.seekTo(percent=0.5)">Seek to 50%</button>
  <button on="tap:anim1.reverse">Reverse</button>
  <button on="tap:anim1.finish">Finish</button>
  <button on="tap:anim1.cancel">Cancel</button>
</div>

</body>
</html>