Added Example for Camera FX

2017-02-20 08:37:43 +01:00
parent 8859405eef
commit 6d9ce3dacc
11 changed files with 233 additions and 142 deletions
@@ -0,0 +1,79 @@
+@import "../../../_framework";
+
+.content {
+  padding: 10px 0 0 20px;
+  background-color: #6ac88e;
+  border-bottom: solid 40px #c86350;
+
+  .wrap {
+    /*BASIC LAYOUT*/
+    @include cols(4, 20);
+
+    .inner {
+
+      .head {
+        font-family: sans-serif;
+        font-weight: 700;
+        font-size: 18px;
+        line-height: 24px;
+        padding: 10px 0;
+        color: #c86350;
+      }
+
+      .img-wrapper {
+        position: relative;
+        box-sizing: border-box;
+        overflow: hidden;
+        border: solid thick #c86350;
+
+        img {
+          width:100%; // make sure thins dont get wider than the parent cols element
+        }
+      }
+    }
+
+    &.focus {
+      /*FOCUS EFFECT*/
+      .head {
+        @include camera-focus($FOCUS-OUT, 10, $EASE, 0.5, 0);
+      }
+
+      img {
+        @include camera-focus($FOCUS-OUT, 10, $EASE, 0.5, 0);
+      }
+    }
+
+    &.zoom {
+      /*ZOOM EFFECT*/
+      .head {
+        @include camera-zoom($FOCUS-OUT, 1.5, $EASE, 0.5, 0);
+      }
+
+      img {
+        @include camera-zoom($FOCUS-OUT, 1.5, $EASE, 0.5, 0);
+      }
+    }
+
+    &.shake {
+      /*SHAKE EFFECT*/
+      .head {
+        @include camera-shake(5, 1.5, 0, 0, $EASE, 0.5, 0);
+      }
+
+      img {
+        @include camera-shake(5, 1.5, 0, 0, $EASE, 0.5, 0);
+      }
+    }
+
+    &.all {
+      /*ALL EFFECTS*/
+      .head {
+        @include camera-focus($FOCUS-OUT, 0.5, 10, $EASE);
+      }
+
+      img {
+        @include camera-focus($FOCUS-IN, 0.5, 10, $EASE);
+      }
+    }
+  }
+}