JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://secretdesignproject.com/sdp/triangles/js/jquery-1.10.2.min.js"></script>
<script src="http://secretdesignproject.com/sdp/triangles/js/angular.js"></script>
<script src="http://secretdesignproject.com/sdp/triangles/js/angular-resource.min.js"></script>
<script src="http://secretdesignproject.com/sdp/triangles/js/controllers/app.js"></script>
<script src="http://secretdesignproject.com/sdp/triangles/js/jquery.scrollTo.min.js"></script>
<script src="http://secretdesignproject.com/sdp/triangles/js/jquery.localScroll.min.js"></script>
<link rel="stylesheet" href="http://secretdesignproject.com/sdp/triangles/css/sdp.css">
<body>
<div class="container" ng-controller="AppCtrl">
<div class="intro">
<!-- <div class="glyphicon glyphicon-send contact-btn contact-btn-black"></div> -->
<div class="contact-btn-back"></div>
<a href="#contact" id="contact_btn" class="glyphicon glyphicon-send contact-btn contact-btn-white"></a>
<div class="arrow-wrapper">
<div class="arrow">
<div class="arrow-stem"><span class="sdp">SDP</span></div>
<div class="arrow-down"></div>
</div>
</div>
</div>
<div class="bla">
<p>I make websites.</p><br />
<p>I'm passionate about what I do.</a> <br />
<p>Let's talk.</p><br /><br />
<p>Here is some recent work...</p>
</div><!--bla-->
<div class="projects">
<div class="project">
<div class="project-left">
<div class="project-name" style="background-color:#55a8ef;" ng-click="descriptionClick($event)">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1170px" height="200px" viewBox="0 0 1170 200" enable-background="new 0 0...
JavaScript
$(document).ready( function($){
var speed = 250;
$('.arrow').hover(
function(){
//$('.arrow-stem').animate({width:'80px'}, speed);
$('.arrow-down').animate({'top':'0'}, speed);
},
function(){
//$('.arrow-stem').animate({width:'160px'}, speed);
$('.arrow-down').animate({'top':'-80px'}, speed);
}
);
$.localScroll({
target:'body',
duration: 1000
});
});