Skip to content

Commit

Permalink
Animation goodness
Browse files Browse the repository at this point in the history
  • Loading branch information
@CompuIves
CompuIves committed May 4, 2015
1 parent 5d83219 commit 3f5e237
Show file tree
Hide file tree
Showing 7 changed files with 54 additions and 34 deletions.
26 changes: 13 additions & 13 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,10 +194,10 @@ <h1 class="headercolor">Experience</h1>
<div class="subheader-text ultradarkcolor flow-text col s12 m10 offset-m1 l6 offset-l3">
My experience is mostly based on personal projects, holiday work and work for professional companies through school. I'm trying to gain as much experience as possible each year.
</div>
<div class="subrow row scrollfade">
<h2 style="margin-bottom: 0;" class="darkcolor col s12">Education</h2>
<div class="subrow row">
<h2 style="margin-bottom: 0;" class="scrollfade darkcolor col s12">Education</h2>
<div class="entry col s12">
<div class="entryinfo col m4 s12">
<div class="entryinfo col m4 s12 scrollfade">
<a href="http://www.nassaucollege.nl/" target="_blank" class=" ultradarkcolor entryname">Dr. Nassau College Quintus </a>
<div class="entryyears">
2009 - 2015
Expand All @@ -206,18 +206,18 @@ <h2 style="margin-bottom: 0;" class="darkcolor col s12">Education</h2>
VWO - Nature & Technology + Biology
</div>
</div>
<div class="entrydescription col m8 s12">
<div class="entrydescription col m8 s12 scrollfade">
<span class="flow-text">
This is a high school for pre-university training in Assen, The Netherlands. I took technological and biological courses with a special subject called Research & Development that allowed me to do projects for commercial enterprises. Some projects listed here were also done in Research & Development. My next step is to go to university and study Biomedical Engineering.
</span>
</div>
</div>
</div>

<div class="subrow row scrollfade">
<h2 style="margin-bottom: 0;" class="darkcolor col s12">Work</h2>
<div class="subrow row">
<h2 style="margin-bottom: 0;" class="scrollfade darkcolor col s12">Work</h2>
<div class="entry col s12">
<div class="entryinfo col m4 s12">
<div class="entryinfo col m4 s12 scrollfade">
<a href="http://web.team6-games.com/" target="_blank" class="entryname ultradarkcolor">
Team6 Game Studios
</a>
Expand All @@ -228,12 +228,12 @@ <h2 style="margin-bottom: 0;" class="darkcolor col s12">Work</h2>
Graphic Artist
</div>
</div>
<div class="entrydescription col m8 s12">
<div class="entrydescription col m8 s12 scrollfade">
<span class="flow-text">
I first started working at Team6 in 2011 and after that I have worked there several times in the holidays. I started out as game-tester. After some time I became their Graphic Artist for video; I began making their trailers and commercials. Team6 has been a great learning experience for me, I have learned to work in a group cooperating with different people for an executive at a professional company.
</span>
<div class="recommendationtitle ultradarkcolor">Recommendation:</div>
<div class="recommendation"><i class="darkcolor fa fa-quote-left"></i>
<div class="recommendation scrollfade"><i class="darkcolor fa fa-quote-left"></i>
<span class="description">
<em>
Ives is one of the few, unique individuals with a true entrepreneur spirit: He is not afraid of working real hard to realize his big dreams. From very early age Ives started building his career, and never stopped since then. Ives is known as someone who picks up things real quick, takes good initiative, isn't afraid to do what is necessary and from whom you'll know he will always deliver his best work.
Expand Down Expand Up @@ -311,8 +311,8 @@ <h1>Projects</h1>
</div>

<div class="portfolio col s12">
<div ng-repeat="item in portfolio.items" ng-class="{'col': true, 'l2 m6 s12': item.small, 'l4 m6 s12': !item.small, 'scrollfade': true}">
<ng-portfolio transformfunction="portfolio.transformfunction(item, pos)" item="{{item}}"></ng-portfolio>
<div ng-repeat="item in portfolio.items" ng-class="{'col': true, 'l2 m6 s12': item.small, 'l4 m6 s12': !item.small}">
<ng-portfolio transformfunction="portfolio.transformfunction(item, pos)" item="{{item}}" ng-style="{'transition-delay': item.delay}"></ng-portfolio>
</div>
</div>
</div>
Expand All @@ -322,10 +322,10 @@ <h1>Projects</h1>
<div id="contactrow" class="row contentrow bgcolor-transparent" ng-controller="ContactController as contact">
<h1 class="headercolor">Contact</h1>
<div class="subheader-text ultradarkcolor flow-text col s12 m10 offset-m1 l6 offset-l3">
Thanks for visiting my website! <br> Do you have any questions, offers or do you just want to say hi? You can contact me by sending an email or filling out this form.
<span style="font-weight: 400">Thanks for visiting my website!</span> <br> Do you have any questions, offers or do you just want to say hi? You can contact me by sending an email or filling out this form.
</div>

