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,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Camera</title>
+    <link type="text/css" rel="stylesheet" href="./camera.css">
+</head>
+<body>
+<div>
+    <div class="content">
+
+        <div class="wrap focus">
+            <div class="inner">
+                <p class="head">Off-Focus</p>
+                <div class="img-wrapper"><img src="http://lorempixel.com/400/400/"></div>
+            </div>
+        </div>
+
+        <div class="wrap zoom">
+            <div class="inner">
+                <p class="head">Zoom</p>
+                <div class="img-wrapper"><img src="http://lorempixel.com/400/400/"></div>
+            </div>
+        </div>
+
+        <div class="wrap shake">
+            <div class="inner">
+                <p class="head">Shake</p>
+                <div class="img-wrapper"><img src="http://lorempixel.com/400/400/"></div>
+            </div>
+        </div>
+
+        <div class="wrap all">
+            <div class="inner">
+                <p class="head">None</p>
+                <div class="img-wrapper"><img src="http://lorempixel.com/400/400/"></div>
+            </div>
+        </div>
+
+    </div>
+</div>
+</body>
+</html>
@@ -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);
+      }
+    }
+  }
+}