├── .gitignore ├── README.md ├── bower.json ├── gulpfile.coffee ├── package.json └── src ├── afx ├── (Footage) │ ├── assets │ │ ├── header-info_01.png │ │ ├── header-info_02.png │ │ ├── page-feed.png │ │ ├── page-profile_01.png │ │ ├── page-profile_02.png │ │ ├── page-profile_feed.png │ │ ├── system-bar.png │ │ ├── tab-bar_01.png │ │ └── tab-bar_02.png │ ├── dribbble │ │ ├── bottom.png │ │ ├── bottom_map.png │ │ ├── full.png │ │ ├── full_map.png │ │ ├── top.png │ │ └── top_map.png │ ├── full.png │ ├── full_map.png │ ├── header-info_01.png │ ├── header-info_02.png │ ├── page-feed.png │ ├── page-profile_01.png │ ├── page-profile_02.png │ ├── page-profile_feed.png │ ├── system-bar.png │ ├── tab-bar_01.png │ ├── tab-bar_02.png │ ├── top.png │ └── top_map.png ├── autobots_finish.aep ├── autobots_start.aep ├── export │ └── empty_comp.png ├── screen_01.psd └── screen_02.psd ├── html ├── e0.html ├── e1.html ├── e2.html └── e3.html ├── img ├── iphone-status-bar-white.png └── optimus.jpg ├── index.html ├── js └── app.js └── scss ├── partials ├── _base.scss ├── _e1.scss ├── _e2.scss ├── _e3.scss ├── _helpers.scss ├── _setup.scss └── _variables.scss └── style.scss /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | node_modules 3 | src/afx/pics/* 4 | src/afx/export/00_dribbble_alpha.mov 5 | src/afx/export/00_dribbble.mov 6 | src/afx/export/00_dribbble.psd 7 | src/afx/export/00_dribbble.gif 8 | src/afx/export/render.mp4 9 | www 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Interface Animations 2 | 3 | ## After Effects setup 4 | Download and install a 30-day trial of [After Effects](https://creative.adobe.com/products/download/aftereffects). If you already have After Effects CS6, no need to download CC. 5 | 6 | In terminal run the following commands: 7 | ``` 8 | $ git clone git@github.com:markgeyer/interface-animations.git 9 | $ cd interface-animations/src/afx 10 | $ open . 11 | ``` 12 | 13 | ## AngularJS setup 14 | Download and install [node.js](http://nodejs.org) and [git](http://git-scm.com) if you don't already have these. 15 | 16 | In terminal run the following commands: 17 | ``` 18 | $ git clone git@github.com:markgeyer/interface-animations.git 19 | $ cd interface-animations 20 | $ sudo npm install -g bower 21 | ``` 22 | Enter your computers password. No worries, this is needed b/c you typed `sudo` :) 23 | ``` 24 | $ bower install 25 | $ npm install 26 | $ gulp 27 | ``` 28 | Running `gulp` will launch [localhost:3000](http://localhost:3000) that contains the exercises needed. -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "interface-animations", 3 | "version": "0.0.1", 4 | "private": true, 5 | "ignore": [ 6 | "**/.*", 7 | "node_modules", 8 | "bower_components" 9 | ], 10 | "devDependencies": { 11 | "angular": "1.2.23", 12 | "angular-touch": "1.2.23", 13 | "angular-animate": "1.2.23", 14 | "angular-route": "1.2.23", 15 | "fastclick": "~1.0.3", 16 | "jquery": "2.1.1" 17 | } 18 | } -------------------------------------------------------------------------------- /gulpfile.coffee: -------------------------------------------------------------------------------- 1 | gulp = require 'gulp' 2 | fs = require 'fs' 3 | minifycss = require 'gulp-minify-css' 4 | prefix = require 'gulp-autoprefixer' 5 | sass = require 'gulp-sass' 6 | concat = require 'gulp-concat' 7 | uglify = require 'gulp-uglify' 8 | browserSync = require 'browser-sync' 9 | rimraf = require 'gulp-rimraf' 10 | 11 | 12 | gulp.task 'init', -> 13 | fs.mkdirSync './www' unless fs.existsSync('./www') 14 | fs.mkdirSync './www/css' unless fs.existsSync('./www/css') 15 | fs.mkdirSync './www/js' unless fs.existsSync('./www/js') 16 | gulp.src('./src/img/**').pipe gulp.dest('./www/img') 17 | gulp.src('./src/html/**').pipe gulp.dest('./www') 18 | 19 | gulp.task 'clean', -> 20 | gulp.src('./www', read: false) 21 | .pipe rimraf() 22 | 23 | gulp.task 'html', -> 24 | gulp.src([ 25 | './src/*.html' 26 | './src/html/*.html' 27 | ]) 28 | .pipe gulp.dest('./www') 29 | .pipe browserSync.reload(stream: true) 30 | 31 | gulp.task 'style', -> 32 | gulp.src([ 33 | './node_modules/normalize.css/normalize.css' 34 | './src/scss/*.scss' 35 | ]) 36 | .pipe sass() 37 | .pipe prefix('last 1 version', '> 1%', 'ie 10', 'ie 11', 'iOS 6', 'iOS 7', 'Android 4', cascade: true) 38 | .pipe concat('style.css') 39 | .pipe minifycss({keepSpecialComments: 0}) 40 | .pipe gulp.dest('./www/css') 41 | .pipe browserSync.reload(stream: true) 42 | 43 | gulp.task 'scripts', -> 44 | gulp.src([ 45 | './bower_components/angular/angular.js' 46 | './bower_components/angular-route/angular-route.js' 47 | './bower_components/angular-animate/angular-animate.js' 48 | './bower_components/angular-touch/angular-touch.js' 49 | './bower_components/jquery/dist/jquery.js' 50 | './bower_components/fastclick/lib/fastclick.js' 51 | './src/js/*.js' 52 | ]) 53 | .pipe concat('scripts.js') 54 | .pipe uglify() 55 | .pipe gulp.dest('./www/js') 56 | .pipe browserSync.reload(stream: true) 57 | 58 | gulp.task 'browser-sync', -> 59 | browserSync server: 60 | baseDir: './www' 61 | 62 | gulp.task 'default', ['init', 'html', 'style', 'scripts', 'browser-sync'], -> 63 | gulp.watch ['./src/*.html', './src/html/*.html'], ['html'] 64 | gulp.watch './src/scss/**/*.scss', ['style'] 65 | gulp.watch './bower_components/**/*.js', ['scripts'] 66 | gulp.watch './src/js/*.js', ['scripts'] 67 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "interface-animations", 3 | "version": "0.0.1", 4 | "repository": { 5 | "type": "git", 6 | "url": "https://github.com/markgeyer/interface-animations" 7 | }, 8 | "description": "", 9 | "author": "Mark Geyer", 10 | "license": "ISC", 11 | "dependencies": { 12 | "normalize.css": "^3.0.1" 13 | }, 14 | "devDependencies": { 15 | "bower": "^1.3.9", 16 | "browser-sync": "^1.3.3", 17 | "coffee-script": "^1.7.1", 18 | "gulp": "^3.8.7", 19 | "gulp-autoprefixer": "0.0.8", 20 | "gulp-concat": "^2.3.4", 21 | "gulp-minify-css": "^0.3.7", 22 | "gulp-rimraf": "^0.1.0", 23 | "gulp-sass": "^0.7.2", 24 | "gulp-uglify": "^0.3.1" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/afx/(Footage)/assets/header-info_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/afx/(Footage)/assets/header-info_01.png -------------------------------------------------------------------------------- /src/afx/(Footage)/assets/header-info_02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/afx/(Footage)/assets/header-info_02.png -------------------------------------------------------------------------------- /src/afx/(Footage)/assets/page-feed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/afx/(Footage)/assets/page-feed.png -------------------------------------------------------------------------------- /src/afx/(Footage)/assets/page-profile_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/afx/(Footage)/assets/page-profile_01.png -------------------------------------------------------------------------------- /src/afx/(Footage)/assets/page-profile_02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/afx/(Footage)/assets/page-profile_02.png -------------------------------------------------------------------------------- /src/afx/(Footage)/assets/page-profile_feed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/afx/(Footage)/assets/page-profile_feed.png -------------------------------------------------------------------------------- /src/afx/(Footage)/assets/system-bar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/afx/(Footage)/assets/system-bar.png -------------------------------------------------------------------------------- /src/afx/(Footage)/assets/tab-bar_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/afx/(Footage)/assets/tab-bar_01.png -------------------------------------------------------------------------------- /src/afx/(Footage)/assets/tab-bar_02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/afx/(Footage)/assets/tab-bar_02.png -------------------------------------------------------------------------------- /src/afx/(Footage)/dribbble/bottom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/afx/(Footage)/dribbble/bottom.png -------------------------------------------------------------------------------- /src/afx/(Footage)/dribbble/bottom_map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/afx/(Footage)/dribbble/bottom_map.png -------------------------------------------------------------------------------- /src/afx/(Footage)/dribbble/full.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/afx/(Footage)/dribbble/full.png -------------------------------------------------------------------------------- /src/afx/(Footage)/dribbble/full_map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/afx/(Footage)/dribbble/full_map.png -------------------------------------------------------------------------------- /src/afx/(Footage)/dribbble/top.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/afx/(Footage)/dribbble/top.png -------------------------------------------------------------------------------- /src/afx/(Footage)/dribbble/top_map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/afx/(Footage)/dribbble/top_map.png -------------------------------------------------------------------------------- /src/afx/(Footage)/full.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/afx/(Footage)/full.png -------------------------------------------------------------------------------- /src/afx/(Footage)/full_map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/afx/(Footage)/full_map.png -------------------------------------------------------------------------------- /src/afx/(Footage)/header-info_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/afx/(Footage)/header-info_01.png -------------------------------------------------------------------------------- /src/afx/(Footage)/header-info_02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/afx/(Footage)/header-info_02.png -------------------------------------------------------------------------------- /src/afx/(Footage)/page-feed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/afx/(Footage)/page-feed.png -------------------------------------------------------------------------------- /src/afx/(Footage)/page-profile_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/afx/(Footage)/page-profile_01.png -------------------------------------------------------------------------------- /src/afx/(Footage)/page-profile_02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/afx/(Footage)/page-profile_02.png -------------------------------------------------------------------------------- /src/afx/(Footage)/page-profile_feed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/afx/(Footage)/page-profile_feed.png -------------------------------------------------------------------------------- /src/afx/(Footage)/system-bar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/afx/(Footage)/system-bar.png -------------------------------------------------------------------------------- /src/afx/(Footage)/tab-bar_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/afx/(Footage)/tab-bar_01.png -------------------------------------------------------------------------------- /src/afx/(Footage)/tab-bar_02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/afx/(Footage)/tab-bar_02.png -------------------------------------------------------------------------------- /src/afx/(Footage)/top.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/afx/(Footage)/top.png -------------------------------------------------------------------------------- /src/afx/(Footage)/top_map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/afx/(Footage)/top_map.png -------------------------------------------------------------------------------- /src/afx/autobots_finish.aep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/afx/autobots_finish.aep -------------------------------------------------------------------------------- /src/afx/autobots_start.aep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/afx/autobots_start.aep -------------------------------------------------------------------------------- /src/afx/export/empty_comp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/afx/export/empty_comp.png -------------------------------------------------------------------------------- /src/afx/screen_01.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/afx/screen_01.psd -------------------------------------------------------------------------------- /src/afx/screen_02.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/afx/screen_02.psd -------------------------------------------------------------------------------- /src/html/e0.html: -------------------------------------------------------------------------------- 1 |
2 |