<div class="col s12 l8 offset-l2 form">
<div class="col s12 l8 offset-l2 form scrollfade ">
<form name="contactForm" class="formcontents col s12 m10 offset-m1">
<div class="descriptionbox">Name:</div>
<input name='name' type="text" id="formname" ng-model="contact.data.name" class="bgcolor col s12" required></input>
Expand Down
14 changes: 8 additions & 6 deletions src/js/controller/controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,10 +51,10 @@ app.controller("MainController", ["$scope", "uiGmapGoogleMapApi", "ColorService"
}
}


if ($(window).outerHeight() < 600) {
/*
if (navigator.userAgent.match(/(iPad|iPhone|iPod)/g)) {
ScrollService();
}
}*/

$('.logocircle').hover(function() {
$(this).find('.logo').css({
Expand Down Expand Up @@ -136,9 +136,11 @@ app.controller("MainController", ["$scope", "uiGmapGoogleMapApi", "ColorService"
$(".descriptioncolor").css("color", ColorService.rgbToString(ColorService.colors.descriptioncolor)).data("color", ColorService.colors.descriptioncolor);
};

$('.header').addClass('navigator');
navigationScroll();

$(window).scroll(function() {
$(window).scroll(navigationScroll);

function navigationScroll() {
var windowTopHTML = $("html").scrollTop();
var windowTopBody = $("body").scrollTop();
var windowTop = Math.max(windowTopHTML, windowTopBody);
Expand All @@ -149,7 +151,7 @@ app.controller("MainController", ["$scope", "uiGmapGoogleMapApi", "ColorService"
$('.header').addClass('navigator');
$('ng-hello').removeClass('navigator');
}
})
}

this.goDown = function() {
var top = 0;
Expand Down
4 changes: 4 additions & 0 deletions src/js/controller/portfoliocontroller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ app.controller("PortfolioController", ['$scope', '$http', 'ColorService',
$http.get('res/portfolioitems.json')
.then((res) => {
this.items = res.data;

for (var i = 0; i < this.items.length; i++) {
this.items[i].delay = 0.1 * i + 's';
}
});
this.drop = undefined;
this.transformfunction = function(item, pos) {
Expand Down
2 changes: 1 addition & 1 deletion src/js/directives/hellocarddirective.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ app.directive("ngHello", ["ColorService",
scope.$watch(function() {
return ColorService.colors;
}, function(newValue) {
if (newValue && !$.isEmptyObject(newValue) && !colorsloaded) {
if (newValue && !$.isEmptyObject(newValue)) {
colorsloaded = true;
loadColors();
}
Expand Down
1 change: 1 addition & 0 deletions src/js/directives/navigationdirective.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ app.directive("ngNavigation", ['ColorService',

activeItem = items[i - 1];
items[i - 1].navitem.addClass('active');
items[i - 1].element.addClass('visible');
ga('send', 'event', items[i - 1].name, 'scroll')
setActive(items[i - 1]);
}
Expand Down
11 changes: 2 additions & 9 deletions src/js/services/scrollservice.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,22 +13,15 @@ app.factory('ScrollService', function() {
var top = $(this).offset().top;

if (top + $(this).outerHeight() * 0.3 < windowBottom) {
if ($(this).css('opacity') == 0) {
$(this).animate({
opacity: 1,
top: 0
}, {
duration: 300
});
}
$(this).removeClass('hidden');
}
});
}
}

function reset() {
$('.scrollfade').each(function() {
$(this).css('opacity', 0);
$(this).addClass('hidden');
});
}

Expand Down
30 changes: 25 additions & 5 deletions src/scss/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,16 @@ body {
transition: background-color 0.3s ease;
}

.scrollfade {
transition: all 0.4s ease;
&.hidden {

opacity: 0;
transform: translateY(15px) scale(0.9, 0.9);
}
}


.background {
transition: 1s ease all;
z-index: 0;
Expand Down Expand Up @@ -368,6 +378,7 @@ body {
}

.entrydescription {
transition-delay: 0.1s;
.flow-text {
@include widescreen {
font-size: 23px;
Expand Down Expand Up @@ -480,6 +491,15 @@ body {
}
}

#projectrow {
&.visible {
.frontportfolio ng-portfolio {
opacity: 1;
transform: none;
}
}
}

.frontportfolio {
display: inline-block;
background-color: rgba(0,0,0,0);
Expand All @@ -494,6 +514,11 @@ body {
pointer-events: none;
z-index: 0;
}

ng-portfolio {
opacity: 0;
transform: translateY(15px) scale(0.7, 0.7);
}
}

.backportfolio {
Expand Down Expand Up @@ -666,11 +691,6 @@ body {
padding-bottom: 0;
margin-bottom: 0;
}

.fa {
float: right;
display: inline-block;
}
}

.form {
Expand Down

0 comments on commit 3f5e237

Please sign in to comment.