From a142caf76fa5cb13da81822e008c1a7357d5f762 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Fri, 3 Mar 2017 19:22:09 +0800 Subject: Add pure CSS Parallax effect (exp) --- docs/experimentals.html | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) (limited to 'docs/experimentals.html') diff --git a/docs/experimentals.html b/docs/experimentals.html index e1caab9..95d6bc4 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -62,6 +62,9 @@
  • Meters
    • +
  • + Parallax +
  • Progress
    • @@ -125,6 +128,41 @@ <!-- Meter is red when value < low < high < optimum or optimum < low < high < value --> <meter class="meter" value="20" optimum="90" min="0" max="100" low="30" high="80"></meter> + + + +
    +

    Parallax

    +
    +

    The Parallax acts like Apple TV parallax effect. It is pure CSS Parallax effect.

    +
    +
    +
    +
    +
    +
    +
    +
    +
    + macOS Yosemite Wallpaper +
    +
    +
    +
    +
    +

    +
    + + +
    <div class="parallax">
+  <div class="parallax-top-left"></div>
+  <div class="parallax-top-right"></div>
+  <div class="parallax-bottom-left"></div>
+  <div class="parallax-bottom-right"></div>
+  <div class="parallax-content">
+    <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" alt="macOS El Capitan Wallpaper" />
+  </div>
+</div>
    -- cgit v1.3.1-23-gd82d