Intro animation added with ngFx
10 changed files with 75 additions and 39 deletions
+ 19
- 1
app/index.html
@@ -26,7 +26,22 @@ |
||
| 26 | 26 |
<div id="stars"></div> |
| 27 | 27 |
<div id="stars2"></div> |
| 28 | 28 |
|
| 29 |
- <div ui-view></div> |
|
| 29 |
+ <div ng-controller="NavCtrl as nav"> |
|
| 30 |
+ <div class="center-div"> |
|
| 31 |
+ <a ui-sref="main"><img ng-show="logoAnimationStart" src="images/jamesperet-logo-white.png" class="fx-fade-down fx-easing-sine fx-speed-800"></a> |
|
| 32 |
+ <div class="container-fluid link-list"> |
|
| 33 |
+ <div class="row-fluid"> |
|
| 34 |
+ <div class="col-sm-12 fx-fade-down fx-easing-sine fx-speed-800" ng-show="menuAnimationStart"> |
|
| 35 |
+ <a href="http://blog.j1x.co" class="btn btn-link btn-lg">Blog</a> | |
|
| 36 |
+ <a ui-sref="now" class="btn btn-link btn-lg" ui-sref-active="active">Now</a> | |
|
| 37 |
+ <a href="http://registry.jsonresume.org/jamesperet" class="btn btn-link btn-lg">Resume</a> |
|
| 38 |
+ </div> |
|
| 39 |
+ </div> |
|
| 40 |
+ </div> |
|
| 41 |
+ <div ui-view></div> |
|
| 42 |
+ </div> |
|
| 43 |
+ </div> |
|
| 44 |
+ |
|
| 30 | 45 |
|
| 31 | 46 |
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID --> |
| 32 | 47 |
<script> |
@@ -48,11 +63,14 @@ |
||
| 48 | 63 |
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script> |
| 49 | 64 |
<script src="bower_components/angular-touch/angular-touch.js"></script> |
| 50 | 65 |
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script> |
| 66 |
+ <script src="bower_components/gsap/src/uncompressed/TweenMax.js"></script> |
|
| 67 |
+ <script src="bower_components/ngFx/dist/ngFx.js"></script> |
|
| 51 | 68 |
<!-- endbower --> |
| 52 | 69 |
<!-- endbuild --> |
| 53 | 70 |
|
| 54 | 71 |
<!-- build:js({.tmp,app}) scripts/scripts.js -->
|
| 55 | 72 |
<script src="scripts/app.js"></script> |
| 73 |
+ <script src="scripts/controllers/nav.js"></script> |
|
| 56 | 74 |
<script src="scripts/controllers/main.js"></script> |
| 57 | 75 |
<script src="scripts/controllers/now.js"></script> |
| 58 | 76 |
<!-- endbuild --> |
+ 2
- 1
app/scripts/app.js
@@ -13,7 +13,8 @@ angular |
||
| 13 | 13 |
'ngAnimate', |
| 14 | 14 |
'ngSanitize', |
| 15 | 15 |
'ngTouch', |
| 16 |
- 'ui.router' |
|
| 16 |
+ 'ui.router', |
|
| 17 |
+ 'ngFx' |
|
| 17 | 18 |
]) |
| 18 | 19 |
|
| 19 | 20 |
.config(['$stateProvider', '$urlRouterProvider', '$httpProvider', function($stateProvider, $urlRouterProvider, $httpProvider) {
|
+ 1
- 1
app/scripts/controllers/main.js
@@ -8,7 +8,7 @@ |
||
| 8 | 8 |
* Controller of the landingPageApp |
| 9 | 9 |
*/ |
| 10 | 10 |
angular.module('landingPageApp')
|
| 11 |
- .controller('MainCtrl', ['$window', function ($window) {
|
|
| 11 |
+ .controller('MainCtrl', ['$window', '$scope', '$timeout', function ($window, $scope, $timeout) {
|
|
| 12 | 12 |
var lang = $window.navigator.language || $window.navigator.userLanguage; |
| 13 | 13 |
console.log(lang); |
| 14 | 14 |
if (lang === 'pt-BR') {
|
+ 29
- 0
app/scripts/controllers/nav.js
@@ -0,0 +1,29 @@ |
||
| 1 |
+'use strict'; |
|
| 2 |
+ |
|
| 3 |
+/** |
|
| 4 |
+ * @ngdoc function |
|
| 5 |
+ * @name landingPageApp.controller:MainCtrl |
|
| 6 |
+ * @description |
|
| 7 |
+ * # MainCtrl |
|
| 8 |
+ * Controller of the landingPageApp |
|
| 9 |
+ */ |
|
| 10 |
+angular.module('landingPageApp')
|
|
| 11 |
+ .controller('NavCtrl', ['$window', '$scope', '$timeout', "$rootScope", "$state", function ($window, $scope, $timeout, $rootScope, $state) {
|
|
| 12 |
+ var lang = $window.navigator.language || $window.navigator.userLanguage; |
|
| 13 |
+ console.log(lang); |
|
| 14 |
+ if (lang === 'pt-BR') {
|
|
| 15 |
+ console.log("language is portuguese");
|
|
| 16 |
+ } else {
|
|
| 17 |
+ console.log("language is english");
|
|
| 18 |
+ } |
|
| 19 |
+ |
|
| 20 |
+ $scope.logoAnimationStart = false; |
|
| 21 |
+ $scope.menuAnimationStart = false; |
|
| 22 |
+ $timeout(function(){
|
|
| 23 |
+ $scope.logoAnimationStart = true; |
|
| 24 |
+ $timeout(function(){
|
|
| 25 |
+ $scope.menuAnimationStart = true; |
|
| 26 |
+ }, 500); |
|
| 27 |
+ }, 500); |
|
| 28 |
+ |
|
| 29 |
+ }]); |
+ 7
- 2
app/scripts/controllers/now.js
@@ -8,7 +8,7 @@ |
||
| 8 | 8 |
* Controller of the landingPageApp |
| 9 | 9 |
*/ |
| 10 | 10 |
angular.module('landingPageApp')
|
| 11 |
- .controller('NowCtrl', ['$window', function ($window) {
|
|
| 11 |
+ .controller('NowCtrl', ['$window', '$scope', '$timeout', function ($window, $scope, $timeout) {
|
|
| 12 | 12 |
var lang = $window.navigator.language || $window.navigator.userLanguage; |
| 13 | 13 |
console.log(lang); |
| 14 | 14 |
if (lang === 'pt-BR') {
|
@@ -16,5 +16,10 @@ angular.module('landingPageApp')
|
||
| 16 | 16 |
} else {
|
| 17 | 17 |
console.log("language is english");
|
| 18 | 18 |
} |
| 19 |
- console.log("Showing page NOW");
|
|
| 19 |
+ |
|
| 20 |
+ $scope.textAnimationStart = false; |
|
| 21 |
+ $timeout(function(){
|
|
| 22 |
+ $scope.textAnimationStart = true; |
|
| 23 |
+ }, 1000); |
|
| 24 |
+ |
|
| 20 | 25 |
}]); |
+ 7
- 0
app/styles/styles.scss
@@ -1,3 +1,6 @@ |
||
| 1 |
+.ng-hide { display:none; }
|
|
| 2 |
+ |
|
| 3 |
+ |
|
| 1 | 4 |
body {
|
| 2 | 5 |
background-color: #1D1F21; |
| 3 | 6 |
} |
@@ -25,6 +28,10 @@ body {
|
||
| 25 | 28 |
color: white; |
| 26 | 29 |
text-transform: uppercase; |
| 27 | 30 |
} |
| 31 |
+ .active {
|
|
| 32 |
+ text-decoration: underline; |
|
| 33 |
+ font-weight: bold; |
|
| 34 |
+ } |
|
| 28 | 35 |
} |
| 29 | 36 |
|
| 30 | 37 |
.text {
|
+ 0
- 12
app/views/main.html
@@ -1,12 +0,0 @@ |
||
| 1 |
-<div class="center-div"> |
|
| 2 |
- <a href="/"><img src="images/jamesperet-logo-white.png"></a> |
|
| 3 |
- <div class="container-fluid link-list"> |
|
| 4 |
- <div class="row-fluid"> |
|
| 5 |
- <div class="col-sm-12"> |
|
| 6 |
- <a href="http://blog.j1x.co" class="btn btn-link btn-lg">Blog</a> | |
|
| 7 |
- <a href="#now" class="btn btn-link btn-lg">Now</a> | |
|
| 8 |
- <a href="http://registry.jsonresume.org/jamesperet" class="btn btn-link btn-lg">Resume</a> |
|
| 9 |
- </div> |
|
| 10 |
- </div> |
|
| 11 |
- </div> |
|
| 12 |
-</div> |
+ 6
- 21
app/views/now.html
@@ -1,24 +1,9 @@ |
||
| 1 |
-<div class="center-div"> |
|
| 2 |
- <a href="/"><img src="images/jamesperet-logo-white.png"></a> |
|
| 3 |
- <div class="container-fluid link-list"> |
|
| 4 |
- <div class="row-fluid"> |
|
| 5 |
- <div class="col-sm-12"> |
|
| 6 |
- <a href="http://blog.j1x.co" class="btn btn-link btn-lg">Blog</a> | |
|
| 7 |
- <a href="#now" class="btn btn-link btn-lg"><b style="text-decoration: underline;">Now</b></a> | |
|
| 8 |
- <a href="http://registry.jsonresume.org/jamesperet" class="btn btn-link btn-lg">Resume</a> |
|
| 9 |
- </div> |
|
| 1 |
+<div class="container-fluid" style="margin-top: 40px;"> |
|
| 2 |
+ <div class="row-fluid" > |
|
| 3 |
+ <div class="col-sm-12 text fx-fade-down fx-easing-sine fx-speed-800" ng-show="textAnimationStart"> |
|
| 4 |
+ <p>I'm currently in Abu Dhabi, planning to go to Berlim soon.</p> |
|
| 5 |
+ <p>Looking for work as a <b>full stack developer</b> in Dubai, Berlim or remote.</p> |
|
| 6 |
+ <p>Working on my <a href="http://blog.j1x.co">blog</a> and <a href="#resume">resume</a>.</p> |
|
| 10 | 7 |
</div> |
| 11 | 8 |
</div> |
| 12 |
- <div class="container-fluid" style="margin-top: 70px;"> |
|
| 13 |
- <div class="row-fluid" > |
|
| 14 |
- <div class="col-sm-12 text"> |
|
| 15 |
- <p>I'm currently in Abu Dhabi, planning to go to Berlim soon.</p> |
|
| 16 |
- <p>Looking for work as a <b>full stack developer</b> in Dubai, Berlim or remote.</p> |
|
| 17 |
- <p>Working on my <a href="http://blog.j1x.co">blog</a> and <a href="#resume">resume</a>.</p> |
|
| 18 |
- </div> |
|
| 19 |
- </div> |
|
| 20 |
- </div> |
|
| 21 |
-</div> |
|
| 22 |
- |
|
| 23 |
- |
|
| 24 | 9 |
</div> |
+ 2
- 1
bower.json
@@ -7,7 +7,8 @@ |
||
| 7 | 7 |
"angular-animate": "^1.3.0", |
| 8 | 8 |
"angular-sanitize": "^1.3.0", |
| 9 | 9 |
"angular-touch": "^1.3.0", |
| 10 |
- "angular-ui-router": "~0.2.15" |
|
| 10 |
+ "angular-ui-router": "~0.2.15", |
|
| 11 |
+ "ngFx": "~1.1.0" |
|
| 11 | 12 |
}, |
| 12 | 13 |
"devDependencies": {
|
| 13 | 14 |
"angular-mocks": "^1.3.0" |
+ 2
- 0
test/karma.conf.js
@@ -29,6 +29,8 @@ module.exports = function(config) {
|
||
| 29 | 29 |
'bower_components/angular-sanitize/angular-sanitize.js', |
| 30 | 30 |
'bower_components/angular-touch/angular-touch.js', |
| 31 | 31 |
'bower_components/angular-ui-router/release/angular-ui-router.js', |
| 32 |
+ 'bower_components/gsap/src/uncompressed/TweenMax.js', |
|
| 33 |
+ 'bower_components/ngFx/dist/ngFx.js', |
|
| 32 | 34 |
'bower_components/angular-mocks/angular-mocks.js', |
| 33 | 35 |
// endbower |
| 34 | 36 |
"app/scripts/**/*.js", |