simongehrig.de/SCSS-Framework
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added Example for Camera FX

Browse Source
This commit is contained in:
Simon Gehrig
2017-02-20 08:37:43 +01:00
parent 8859405eef
commit 6d9ce3dacc
11 changed files with 233 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.idea/deployment.xml
Generated
+15 -1
View File
@@ -2,7 +2,21 @@
<project version="4"> <project version="4">
<component name="PublishConfigData"> <component name="PublishConfigData">
<serverData> <serverData>
<paths name="lisanahartl.de"> <paths name="SELFOMAT Server">
<serverdata>
<mappings>
<mapping local="$PROJECT_DIR$" web="/" />
</mappings>
</serverdata>
</paths>
<paths name="selfom.at (production)">
<serverdata>
<mappings>
<mapping local="$PROJECT_DIR$" web="/" />
</mappings>
</serverdata>
</paths>
<paths name="selfom.at (website)">
<serverdata> <serverdata>
<mappings> <mappings>
<mapping local="$PROJECT_DIR$" web="/" /> <mapping local="$PROJECT_DIR$" web="/" />
.idea/scopes/css_tmp.xml
Generated
+3
View File
@@ -0,0 +1,3 @@
<component name="DependencyValidationManager">
<scope name="css.tmp" pattern="file:*.css.tmp" />
</component>
.idea/watcherTasks.xml
Generated
+3 -3
View File
@@ -21,8 +21,8 @@
<envs /> <envs />
</TaskOptions> </TaskOptions>
<TaskOptions isEnabled="true"> <TaskOptions isEnabled="true">
<option name="arguments" value="--use autoprefixer $FileName$ -o $FileNameWithoutExtension$" /> <option name="arguments" value="$FileName$ --use autoprefixer -o $FileNameWithoutExtension$" />
<option name="checkSyntaxErrors" value="true" /> <option name="checkSyntaxErrors" value="false" />
<option name="description" value="" /> <option name="description" value="" />
<option name="exitCodeBehavior" value="ERROR" /> <option name="exitCodeBehavior" value="ERROR" />
<option name="fileExtension" value="*" /> <option name="fileExtension" value="*" />
@@ -34,7 +34,7 @@
</option> </option>
<option name="outputFromStdout" value="false" /> <option name="outputFromStdout" value="false" />
<option name="program" value="$USER_HOME$/AppData/Roaming/npm/postcss.cmd" /> <option name="program" value="$USER_HOME$/AppData/Roaming/npm/postcss.cmd" />
<option name="scopeName" value="css.tpm" /> <option name="scopeName" value="css.tmp" />
<option name="trackOnlyRoot" value="false" /> <option name="trackOnlyRoot" value="false" />
<option name="workingDir" value="$FileDir$" /> <option name="workingDir" value="$FileDir$" />
<envs /> <envs />
framework.scss → _framework.scss
+5 -16
View File
@@ -1,26 +1,15 @@
/* Simons SCSS Framework */ /* Simons SCSS Framework */
/* Basic CSS Functions */ /* Basic CSS Functions */
@import "mixins/css/reset"; @import "mixins/css/reset";
@import "mixins/css/filters"; @import "mixins/css/filters";
/* Layout */ /* Layout */
@import "mixins/layout/layout"; @import "mixins/layout/layout";
/* Queries */ /* Queries */
@import "mixins/queries/media-queries"; @import "mixins/queries/media-queries";
/* FX / Effects */ /* FX / Effects */
@import "mixins/fx/camera"; @import "mixins/fx/camera";
/* Manual Test Content */
body {
filter: blur(10px);
@include blur(10);
&:fullscreen a {
display: flex;
}
a {
transform: scale(1.1);
width:99%;
}
}
examples/example.scss
-1
View File
@@ -1 +0,0 @@
@import "../framework";
examples/fx/camera/camera.html
+43
View File
@@ -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>
examples/fx/camera/camera.scss
+79
View File
@@ -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);
}
}
}
}
framework.css
-100
View File
@@ -1,100 +0,0 @@
/* Simons SCSS Framework */
/* Basic CSS Functions */
@CHARSET "ISO-8859-1";
/* RESET
SOURCE:
http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0 !important; }
/* Layout */
/* Queries */
/*
CONSTANTS
*/
/*
Widths
*/
/*
Queries
*/
/*
QUERY-BUILDER
*/
/* FX / Effects */
/* CONSTANTS */
/* MIXINS */
/* Manual Test Content */
body {
-webkit-filter: blur(10px);
filter: blur(10px);
-webkit-filter: blur(10);
filter: blur(10); }
body:-webkit-full-screen a {
display: -webkit-box;
display: flex; }
body:-moz-full-screen a {
display: flex; }
body:-ms-fullscreen a {
display: -ms-flexbox;
display: flex; }
body:fullscreen a {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
body a {
-webkit-transform: scale(1.1);
transform: scale(1.1);
width: 99%; }
/*# sourceMappingURL=framework.css.map */
framework.css.map
-1
View File
@@ -1 +0,0 @@
{"version":3,"sources":["framework.scss","mixins/css/_reset.scss","mixins/queries/_media-queries.scss","mixins/fx/_camera.scss","mixins/css/_filters.scss"],"names":[],"mappings":"AACA,2BAA2B;AAC3B,yBAAyB;ACFzB,sBAAqB;AAErB;;;;;;;EAOE;AAEF;;;;;;;;;;;;;EAaE,UAAS;EACT,WAAU;EACV,UAAS;EACT,gBAAe;EACf,cAAa;EACb,yBAAwB,EAAA;;AAG1B,iDAAiD;AACjD;;EAEE,eAAc,EAAA;;AAGhB;EACE,iBAAgB,EAAA;;AAGlB;EACE,aAAY,EAAA;;AAGd;;EAEE,YAAW;EACX,cAAa,EAAA;;AAGf;EACE,0BAAyB;EACzB,6BAA4B,EAAA;;ADjD9B,YAAY;AAEZ,aAAa;AEPb;;;;EAIE;AAMF;;;;EAIE;AAOF;;;;EAIE;AAsCF;;;;EAIE;AF1DF,kBAAkB;AGTlB,eAAe;AAaf,YAAY;AHAZ,yBAAyB;AACzB;EACE,2BAAkB;UAAlB,mBAAkB;EIdlB,yBAAoB;UAApB,iBAAoB,EAAA;EJiBpB;IACE,qBAAa;IAAb,cAAa,EAAA;EADf;IACE,cAAa,EAAA;EADf;IACE,qBAAa;IAAb,cAAa,EAAA;EADf;IACE,qBAAa;IAAb,qBAAa;IAAb,cAAa,EAAA;EAEf;IACE,8BAAqB;YAArB,sBAAqB;IACrB,WAAS,EAAA","file":"framework.css"}
mixins/fx/_camera.scss
+78 -11
View File
@@ -6,23 +6,90 @@ $ZOOM-OUT: 1;
$FOCUS-IN: 0; $FOCUS-IN: 0;
$FOCUS-OUT: 1; $FOCUS-OUT: 1;
$LINEAR:0; $LINEAR: 0;
$EASE:1; $EASE: 1;
$EASEINOUT:2; $EASEINOUT: 2;
$BACKWARD:3; $BACKWARD: 3;
/* MIXINS */ /* MIXINS */
/// Gives the Element a focusing Effect /// Gives the Element a focusing Effect
/// @param {int} $direction /// @param {int} $direction
/// @param {int} $direction /// @param {int} $seconds
/// @param {int} $direction /// @param {int} $pixels
/// @param {int} $performance
@mixin camera-focus($direction,$seconds:0.5,$pixels:10,$performance:0) { @mixin camera-focus(
$direction:1,
$pixels:10,
$performance:0,
$seconds:0.5,
$delay:0
) {
/* Camera Focus Effect */ /* Camera Focus Effect */
filter: blur($pixels); transition-property: all;
transition-duration: $seconds+s;
@include performance($performance);
&:hover {
filter: blur($pixels+px);
}
} }
@mixin camera-shake (){}
@mixin camera-zoom (){} /// Gives the Element a shake Effect
/// @param {int} $direction
/// Degrees
/// @param {int} $seconds
/// @param {int} $pixels
/// @param {int} $performance
@mixin camera-shake(
$rotate:10,
$scale:1.1,
$x:10,
$y:10,
$performance:0,
$seconds:0.5,
$delay:0
) {
transition-property: all;
transition-duration: $seconds+s;
@include performance($performance);
&:hover {
@include transform($rotate, $scale, $x, $y);
}
}
/// Gives the Element a zoom Effect
/// @param {int} $direction
/// @param {int} $seconds
/// @param {int} $pixels
/// @param {int} $performance
@mixin camera-zoom(
$direction:1,
$scale:1.2,
$performance:0,
$seconds:0.5,
$delay:0
) {
transition-property: all;
transition-duration: $seconds+s;
@include performance($performance);
&:hover {
@include transform(0, $scale, 0, 0)
}
}
@mixin performance($perform) {
@if ($perform == 0) {
transition-timing-function: linear;
} @else if ($perform == 1) {
transition-timing-function: ease;
} @else if ($perform == 2) {
transition-timing-function: ease-in-out;
} @else if ($perform == 3) {
transition-timing-function: cubic-bezier(0.68, - 0.55, 0.27, 1.55);
}
}
@mixin transform($rotation:0,$scale:1,$x:0,$y:0) {
transform: rotate($rotation+deg) scale($scale) translate($x+px, $y+px);
}
mixins/layout/_layout.scss
+7 -9
View File
@@ -5,22 +5,20 @@
/* Positioning */ /* Positioning */
position: relative; position: relative;
display: inline-table; display: inline-table;
/* Sizing */ /* Sizing */
box-sizing: border-box; box-sizing: border-box;
//width: (100%/$columns) - (0.3 + ($columns * 0.3));
width: (100%/$columns); width: (100%/$columns);
/* Gutters */
margin: 0 -4px 0 0 !important; margin: 0 -4px 0 0 !important;
padding: 0 !important; padding: 0 $gutter+px $gutter+px 0 !important;
border: none !important; border: none !important;
/* Typography */
letter-spacing: 0; letter-spacing: 0;
/* Gutter */
padding-right: $gutter !important; /* Remove last border */
padding-bottom: $gutter !important;
&:before {
}
&:after {
}
&:nth-of-type(#{$columns}) { &:nth-of-type(#{$columns}) {
border-right: none; border-right: none;
} }