archive/theorangeone.net-legacy
Archived
1
Fork 0
Code Releases Packages Activity

Massive improvement to animation out

Browse source
This commit is contained in:
Jake Howard 2015-11-11 09:24:44 +00:00
parent 9b8cedfe14
commit ca5b31d946
2 changed files with 14 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
static/src/js/components/project-image.js
View file

@ -5,23 +5,20 @@ var Col = ReactBootstrap.Col;
var projectImage = React.createClass({ var projectImage = React.createClass({
render: function () { render: function () {
var contents = this.props.isHovered ? var animationClass = this.props.isHovered ? 'zoomIn' : 'zoomOut';
(
<div className="animated zoomIn">
<h4>{this.props.data.title}</h4>
<p>{this.props.data.text}</p>
<a href={this.props.data.link} className="btn btn-default">
Find out more
</a>
</div>
) : null;
return ( return (
<Col sm={4}> <Col sm={4}>
<div className="wrapper" > <div className="wrapper" >
<div className={"project " + this.props.data.className} <div className={"project " + this.props.data.className}
onMouseOver={this.props.onHover} onMouseOver={this.props.onHover}
onMouseLeave={this.props.onLeave} > onMouseLeave={this.props.onLeave} >
{ contents } <div className={"animated " + animationClass}>
<h4>{this.props.data.title}</h4>
<p>{this.props.data.text}</p>
<a href={this.props.data.link} className="btn btn-default btn-small">
Find out more
</a>
</div>
</div> </div>
</div> </div>
</Col> </Col>

9
static/src/less/style.less
View file

@ -120,13 +120,16 @@ ol , ul{
} }
& .project { & .project {
padding: 18px; padding: 25px;
.transition(~"opacity 0.5s ease-in"); .transition(~"opacity 0.5s ease-in");
opacity: 0; opacity: 0;
background-color: rgba(0,0,0,0.6); background-color: rgba(0,0,0,0.6);
h2 { p, a.btn {
margin-top: 0; font-size: 12px;
}
h4 {
font-size: 23px;
} }
} }
} }