Welcome

3 |

Please choose an exercise ☺

4 |
-------------------------------------------------------------------------------- /src/html/e1.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |

ng-class & ng-click

5 |

Make the orange box appear using ng-class and ng-click.

6 |
7 | 8 |
9 |
10 | 11 |
12 | 13 |
-------------------------------------------------------------------------------- /src/html/e2.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |

ng-swipe-left & ng-swipe-right

5 |

Let's swipe to see some additional info. You can do this by adding ng-swipe-left and ng-swipe-right to the header below. Then add an ng-class to each slide and indicator to call out the CSS class and expression.

6 |
7 | 8 |
9 | 10 |
11 |
12 | 13 | 14 |
15 | Optimus Prime 16 |

Optimus Prime

17 |

Autobot Commander

18 |
19 | 20 | 21 |
22 |

"Freedom is the right
of all sentient beings."

23 |
24 |
    25 |
  • 26 |

    Strength

    27 |

    10

    28 |
    • 29 |
  • 30 |

    Speed

    31 |

    10

    32 |
    • 33 |
  • 34 |

    Courage

    35 |

    10

    36 |
    • 37 |
  • 38 |

    Skill

    39 |

    10

    40 |
    • 41 |
42 |
43 |
44 | 45 | 46 |
    47 |
  • 48 |
  • 49 |
