eSales Media Git repositories
Browse code

Initial commit

Benjamin Roth authored on26/03/2015 16:12:11
Showing1 changed files
assets/css/eSM_reveal.scss
History View file @06c79f6
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,152 @@
1 
+/****** REVEAL ******/
2 
+
3 
+// ------ Mixins ------
4 
+@mixin keyframes($name) {
5 
+  @-webkit-keyframes #{$name} { @content; }
6 
+  @-moz-keyframes #{$name} { @content; }
7 
+  @-o-keyframes #{$name} { @content; }
8 
+  @keyframes #{$name} { @content; }
9 
+}
10 
+
11 
+@mixin defineAnimation($name) {
12 
+  &.reveal--#{$name} {
13 
+	-webkit-animation-name: reveal--#{$name};
14 
+	-moz-animation-name: reveal--#{$name};
15 
+	-o-animation-name: reveal--#{$name};
16 
+	animation-name: reveal--#{$name};
17 
+	@content
18 
+  }
19 
+}
20 
+
21 
+// ------ Animations ------
22 
+@include keyframes('reveal--fadeInDown') {
23 
+  0% {
24 
+	opacity: 0;
25 
+	visibility: hidden;
26 
+	-webkit-transform: translate3d(0, -30px, 0);
27 
+	-moz-transform: translate3d(0, -30px, 0);
28 
+	-ms-transform: translate3d(0, -30px, 0);
29 
+	-o-transform: translate3d(0, -30px, 0);
30 
+	transform: translate3d(0, -30px, 0);
31 
+  }
32 
+
33 
+  100% {
34 
+	opacity: 1;
35 
+	visibility: visible;
36 
+	-webkit-transform: none;
37 
+	-moz-transform: none;
38 
+	-ms-transform: none;
39 
+	-o-transform: none;
40 
+	transform: none;
41 
+  }
42 
+}
43 
+
44 
+@include keyframes('reveal--fadeInUp') {
45 
+  0% {
46 
+	opacity: 0;
47 
+	visibility: hidden;
48 
+	-webkit-transform: translate3d(0, 30px, 0);
49 
+	-moz-transform: translate3d(0, 30px, 0);
50 
+	-ms-transform: translate3d(0, 30px, 0);
51 
+	-o-transform: translate3d(0, 30px, 0);
52 
+	transform: translate3d(0, 30px, 0);
53 
+  }
54 
+
55 
+  100% {
56 
+	opacity: 1;
57 
+	visibility: visible;
58 
+	-webkit-transform: none;
59 
+	-moz-transform: none;
60 
+	-ms-transform: none;
61 
+	-o-transform: none;
62 
+	transform: none;
63 
+  }
64 
+}
65 
+
66 
+@include keyframes('reveal--zoomOut') {
67 
+  0% {
68 
+	opacity: 0;
69 
+	visibility: hidden;
70 
+	-webkit-transform: scale3d(2.2, 1.2, 1);
71 
+	-moz-transform: scale3d(2.2, 1.2, 1);
72 
+	-ms-transform: scale3d(2.2, 1.2, 1);
73 
+	-o-transform: scale3d(2.2, 1.2, 1);
74 
+	transform: scale3d(2.2, 1.2, 1);
75 
+  }
76 
+
77 
+  100% {
78 
+	opacity: 1;
79 
+	visibility: visible;
80 
+	-webkit-transform: none;
81 
+	-moz-transform: none;
82 
+	-ms-transform: none;
83 
+	-o-transform: none;
84 
+	transform: none;
85 
+  }
86 
+}
87 
+
88 
+@include keyframes('reveal--zoomIn') {
89 
+  0% {
90 
+	opacity: 0;
91 
+	visibility: hidden;
92 
+	-webkit-transform: scale3d(0.2, 0.7, 1);
93 
+	-moz-transform: scale3d(0.2, 0.7, 1);
94 
+	-ms-transform: scale3d(0.2, 0.7, 1);
95 
+	-o-transform: scale3d(0.2, 0.7, 1);
96 
+	transform: scale3d(0.2, 0.7, 1);
97 
+  }
98 
+
99 
+  100% {
100 
+	opacity: 1;
101 
+	visibility: visible;
102 
+	-webkit-transform: none;
103 
+	-moz-transform: none;
104 
+	-ms-transform: none;
105 
+	-o-transform: none;
106 
+	transform: none;
107 
+  }
108 
+}
109 
+
110 
+// ------ Generic ------
111 
+.reveal {
112 
+  -webkit-animation-fill-mode: both;
113 
+  -moz-animation-fill-mode: both;
114 
+  -o-animation-fill-mode: both;
115 
+  animation-fill-mode: both;
116 
+  -webkit-animation-duration: 0.5s;
117 
+  -moz-animation-duration: 0.5s;
118 
+  -o-animation-duration: 0.5s;
119 
+  animation-duration: 0.5s;
120 
+  -webkit-animation-delay: 0.5s;
121 
+  -moz-animation-delay: 0.5s;
122 
+  -o-animation-delay: 0.5s;
123 
+  animation-delay: 0.5s;
124 
+  opacity: 0;
125 
+  visibility: hidden;
126 
+
127 
+  &.inview {
128 
+
129 
+	@include defineAnimation('fadeInDown') {}
130 
+	@include defineAnimation('fadeInUp') {}
131 
+	@include defineAnimation('zoomOut') {}
132 
+	@include defineAnimation('zoomIn') {}
133 
+  }
134 
+
135 
+  @for $i from 1 through 8 {
136 
+	&.reveal-duration--#{$i * 250} {
137 
+	  -webkit-animation-duration: 250ms * $i;
138 
+	  -moz-animation-duration: 250ms * $i;
139 
+	  -o-animation-duration: 250ms * $i;
140 
+	  animation-duration: 250ms * $i;
141 
+	}
142 
+  }
143 
+
144 
+  @for $i from 1 through 12 {
145 
+	&.reveal-delay--#{$i * 250} {
146 
+	  -webkit-animation-delay: 250ms * $i;
147 
+	  -moz-animation-delay: 250ms * $i;
148 
+	  -o-animation-delay: 250ms * $i;
149 
+	  animation-delay: 250ms * $i;
150 
+	}
151 
+  }
152 
+}
0 153 
\ No newline at end of file