@@ -42,25 +42,25 @@ module.exports = function(grunt) { |
||
42 | 42 |
}, |
43 | 43 |
wiredep: { |
44 | 44 |
task: { |
45 |
- // Point to the files that should be updated when |
|
46 |
- // you run `grunt wiredep` |
|
45 |
+ // Point to the files that should be updated when |
|
46 |
+ // you run `grunt wiredep` |
|
47 | 47 |
src: [ |
48 | 48 |
'app/*.html', |
49 |
- 'app/views/**/*.html', // .html support... |
|
50 |
- 'app/views/**/*.jade', // .jade support... |
|
51 |
- 'app/styles/main.scss', // .scss & .sass support... |
|
52 |
- 'app/config.yml' // and .yml & .yaml support out of the box! |
|
49 |
+ 'app/views/**/*.html', // .html support... |
|
50 |
+ 'app/views/**/*.jade', // .jade support... |
|
51 |
+ 'app/styles/main.scss', // .scss & .sass support... |
|
52 |
+ 'app/config.yml' // and .yml & .yaml support out of the box! |
|
53 | 53 |
], |
54 | 54 |
options: { |
55 |
- // See wiredep's configuration documentation for the options |
|
56 |
- // you may pass: |
|
57 |
- // https://github.com/taptapship/wiredep#configuration |
|
55 |
+ // See wiredep's configuration documentation for the options |
|
56 |
+ // you may pass: |
|
57 |
+ // https://github.com/taptapship/wiredep#configuration |
|
58 | 58 |
} |
59 | 59 |
} |
60 | 60 |
}, |
61 | 61 |
serve: { |
62 | 62 |
options: { |
63 |
- port: 9000, |
|
63 |
+ port: 8000, |
|
64 | 64 |
} |
65 | 65 |
} |
66 | 66 |
}); |
@@ -79,4 +79,4 @@ module.exports = function(grunt) { |
||
79 | 79 |
// the default task can be run just by typing "grunt" on the command line |
80 | 80 |
grunt.registerTask('default', ['jshint', 'concat', 'uglify', 'wiredep']); |
81 | 81 |
|
82 |
-}; |
|
82 |
+}; |
@@ -0,0 +1,139 @@ |
||
1 |
+{ |
|
2 |
+ "website-name" : "Portfolio Go", |
|
3 |
+ "content" : [ |
|
4 |
+ { |
|
5 |
+ "title" : "Desenhos", |
|
6 |
+ "id" : "1", |
|
7 |
+ "slides" : [ |
|
8 |
+ "content/images/triptico.jpg", |
|
9 |
+ "content/images/A3.jpg", |
|
10 |
+ "content/images/escultura_01.jpg", |
|
11 |
+ "content/images/trifonia-01.png" |
|
12 |
+ ] |
|
13 |
+ }, |
|
14 |
+ { |
|
15 |
+ "title" : "Esculturas", |
|
16 |
+ "id" : "2", |
|
17 |
+ "slides" : [ |
|
18 |
+ "content/images/escultura_01.jpg", |
|
19 |
+ "content/images/trifonia-01.png" |
|
20 |
+ ] |
|
21 |
+ }, |
|
22 |
+ { |
|
23 |
+ "title" : "Poemas", |
|
24 |
+ "id" : "3", |
|
25 |
+ "slides" : [ |
|
26 |
+ "content/images/trifonia-01.png", |
|
27 |
+ "content/images/triptico.jpg", |
|
28 |
+ ] |
|
29 |
+ }, |
|
30 |
+ { |
|
31 |
+ "title" : "Filmes", |
|
32 |
+ "id" : "4", |
|
33 |
+ "slides" : [ |
|
34 |
+ "content/images/trifonia-01.png", |
|
35 |
+ "content/images/triptico.jpg", |
|
36 |
+ ] |
|
37 |
+ }, |
|
38 |
+ { |
|
39 |
+ "title" : "Fotos Contexto Humano", |
|
40 |
+ "id" : "5", |
|
41 |
+ "slides" : [ |
|
42 |
+ "content/images/trifonia-01.png", |
|
43 |
+ "content/images/triptico.jpg", |
|
44 |
+ ] |
|
45 |
+ }, |
|
46 |
+ { |
|
47 |
+ "title" : "Textos Críticos", |
|
48 |
+ "id" : "6", |
|
49 |
+ "slides" : [ |
|
50 |
+ "content/images/trifonia-01.png", |
|
51 |
+ "content/images/triptico.jpg", |
|
52 |
+ ] |
|
53 |
+ }, |
|
54 |
+ { |
|
55 |
+ "title" : "Currículo", |
|
56 |
+ "id" : "7", |
|
57 |
+ "slides" : [ |
|
58 |
+ "content/images/trifonia-01.png", |
|
59 |
+ "content/images/triptico.jpg", |
|
60 |
+ ] |
|
61 |
+ } |
|
62 |
+ ], |
|
63 |
+ "navigation" : [ |
|
64 |
+ { |
|
65 |
+ "title" : "Desenhos", |
|
66 |
+ "type" : "sub-nav", |
|
67 |
+ "id" : "101", |
|
68 |
+ "navigation" : [ |
|
69 |
+ { |
|
70 |
+ "title" : "Caligramas", |
|
71 |
+ "type" : "content", |
|
72 |
+ "id" : "1" |
|
73 |
+ }, |
|
74 |
+ { |
|
75 |
+ "title" : "Figuras", |
|
76 |
+ "type" : "content", |
|
77 |
+ "id" : "2" |
|
78 |
+ }, |
|
79 |
+ { |
|
80 |
+ "title" : "Cadernos", |
|
81 |
+ "type" : "content", |
|
82 |
+ "id" : "3" |
|
83 |
+ } |
|
84 |
+ ] |
|
85 |
+ }, |
|
86 |
+ { |
|
87 |
+ "title" : "Esculturas", |
|
88 |
+ "type" : "sub-nav", |
|
89 |
+ "id" : "102", |
|
90 |
+ "navigation" : [ |
|
91 |
+ { |
|
92 |
+ "title" : "Carvão & Tule", |
|
93 |
+ "type" : "content", |
|
94 |
+ "id" : "1" |
|
95 |
+ }, |
|
96 |
+ { |
|
97 |
+ "title" : "Sono (Vidros)", |
|
98 |
+ "type" : "content", |
|
99 |
+ "id" : "2" |
|
100 |
+ }, |
|
101 |
+ { |
|
102 |
+ "title" : "Relevos", |
|
103 |
+ "type" : "content", |
|
104 |
+ "id" : "3" |
|
105 |
+ }, |
|
106 |
+ { |
|
107 |
+ "title" : "Cut-outs", |
|
108 |
+ "type" : "content", |
|
109 |
+ "id" : "3" |
|
110 |
+ } |
|
111 |
+ ] |
|
112 |
+ }, |
|
113 |
+ { |
|
114 |
+ "title" : "Poemas", |
|
115 |
+ "type" : "content", |
|
116 |
+ "id" : "5" |
|
117 |
+ }, |
|
118 |
+ { |
|
119 |
+ "title" : "Filmes", |
|
120 |
+ "type" : "content", |
|
121 |
+ "id" : "6" |
|
122 |
+ }, |
|
123 |
+ { |
|
124 |
+ "title" : "Fotos", |
|
125 |
+ "type" : "content", |
|
126 |
+ "id" : "7" |
|
127 |
+ }, |
|
128 |
+ { |
|
129 |
+ "title" : "Textos", |
|
130 |
+ "type" : "content", |
|
131 |
+ "id" : "8" |
|
132 |
+ }, |
|
133 |
+ { |
|
134 |
+ "title" : "Currículo", |
|
135 |
+ "type" : "content", |
|
136 |
+ "id" : "9" |
|
137 |
+ } |
|
138 |
+ ] |
|
139 |
+} |
@@ -1,55 +1,49 @@ |
||
1 |
-<html ng-app="myAppName"> |
|
2 |
-<head> |
|
3 |
- |
|
4 |
- |
|
5 |
- <!-- bower:js --> |
|
6 |
- |
|
7 |
- <script src="../bower_components/angular/angular.js"></script> |
|
8 |
- <script src="../bower_components/famous-angular/dist/famous-angular.js"></script> |
|
9 |
- <script src="../bower_components/famous/dist/famous-global.js"></script> |
|
10 |
- |
|
11 |
- <!-- endbower --> |
|
12 |
- |
|
13 |
- <script> |
|
14 |
- angular.module('myAppName', ['famous.angular']) |
|
15 |
- .controller('Lesson1Ctrl', function($scope, $famous, $timeline) { |
|
16 |
- $scope.data = {message: "Hello"}; |
|
17 |
- |
|
18 |
- var Transitionable = $famous['famous/transitions/Transitionable']; |
|
19 |
- var Easing = $famous['famous/transitions/Easing']; |
|
20 |
- |
|
21 |
- $scope.t = new Transitionable(0); |
|
22 |
- |
|
23 |
- |
|
24 |
- $scope.translation = $timeline([ |
|
25 |
- [0, [100, 100, 0], Easing.inOutQuad], |
|
26 |
- [0.25, [400, 200, 0], Easing.inOutQuad], |
|
27 |
- [0.5, [300, 300, 0], Easing.inOutQuad], |
|
28 |
- [0.75, [200, 500, 0], Easing.inOutQuad], |
|
29 |
- [1, [100, 100, 0], Easing.inOutQuad], |
|
30 |
- ]); |
|
31 |
- |
|
32 |
- $scope.t.delay((1000), function(){ // we will delay each animation based on index |
|
33 |
- $scope.t.set(1, {duration: 3400}, function(){ |
|
34 |
- |
|
35 |
- |
|
36 |
- }); // we will set each Transitionable to 1 == which is the index of the $timeline to transition to |
|
37 |
- |
|
38 |
- |
|
39 |
- }); |
|
40 |
- }); |
|
41 |
- </script> |
|
42 |
- |
|
1 |
+<!doctype html> |
|
2 |
+<html class="no-js"> |
|
3 |
+ <head> |
|
4 |
+ <meta charset="utf-8"> |
|
5 |
+ <title></title> |
|
6 |
+ <meta name="description" content=""> |
|
7 |
+ <meta name="viewport" content="width=device-width"> |
|
8 |
+ |
|
9 |
+ <link rel="stylesheet" href="styles/main.css"> |
|
10 |
+ |
|
11 |
+ <!-- bower:js --> |
|
12 |
+ |
|
13 |
+ <script src="../bower_components/angular/angular.js"></script> |
|
14 |
+ <script src="../bower_components/famous-angular/dist/famous-angular.js"></script> |
|
15 |
+ <script src="../bower_components/famous/dist/famous-global.js"></script> |
|
16 |
+ <script src="http://code.createjs.com/createjs-2013.12.12.min.js"></script> |
|
17 |
+ |
|
18 |
+ <!-- endbower --> |
|
19 |
+ |
|
20 |
+ <script src="scripts/app.js"></script> |
|
21 |
+ |
|
43 | 22 |
</head> |
44 |
-<body > |
|
45 |
- <fa-app ng-controller='Lesson1Ctrl' id="app"> |
|
46 |
- <ui-view> |
|
47 |
- <fa-modifier fa-size="[100, 100]" fa-translate="translation(t.get())" > |
|
48 |
- <fa-surface fa-background-color="'#FA5C4F'" fa-color="'red'"> |
|
49 |
- {{data.message}} |
|
50 |
- </fa-surface> |
|
51 |
- </fa-modifier> |
|
23 |
+<body ng-app="goApp"> |
|
24 |
+ <fa-app ng-controller='indexController' id="app1"> |
|
25 |
+ |
|
26 |
+ |
|
27 |
+ |
|
28 |
+ <fa-modifier fa-size="[true, true]" fa-origin="[0,0]" fa-translate="[0, 0, 0]"> |
|
29 |
+ <fa-video-surface |
|
30 |
+ fa-video-url="content/videos/bg_1.mov" |
|
31 |
+ class="video" |
|
32 |
+ fa-options="{autoplay:true, setAttributes: 'loop'}" > |
|
33 |
+ </fa-video-surface> |
|
34 |
+ </fa-modifier> |
|
35 |
+ </fa-app> |
|
36 |
+ <fa-app ng-controller='indexController' id="app2"> |
|
37 |
+ <fa-modifier fa-size="[true, true]" fa-origin="[0,0]" fa-translate="[0, 0, 0]" fa-index="1"> |
|
38 |
+ <ui-view style="position: absolute; z-index: 2;"> |
|
39 |
+ <fa-modifier fa-size="[100, 100]" fa-translate="translation(t.get())" > |
|
40 |
+ <fa-surface fa-background-color="'#FA5C4F'" fa-color="'red'" > |
|
41 |
+ {{data.message}} |
|
42 |
+ </fa-surface> |
|
43 |
+ </fa-modifier> |
|
44 |
+ </fa-modifier> |
|
45 |
+ </ui-view> |
|
46 |
+ </fa-modifier> |
|
52 | 47 |
</fa-app> |
53 | 48 |
</body> |
54 | 49 |
</html> |
55 |
- |
@@ -0,0 +1,54 @@ |
||
1 |
+var goApp = angular.module('goApp', ['famous.angular']); |
|
2 |
+ |
|
3 |
+var controllers = {}; |
|
4 |
+ controllers.indexController = function($scope, $famous, $timeline) { |
|
5 |
+ $scope.data = {message: "Hello"}; |
|
6 |
+ |
|
7 |
+ var Transitionable = $famous['famous/transitions/Transitionable']; |
|
8 |
+ var Easing = $famous['famous/transitions/Easing']; |
|
9 |
+ |
|
10 |
+ $scope.t = new Transitionable(0); |
|
11 |
+ |
|
12 |
+ $scope.translation = $timeline([ |
|
13 |
+ [0, [100, 100, 100], Easing.inOutQuad], |
|
14 |
+ [0.25, [400, 200, 100], Easing.inOutQuad], |
|
15 |
+ [0.5, [300, 300, 100], Easing.inOutQuad], |
|
16 |
+ [0.75, [200, 500, 100], Easing.inOutQuad], |
|
17 |
+ [1, [100, 100, 100], Easing.inOutQuad], |
|
18 |
+ ]); |
|
19 |
+ |
|
20 |
+ $scope.startAnimations = function(){ |
|
21 |
+ $scope.t.delay((1000), function(){ // we will delay each animation based on index |
|
22 |
+ $scope.t.set(1, {duration: 3400}, function(){ |
|
23 |
+ |
|
24 |
+ |
|
25 |
+ |
|
26 |
+ }); |
|
27 |
+ }); |
|
28 |
+ } |
|
29 |
+ |
|
30 |
+ var preload = new createjs.LoadQueue(); |
|
31 |
+ preload.addEventListener("fileload", handleFileComplete); |
|
32 |
+ preload.loadFile('content/videos/bg_1.mov'); |
|
33 |
+ function handleFileComplete(event) { |
|
34 |
+ console.log('File Loaded') |
|
35 |
+ $scope.startAnimations(); |
|
36 |
+ |
|
37 |
+ // Make the video loop |
|
38 |
+ var video = $famous.find('.video')[0].renderNode; video.on('deploy', function(){ |
|
39 |
+ var player = video._currTarget; |
|
40 |
+ player.controls = true; |
|
41 |
+ player.loop = true; |
|
42 |
+ player.onprogress = console.log('video is downloading'); |
|
43 |
+ }); |
|
44 |
+ |
|
45 |
+ } |
|
46 |
+ |
|
47 |
+ |
|
48 |
+ |
|
49 |
+ }; |
|
50 |
+ |
|
51 |
+ |
|
52 |
+ |
|
53 |
+ |
|
54 |
+goApp.controller(controllers); |
@@ -0,0 +1,57 @@ |
||
1 |
+html { |
|
2 |
+ background: #fff; |
|
3 |
+} |
|
4 |
+ |
|
5 |
+body { |
|
6 |
+ margin: 0px; |
|
7 |
+ width: 100%; |
|
8 |
+ overflow-x: hidden; |
|
9 |
+} |
|
10 |
+ |
|
11 |
+.backfaceVisibility { |
|
12 |
+ -webkit-backface-visibility: visible; |
|
13 |
+ backface-visibility: visible; |
|
14 |
+} |
|
15 |
+ |
|
16 |
+.btn-menu { |
|
17 |
+ color: black; |
|
18 |
+ border: none; |
|
19 |
+ text-transform: uppercase; |
|
20 |
+ background-color: white; |
|
21 |
+ font-size: 14px; |
|
22 |
+ font-family: Helvetica; |
|
23 |
+ text-align: left; |
|
24 |
+ font-weight: 600; |
|
25 |
+ margin-left: 15px; |
|
26 |
+ margin-right: 15px; |
|
27 |
+ margin-bottom: 15px; |
|
28 |
+ cursor: pointer; |
|
29 |
+} |
|
30 |
+ |
|
31 |
+.btn-menu:hover { |
|
32 |
+ color: white; |
|
33 |
+ background-color: black; |
|
34 |
+} |
|
35 |
+ |
|
36 |
+.btn-slideshow { |
|
37 |
+ cursor: pointer; |
|
38 |
+ background-color: white; |
|
39 |
+} |
|
40 |
+ |
|
41 |
+.btn-slideshow:hover { |
|
42 |
+ background-color: #F2F2F2; |
|
43 |
+ color: red; |
|
44 |
+} |
|
45 |
+ |
|
46 |
+video { |
|
47 |
+ width: auto !important; |
|
48 |
+ height: 100% !important; |
|
49 |
+} |
|
50 |
+ |
|
51 |
+fa-app { |
|
52 |
+ position: absolute; |
|
53 |
+ top: 0; |
|
54 |
+ right: 0; |
|
55 |
+ bottom: 0; |
|
56 |
+ left: 0; |
|
57 |
+} |