50 | 51 |
52 |
53 | 54 |
55 | 56 |
-------------------------------------------------------------------------------- /src/html/e3.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |

ng-repeat & ng-model

5 |

Show the provided JSON data using ng-repeat and filter the results using the input as the ng-model. Add ng-show and ng-hide animations.

6 |
7 | 8 |
9 | 10 | 15 |
16 | 17 |
-------------------------------------------------------------------------------- /src/img/iphone-status-bar-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/img/iphone-status-bar-white.png -------------------------------------------------------------------------------- /src/img/optimus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markgeyer/interface-animations/1c6f6145abc47d35c17a26b0b9e162da3300be84/src/img/optimus.jpg -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Animations in Angular 10 | 11 | 12 | 13 | 14 |
15 |

AngularJS

16 | Menu 17 |
18 | 19 |
20 | 21 | Close 22 | 23 | 35 | 36 |

AngularJS

37 | 38 | 43 | 44 |
45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /src/js/app.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | 3 | angular.module('app', ['ngRoute', 'ngAnimate', 'ngTouch']) 4 | 5 | 6 | // Router setup 7 | .config(['$routeProvider', function ($routeProvider) { 8 | $routeProvider 9 | .when('/', { 10 | templateUrl: 'e0.html' 11 | }) 12 | .when('/1', { 13 | templateUrl: 'e1.html', 14 | controller: 'exerciseOneController' 15 | }) 16 | .when('/2', { 17 | templateUrl: 'e2.html', 18 | controller: 'exerciseTwoController' 19 | }) 20 | .when('/3', { 21 | templateUrl: 'e3.html', 22 | controller: 'exerciseThreeController' 23 | }) 24 | .otherwise({ redirectTo: '/' }); 25 | }]) 26 | 27 | 28 | 29 | 30 | 31 | 32 | // Start 33 | .controller('startController', ['$scope', '$location', function ($scope, $location) { 34 | console.log('startController started'); 35 | 36 | $scope.isActive = function(route) { 37 | return route === $location.path(); 38 | } 39 | 40 | $scope.isMenuShowing = true; 41 | 42 | $scope.closeExerciseMenu = function(){ 43 | if(window.innerWidth <= 600) { 44 | $scope.isMenuShowing = false; 45 | } 46 | }; 47 | 48 | $scope.toggleExerciseMenu = function(){ 49 | $scope.isMenuShowing = !$scope.isMenuShowing; 50 | }; 51 | 52 | $(window).resize(function(){ 53 | $scope.$apply(function() { 54 | if(window.innerWidth >= 600) { 55 | $scope.isMenuShowing = true; 56 | } else { 57 | $scope.isMenuShowing = false; 58 | } 59 | }); 60 | }); 61 | 62 | }]) 63 | 64 | 65 | 66 | 67 | 68 | 69 | // e1 controller 70 | .controller('exerciseOneController', ['$scope', function ($scope) { 71 | console.log('exerciseOneController started'); 72 | 73 | $scope.orange = function(){ 74 | $scope.isOrange = !$scope.isOrange; 75 | }; 76 | 77 | }]) 78 | 79 | 80 | 81 | 82 | 83 | 84 | // e2 controller 85 | .controller('exerciseTwoController', ['$scope', function ($scope) { 86 | console.log('exerciseTwoController started'); 87 | 88 | $scope.isPageOne = true; 89 | $scope.isPageTwo = false; 90 | 91 | $scope.toPageOne = function() { 92 | $scope.isPageOne = true; 93 | $scope.isPageTwo = false; 94 | }; 95 | 96 | $scope.toPageTwo = function() { 97 | $scope.isPageOne = false; 98 | $scope.isPageTwo = true; 99 | }; 100 | 101 | 102 | }]) 103 | 104 | 105 | 106 | 107 | 108 | 109 | // e3 controller 110 | .controller('exerciseThreeController', ['$scope', function ($scope) { 111 | console.log('exerciseThreeController started'); 112 | 113 | 114 | 115 | $scope.transformers = [ 116 | { name: 'Brawl' }, 117 | { name: 'Breakdown' }, 118 | { name: 'Megatron' }, 119 | { name: 'Shockwave' }, 120 | { name: 'Skywarp' }, 121 | { name: 'Soundwave' }, 122 | { name: 'Starscream' }, 123 | { name: 'Thundercracker' }, 124 | { name: 'Arcee' }, 125 | { name: 'Bumblebee' }, 126 | { name: 'Ironhide' }, 127 | { name: 'Jazz' }, 128 | { name: 'Jetfire' }, 129 | { name: 'Optimus Prime' }, 130 | { name: 'Ratchet' }, 131 | { name: 'Seibertron' }, 132 | { name: 'Sideswipe' }, 133 | { name: 'Silverbolt' }, 134 | { name: 'Warpath' } 135 | ] 136 | 137 | }]) 138 | 139 | 140 | 141 | 142 | 143 | 144 | window.addEventListener('load', function() { 145 | FastClick.attach(document.body); 146 | }, false); 147 | 148 | }).call(this); -------------------------------------------------------------------------------- /src/scss/partials/_base.scss: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Roboto:300,400); 2 | 3 | *, 4 | *:before, 5 | *:after { 6 | box-sizing: border-box; 7 | } 8 | 9 | html { 10 | -webkit-touch-callout: none; 11 | -webkit-tap-highlight-color: rgba(0,0,0,0); 12 | -webkit-overflow-scrolling: touch; 13 | -webkit-font-smoothing: antialiased; 14 | } 15 | 16 | body { 17 | color: #333; 18 | font-family: Roboto, Arial, sans-serif; 19 | font-weight: 300; 20 | line-height: 1.5; 21 | overflow-x: hidden; 22 | min-width: 320px; 23 | } 24 | 25 | h1,h2,h3,h4 { 26 | margin-top: 0; 27 | font-weight: 300; 28 | } 29 | 30 | b, strong { 31 | font-weight: 400; 32 | } 33 | 34 | a { 35 | color: #3366CC; 36 | 37 | &:hover { 38 | color: #7093db; 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/scss/partials/_e1.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Exercise 1 3 | ========================================================================== */ 4 | 5 | .box { 6 | width: 200px; 7 | height: 200px; 8 | opacity: 0; 9 | margin-bottom: 1rem; 10 | 11 | &.orange { 12 | background-color: orange; 13 | } 14 | &.green { 15 | background-color: green; 16 | } 17 | } 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | /* Animations 26 | ========================================================================== */ 27 | 28 | .fade-in-box-ani { 29 | animation: fadeIn .3s forwards; 30 | 31 | &-remove { 32 | animation: fadeOut .3s forwards; 33 | } 34 | } 35 | 36 | @keyframes fadeIn { 37 | from { 38 | opacity: 0; 39 | transform: translate(0,0) scale(2) rotate(0); 40 | } 41 | to { 42 | opacity: 1; 43 | transform: translate(0,0) scale(1) rotate(0); 44 | } 45 | } 46 | @keyframes fadeOut { 47 | from { 48 | opacity: 1; 49 | transform: translate(0,0) scale(1) rotate(0); 50 | } 51 | to { 52 | opacity: 0; 53 | transform: translate(150px,0) scale(.5) rotate(90deg); 54 | } 55 | } -------------------------------------------------------------------------------- /src/scss/partials/_e2.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Exercise 2 3 | ========================================================================== */ 4 | 5 | .phone-container { 6 | position: relative; 7 | margin: 0 auto; 8 | max-width: 320px; 9 | user-select: none; 10 | } 11 | 12 | .autobot { 13 | position: relative; 14 | padding-top: 2rem; 15 | height: 200px; 16 | background: #4eb5e7 url('../img/iphone-status-bar-white.png') no-repeat; 17 | background-size: 100%; 18 | text-align: center; 19 | color: white; 20 | overflow: hidden; 21 | 22 | .slide-01 { 23 | position: absolute; 24 | width: 100%; 25 | transform: translate(0,0); 26 | transition-property: transform, opacity; 27 | transition-duration: .3s; 28 | transition-timing-function: cubic-bezier(0,1,1,1); 29 | opacity: 1; 30 | 31 | img { 32 | border: 5px solid rgba(0,0,0,.05); 33 | background-size: 100%; 34 | border-radius: 50%; 35 | } 36 | 37 | h2, h4 { 38 | margin: 0; 39 | font-weight: 400; 40 | } 41 | 42 | h4 { 43 | color: rgba(255,255,255,.7); 44 | } 45 | 46 | &.swiped { 47 | transform: translate(-100%,0); 48 | opacity: .4; 49 | } 50 | } 51 | 52 | .slide-02 { 53 | position: absolute; 54 | width: 100%; 55 | transform: translate(0,0); 56 | transition-property: transform, opacity; 57 | transition-duration: .3s; 58 | transition-timing-function: cubic-bezier(0,1,1,1); 59 | opacity: 1; 60 | 61 | .quote { 62 | margin-top: .5rem; 63 | font-weight: 400; 64 | } 65 | 66 | ul { 67 | width: 100%; 68 | list-style: none; 69 | margin: 0; 70 | padding-left: 0; 71 | 72 | li { 73 | display: inline-block; 74 | border-right: 1px solid rgba(255,255,255,.3); 75 | text-align: center; 76 | 77 | &:last-child { 78 | border-right: none; 79 | } 80 | 81 | p { 82 | margin: 0; 83 | font-weight: 400; 84 | color: rgba(255,255,255,.7); 85 | } 86 | 87 | h2 { 88 | margin: 0; 89 | } 90 | } 91 | } 92 | 93 | &.swiped { 94 | transform: translate(100%,0); 95 | opacity: .4; 96 | } 97 | } 98 | 99 | .page-indicators { 100 | position: absolute; 101 | bottom: 6px; 102 | width: 100%; 103 | margin: 0; 104 | padding-left: 0; 105 | list-style: none; 106 | 107 | li { 108 | display: inline-block; 109 | width: 7px; 110 | height: 7px; 111 | margin: 0 .125rem; 112 | opacity: 1; 113 | background: white; 114 | border-radius: 50%; 115 | 116 | &.off { 117 | opacity: .4; 118 | } 119 | } 120 | } 121 | } 122 | 123 | -------------------------------------------------------------------------------- /src/scss/partials/_e3.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Exercise 3 3 | ========================================================================== */ 4 | 5 | input { 6 | padding: .5rem; 7 | border: 1px solid rgba(0,0,0,.15); 8 | border-radius: .25rem; 9 | outline: none; 10 | } 11 | 12 | .listview { 13 | list-style: none; 14 | max-width: 280px; 15 | padding-left: 0; 16 | 17 | li { 18 | border-bottom: 1px solid rgba(0,0,0,.08); 19 | 20 | a { 21 | display: block; 22 | padding: .5rem; 23 | color: #333; 24 | text-decoration: none; 25 | } 26 | } 27 | } 28 | 29 | 30 | 31 | 32 | 33 | /* Animations 34 | ========================================================================== */ 35 | 36 | .fade-in-result-ani { 37 | animation: fadeInResultAni .2s; 38 | 39 | &-remove { 40 | animation: fadeOutResultAni .2s; 41 | } 42 | } 43 | 44 | @keyframes fadeInResultAni { 45 | from { opacity: 0; } 46 | to { opacity: 1; } 47 | } 48 | 49 | @keyframes fadeOutResultAni { 50 | from { opacity: 1; } 51 | to { opacity: 0; } 52 | } -------------------------------------------------------------------------------- /src/scss/partials/_helpers.scss: -------------------------------------------------------------------------------- 1 | .scrollable { 2 | overflow-x: hidden; 3 | -webkit-overflow-scrolling: touch; 4 | } 5 | 6 | .tl { text-align: left; } 7 | .tc { text-align: center; } 8 | .tr { text-align: right; } 9 | 10 | .grid { 11 | display: block; 12 | padding: 0; 13 | margin: 0; 14 | text-align: left; 15 | letter-spacing: -0.31em; 16 | text-rendering: optimizespeed; 17 | } 18 | .grid--center { 19 | text-align: center; 20 | } 21 | .grid-cell { 22 | width: 100%; 23 | display: inline-block; 24 | margin: 0; 25 | padding: 0; 26 | vertical-align: top; 27 | text-align: left; 28 | letter-spacing: normal; 29 | word-spacing: normal; 30 | text-rendering: auto; 31 | } 32 | .grid-cell--center, .center { 33 | display: block; 34 | margin: 0 auto; 35 | } 36 | .size-1of12 { 37 | width: 8.333%; 38 | } 39 | .size-1of10 { 40 | width: 10%; 41 | } 42 | .size-1of8 { 43 | width: 12.5%; 44 | } 45 | .size-1of6, 46 | .size-2of12 { 47 | width: 16.667%; 48 | } 49 | .size-1of5, 50 | .size-2of10 { 51 | width: 20%; 52 | } 53 | .size-1of4, 54 | .size-2of8, 55 | .size-3of12 { 56 | width: 25%; 57 | } 58 | .size-3of10 { 59 | width: 30%; 60 | } 61 | .size-1of3, 62 | .size-2of6, 63 | .size-3of9, 64 | .size-4of12 { 65 | width: 33.333%; 66 | } 67 | .size-3of8 { 68 | width: 37.5%; 69 | } 70 | .size-2of5, 71 | .size-4of10 { 72 | width: 40%; 73 | } 74 | .size-5of12 { 75 | width: 41.667%; 76 | } 77 | .size-1of2, 78 | .size-2of4, 79 | .size-3of6, 80 | .size-4of8, 81 | .size-5of10, 82 | .size-6of12 { 83 | width: 50%; 84 | } 85 | .size-7of12 { 86 | width: 58.333%; 87 | } 88 | .size-3of5, 89 | .size-6of10 { 90 | width: 60%; 91 | } 92 | .size-5of8 { 93 | width: 62.5%; 94 | } 95 | .size-2of3, 96 | .size-4of6, 97 | .size-8of12 { 98 | width: 66.667%; 99 | } 100 | .size-7of10 { 101 | width: 70%; 102 | } 103 | .size-3of4, 104 | .size-6of8, 105 | .size-9of12 { 106 | width: 75%; 107 | } 108 | .size-4of5, 109 | .size-8of10 { 110 | width: 80%; 111 | } 112 | .size-5of6, 113 | .size-10of12 { 114 | width: 83.333%; 115 | } 116 | .size-7of8 { 117 | width: 87.5%; 118 | } 119 | .size-9of10 { 120 | width: 90%; 121 | } 122 | .size-11of12 { 123 | width: 91.667%; 124 | } -------------------------------------------------------------------------------- /src/scss/partials/_setup.scss: -------------------------------------------------------------------------------- 1 | .col-1 { 2 | position: absolute; 3 | background-color: #f5f5f5; 4 | width: 100%; 5 | height: 100%; 6 | z-index: 1; 7 | 8 | @media (min-width: 600px) { 9 | width: 200px; 10 | } 11 | } 12 | 13 | .col-2 { 14 | position: absolute; 15 | top: 50px; 16 | right: 0; 17 | bottom: 0; 18 | left: 0; 19 | padding: .5rem 1rem; 20 | min-width: 320px; 21 | 22 | @media (min-width: 600px) { 23 | top: 0; 24 | left: 200px; 25 | padding: 1rem 1.5rem; 26 | } 27 | } 28 | 29 | .mobile-menu { 30 | position: relative; 31 | height: 50px; 32 | background-color: #f5f5f5; 33 | 34 | h3 { 35 | position: absolute; 36 | top: 50%; 37 | left: 50%; 38 | margin: 0; 39 | font-weight: 400; 40 | transform: translate(-50%,-50%) 41 | } 42 | 43 | @media (min-width: 600px) { 44 | display: none; 45 | } 46 | } 47 | 48 | .menu-link { 49 | position: absolute; 50 | text-decoration: none; 51 | padding: .8rem 1rem; 52 | 53 | @media (min-width: 600px) { 54 | display: none; 55 | } 56 | } 57 | 58 | .angular-logo { 59 | display: block; 60 | width: 100px; 61 | height: 106px; 62 | margin: 1.5rem auto .5rem; 63 | opacity: 1; 64 | transition-property: transform, opacity; 65 | transition-duration: .15s; 66 | 67 | &:hover { 68 | transform: translate(0,-.25rem); 69 | opacity: .7; 70 | } 71 | } 72 | 73 | .nav { 74 | margin: 0; 75 | padding: 0; 76 | list-style: none; 77 | border-top: 1px solid #e5e5e5; 78 | 79 | li { 80 | border-bottom: 1px solid #e5e5e5; 81 | 82 | a { 83 | display: block; 84 | padding: 1rem; 85 | text-decoration: none; 86 | font-weight: 400; 87 | color: #666; 88 | transition: background-color .2s; 89 | 90 | &:hover { 91 | color: black; 92 | background-color: #f2f2f2; 93 | } 94 | &.on { 95 | color: black; 96 | background-color: white; 97 | } 98 | } 99 | } 100 | } 101 | 102 | .container { 103 | position: relative; 104 | padding: 1rem; 105 | perspective: 1000px; 106 | 107 | article { 108 | margin-bottom: 3rem; 109 | max-width: 800px; 110 | } 111 | } -------------------------------------------------------------------------------- /src/scss/partials/_variables.scss: -------------------------------------------------------------------------------- 1 | $bezier-right: cubic-bezier(.8,-.9,.4,1.6); -------------------------------------------------------------------------------- /src/scss/style.scss: -------------------------------------------------------------------------------- 1 | @import "partials/variables"; 2 | @import "partials/base"; 3 | @import "partials/setup"; 4 | @import "partials/helpers"; 5 | @import "partials/e1"; 6 | @import "partials/e2"; 7 | @import "partials/e3"; --------------------------------------------------------------------------------