Background image on load and changed bg videos
11 changed files with 53 additions and 17 deletions
BIN
app/content/images/static-bg-001.jpg
BIN
app/content/videos/bg_2.mov
BIN
app/content/videos/bg_3.mov
BIN
app/content/videos/bg_4.mov
BIN
app/content/videos/bg_5.mov
BIN
app/content/videos/bg_6.mov
BIN
app/content/videos/bg_7.mov
+ 3
- 4
app/data.json
@@ -4,10 +4,9 @@ |
||
| 4 | 4 |
[ |
| 5 | 5 |
"content/videos/bg_1.mov", |
| 6 | 6 |
"content/videos/bg_2.mov", |
| 7 |
- "content/videos/bg_5.mov", |
|
| 8 |
- "content/videos/bg_5.mov", |
|
| 9 |
- "content/videos/bg_6.mov", |
|
| 10 |
- "content/videos/bg_7.mov" |
|
| 7 |
+ "content/videos/bg_3.mov", |
|
| 8 |
+ "content/videos/bg_4.mov", |
|
| 9 |
+ "content/videos/bg_5.mov" |
|
| 11 | 10 |
], |
| 12 | 11 |
"navigation" : |
| 13 | 12 |
[ |
+ 32
- 10
app/scripts/controllers/background.js
@@ -51,20 +51,20 @@ angular.module('goApp.background', ['famous.angular', 'goApp.data'])
|
||
| 51 | 51 |
}; |
| 52 | 52 |
|
| 53 | 53 |
$scope.preload = function() {
|
| 54 |
- $scope.current_video = $scope.videos[$scope.randomIntFromInterval(0,$scope.videos.length)]; |
|
| 55 |
- if($scope.current_video === undefined){
|
|
| 56 |
- $scope.current_video = "content/videos/bg_1.mov"; |
|
| 57 |
- } |
|
| 54 |
+ $scope.last_video = $scope.current_video; |
|
| 55 |
+ getVideo(); |
|
| 58 | 56 |
var preload = new createjs.LoadQueue(); |
| 59 |
- console.log("> Preloading video: " + $scope.current_video);
|
|
| 57 |
+ console.log("> Loop " + wait_time[2]);
|
|
| 58 |
+ console.log("> Preloading: " + $scope.current_video);
|
|
| 60 | 59 |
function handleFileComplete(event) {
|
| 61 |
- console.log("> Preload Complete");
|
|
| 62 | 60 |
$timeout(function(){
|
| 61 |
+ console.log("> Preload Complete");
|
|
| 63 | 62 |
$rootScope.$broadcast('background:loaded');
|
| 64 | 63 |
$scope.startBackgroundVideo(); |
| 65 |
- },2000); |
|
| 64 |
+ timer(); |
|
| 65 |
+ },wait_time[0]); |
|
| 66 | 66 |
} |
| 67 |
- preload.addEventListener("fileload", handleFileComplete);
|
|
| 67 |
+ preload.addEventListener("complete", handleFileComplete);
|
|
| 68 | 68 |
// for (var i = 0; i < $scope.videos.length; i++) {
|
| 69 | 69 |
// preload.loadFile($scope.videos[i]); |
| 70 | 70 |
// } |
@@ -77,15 +77,37 @@ angular.module('goApp.background', ['famous.angular', 'goApp.data'])
|
||
| 77 | 77 |
}; |
| 78 | 78 |
|
| 79 | 79 |
$scope.startBackgroundVideo = function() {
|
| 80 |
- console.log("> Playing background video");
|
|
| 80 |
+ console.log("> Playing bg video " + $scope.current_video);
|
|
| 81 | 81 |
video.setAttributes({ src: $scope.current_video });
|
| 82 | 82 |
video.setAttributes({ loop: '' });
|
| 83 | 83 |
$scope.backgroundView.add(videoModifier).add(video); |
| 84 | 84 |
$timeout(function(){
|
| 85 | 85 |
$scope.preload(); |
| 86 |
- },45000); |
|
| 86 |
+ },wait_time[1]); |
|
| 87 | 87 |
}; |
| 88 | 88 |
|
| 89 |
+ var getVideo = function() {
|
|
| 90 |
+ $scope.current_video = $scope.videos[$scope.randomIntFromInterval(0,$scope.videos.length)]; |
|
| 91 |
+ if($scope.current_video === undefined || $scope.current_video == "undefined"){
|
|
| 92 |
+ getVideo(); |
|
| 93 |
+ } |
|
| 94 |
+ if($scope.current_video == $scope.last_video){
|
|
| 95 |
+ getVideo(); |
|
| 96 |
+ } |
|
| 97 |
+ } |
|
| 98 |
+ |
|
| 99 |
+ var wait_time = [3000, 1, 0] |
|
| 100 |
+ var timer = function() {
|
|
| 101 |
+ wait_time[2] = wait_time[2] + 1; |
|
| 102 |
+ if(wait_time[2] == 1) {
|
|
| 103 |
+ wait_time = [1, 10000, wait_time[2]]; |
|
| 104 |
+ } |
|
| 105 |
+ if(wait_time[2] > 1) {
|
|
| 106 |
+ wait_time = [2000, 10000, wait_time[2]]; |
|
| 107 |
+ } |
|
| 108 |
+ return wait_time; |
|
| 109 |
+ } |
|
| 110 |
+ |
|
| 89 | 111 |
// Start Background Controller |
| 90 | 112 |
|
| 91 | 113 |
$scope.loadBackgroundData(); |
+ 6
- 0
app/scripts/controllers/navigation.js
@@ -23,6 +23,12 @@ angular.module('goApp.navigation', ['famous.angular', 'ngRoute', 'ngFx', 'ngAnim
|
||
| 23 | 23 |
} |
| 24 | 24 |
}); |
| 25 | 25 |
|
| 26 |
+ $timeout(function(){
|
|
| 27 |
+ if($scope.navigation === undefined){
|
|
| 28 |
+ $scope.navigation = Data.getNavigation(); |
|
| 29 |
+ } |
|
| 30 |
+ }, 5000); |
|
| 31 |
+ |
|
| 26 | 32 |
$scope.subNavigation = []; |
| 27 | 33 |
$scope.sub2Navigation = []; |
| 28 | 34 |
$scope.last_click = ""; |
+ 12
- 3
app/styles/main.css
@@ -6,7 +6,8 @@ body {
|
||
| 6 | 6 |
margin: 0px; |
| 7 | 7 |
width: 100%; |
| 8 | 8 |
overflow-x: hidden; |
| 9 |
- background-color: black; |
|
| 9 |
+ background-color: white; |
|
| 10 |
+ |
|
| 10 | 11 |
} |
| 11 | 12 |
|
| 12 | 13 |
.backfaceVisibility {
|
@@ -21,8 +22,16 @@ body {
|
||
| 21 | 22 |
top: 0; |
| 22 | 23 |
right: 0; |
| 23 | 24 |
bottom: 0; |
| 24 |
- left: 0 |
|
| 25 |
+ left: 0; |
|
| 26 |
+ background-image: url("../content/images/static-bg-001.jpg");
|
|
| 27 |
+ background-repeat: no-repeat; |
|
| 28 |
+ background-size: cover; |
|
| 25 | 29 |
} |
| 30 |
+ |
|
| 31 |
+.bg_video {
|
|
| 32 |
+ background-color: black; |
|
| 33 |
+} |
|
| 34 |
+ |
|
| 26 | 35 |
.layer-menu {
|
| 27 | 36 |
z-index: 2; |
| 28 | 37 |
position: absolute; |
@@ -145,7 +154,7 @@ fa-app {
|
||
| 145 | 154 |
height: 100%; |
| 146 | 155 |
width: 100%; |
| 147 | 156 |
overflow: hidden; |
| 148 |
- background-color: black; |
|
| 157 |
+ background-color: transparent; |
|
| 149 | 158 |
} |
| 150 | 159 |
|
| 151 | 160 |
.fixed-top-right {
|