Home Erkunden Hilfe
Registrieren Anmelden
jamesperet
/
portfolio-go
Beobachten 1
Markieren 0
Fork 0

Quellcode durchsuchen
Famous-Angular Test

James Peret vor 10 Jahren
Ursprung
8755b6ccad
Commit
d03b82ed15
11 geänderte Dateien mit 306 neuen Zeilen und 62 gelöschten Zeilen
Diff-Statistik anzeigen
  1. 11 11
      Gruntfile.js
  2. 139 0
      app/content/Data.json
  3. BIN
      app/content/images/A3.jpg
  4. BIN
      app/content/images/cave-1.jpg
  5. BIN
      app/content/images/escultura_01.jpg
  6. BIN
      app/content/images/trifonia-01.png
  7. BIN
      app/content/images/triptico.jpg
  8. BIN
      app/content/videos/bg_1.mov
  9. 45 51
      app/index.html
  10. 54 0
      app/scripts/app.js
  11. 57 0
      app/styles/main.css

+ 11 - 11
Gruntfile.js
Datei anzeigen 

@@ -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 
+};

+ 139 - 0
app/content/Data.json
Datei anzeigen 

@@ -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 
+}

BIN
app/content/images/A3.jpg
Datei anzeigen


BIN
app/content/images/cave-1.jpg
Datei anzeigen


BIN
app/content/images/escultura_01.jpg
Datei anzeigen


BIN
app/content/images/trifonia-01.png
Datei anzeigen


BIN
app/content/images/triptico.jpg
Datei anzeigen


BIN
app/content/videos/bg_1.mov
Datei anzeigen


+ 45 - 51
app/index.html
Datei anzeigen 

@@ -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 
-

+ 54 - 0
app/scripts/app.js
Datei anzeigen 

@@ -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);

+ 57 - 0
app/styles/main.css
Datei anzeigen 

@@ -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 
+}