Skip to content

Commit

Permalink
Hire-me button animates on browser resize.
Browse files Browse the repository at this point in the history
  • Loading branch information
@codakid
codakid committed Sep 26, 2016
1 parent 6e49d68 commit 9831fe5
Show file tree
Hide file tree
Showing 3 changed files with 228 additions and 14 deletions.
40 changes: 31 additions & 9 deletions index.html
View file
Expand Up @@ -28,7 +28,7 @@
<meta property="og:description" content="Mike Baker, Site Maker @mibake, JavaScript Developer, Responsive Web Design, UX Engineer, looking for an excuse to travel distances near and far to talk with you in person.">
<meta property="og:image" content="http://mibake.space/img/Mike-Baker_site-maker_Hire-this-guy.jpg">
<meta property="og:url" content="http://mibake.space">
<meta name="twitter:card" content="http://mibake.space/img/Mike-Baker_site-maker_Hire-this-guy.jpghttp:/"mibake.space/>
<meta name="twitter:card" content="http://mibake.space/img/Mike-Baker_site-maker_Hire-this-guy.jpg"mibake.space/>

<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/button.css" />
Expand Down Expand Up @@ -225,7 +225,7 @@

#hello {
max-width: 35rem;
padding-top: 4rem;
padding-top: 1.62rem;

background-color: rgba(247,248,243,0.4);
border-radius: 0 0 0 1rem;
Expand All @@ -250,7 +250,7 @@
}

#sum {
margin-top: 1.2rem;
margin-top: 0.2rem;
text-align: center;
}

Expand All @@ -274,12 +274,12 @@
margin-bottom: .5rem;
}
h2 {
margin: .2rem 0;
margin: 0;
}

.intro-txt {
margin: 0.2rem 2rem 1.2rem;
padding: 1.2rem;
padding: 0.2rem;
}

.right {
Expand Down Expand Up @@ -394,6 +394,13 @@

}

#hello {
padding-top: 4rem;
}
h2 { margin: 0.2rem 0; }
#sum { margin-top: 1.2rem; }
#intro-txt { }

#hero {
-webkit-background-size: cover;
-moz-background-size: cover;
Expand Down Expand Up @@ -452,9 +459,20 @@
height: 0 !important;
}

}

}

#rwd_box {
position: fixed;
display: block;
width: 1px;
height: 1px;
border: 1px solid red;
top: 33px;
left: 33px;
display: none;
}

@media only screen and (min-height: 580px) {

Expand Down Expand Up @@ -592,7 +610,11 @@ <h4>Agencies</h4>
<li>FLIPSIDE</li>
<li>HEILBrice</li>
<li>Big Bad Goose</li>
<li>y mucho más&hellip;</li>
<li>MDM Worldwide</li>
<li>Crowdly</li>
<li>Prove</li>
<li>Lunar</li>
<li>y más&hellip;</li>

</ul>

Expand All @@ -602,7 +624,7 @@ <h5>Cisco</h5>
<br><a href="https://opensoc.github.io/">https://opensoc.github.io</a></p>

<h5>Adblock</h5>
<p><a href="https://getadblock.com/">https://getadblock.com</a>
<p><a href="https://getadblock.com/contributors/#past_contributors">https://getadblock.com</a>
</p>

<h5>Disconnect</h5>
Expand Down Expand Up @@ -662,7 +684,7 @@ <h3>School Work</h3>

</section>


<span id="rwd_box" style="width:10px; height:10px"></span>
<script src="js/TweenMax.min.js"></script>
<script src="js/bideo.js"></script>
<script src="js/main.js"></script>
Expand Down
149 changes: 147 additions & 2 deletions js/bideo.js
View file
Expand Up @@ -6,8 +6,114 @@
* - http://www.w3schools.com/tags/ref_av_dom.asp
*/

var waitForFinalEvent = (function () {
var timers = {};
return function (callback, ms, uniqueId) {
if (!uniqueId) {
uniqueId = "Don't call this twice without a uniqueId";
}
if (timers[uniqueId]) {
clearTimeout (timers[uniqueId]);
}
timers[uniqueId] = setTimeout(callback, ms);
};
})();

(function (global) {


/** Stretch Button **/
function getRandom2(min, max){
return Math.random() * (max - min) + min;
}

var real2_bt = document.querySelectorAll('#hire-me')[0];
var rwd_box = document.querySelectorAll('#rwd_box');

function real2_animateHireMeButton(){

/* var real2_particleCount = 6;
var real2_particles;
real2_particles = []
console.log('Woop Woop Fire away!');
TweenLite.to(real2_bt.querySelectorAll('.button__bg'), 1.5, { scaleX: 1.05, ease: Expo.easeOut, delay: 0.2 });
for (var i = 0; i < real2_particleCount; i++) {
real2_particles.push(document.createElement('span'));
real2_bt.appendChild(real2_particles[i]);
real2_particles[i].classList.add(i % 2 ? 'left' : 'right');
var dir = i % 2 ? '-' : '+';
var tl = new TimelineLite();
tl.to(real2_particles[i], 2, { x: dir + 18, scaleX: 1.4, ease: Expo.easeOut });
}
TweenLite.to(real2_bt.querySelectorAll('.button__bg'), 0.9, { scale: 1, ease: Elastic.easeOut.config(1.2, 0.4), delay: 0.1,
onComplete: function(){
console.log('clicked = false;')
},
onOverwrite: function(){
console.log('clicked = false; //overwrite')
}
}, 0.6);
for (var i = 0; i < real2_particleCount; i++) {
var dir = i % 2 ? '-' : '+';
var size = i < 2 ? 1 : getRandom(0.2, 0.6);
var r = i % 2 ? getRandom(-1, 1)*i/2 : getRandom(-1, 1)*i;
TweenLite.set(real2_particles[i], { scale: size });
TweenLite.to(real2_particles[i], 0.1, { scale: size, x: dir +'=25' });
TweenLite.to(real2_particles[i], 0.6, { x: dir + 60, y: r*10, scale: 0, opacity: 0, ease: Power3.easeOut });
}*/


var real2_particleCount = 6;
var real2_particles;
real2_particles = []

TweenLite.to(real2_bt.querySelectorAll('.button__bg'), 1.5, { scaleX: 1.05, ease: Expo.easeOut, delay: 0.7 });


for (var i = 0; i < real2_particleCount; i++) {
real2_particles.push(document.createElement('span'));
real2_bt.appendChild(real2_particles[i]);

real2_particles[i].classList.add(i % 2 ? 'left' : 'right');

var dir2 = i % 2 ? '-' : '+';
var tl2 = new TimelineLite();

tl2.to(real2_particles[i], 2, { x: dir2 + 18, scaleX: 1.4, ease: Expo.easeOut });
}

TweenLite.to(real2_bt.querySelectorAll('.button__bg'), 0.9, { scale: 1, ease: Elastic.easeOut.config(1.2, 0.4), delay: .9,
onComplete: function(){
console.log('clicked = false;')
},
onOverwrite: function(){
console.log('clicked = false; //overwrite')
}
}, 0.6);

for (var i = 0; i < real2_particleCount; i++) {
var dir = i % 2 ? '-' : '+';
var size = i < 2 ? 1 : getRandom2(0.2, 0.6);
var r = i % 2 ? getRandom2(-1, 1)*i/2 : getRandom2(-1, 1)*i;

TweenLite.set(real2_particles[i], { scale: size });
TweenLite.to(real2_particles[i], 0.1, { scale: size, x: dir +'=25' });
TweenLite.to(real2_particles[i], 0.6, { x: dir + 60, y: r*10, scale: 0, opacity: 0, ease: Power3.easeOut });
}
};




// Define Bideo constructor on the global object
global.Bideo = function () {

Expand Down Expand Up @@ -150,17 +256,54 @@ console.log('body = ',bv2yy);
// Also called when window/container is resized
this.resize = function () {

console.log('window height = ');
var window_height = window.innerHeight;
console.log(window_height);

var window_width = window.innerWidth;

var temp_w = Math.floor(window_width/10);
var temp_h = Math.floor(window_height/10);

var final_w = 1;
var final_h = 1;

waitForFinalEvent(function(){
final_w = 100;
final_h = 100;

if (rwd_box) {
console.log("rwd_box.style");
console.log(rwd_box[0].style.width = temp_string);
console.log(rwd_box[0].style.height = temp_h + 'px');
}
console.log('final_w = ',final_w,' final_h = ', final_h);
}, 500, "resize-call-#1");

var temp_string = temp_w + 'px';
console.log('temp_string = ', temp_string);

//rwd_box.style.width = temp_string;
console.log('rwd_box = ', rwd_box);
console.log('bv = ', this.resize);
// rwd_box.style.heightRatio = Math.floor(window_height/100);


real2_animateHireMeButton();


// IE/Edge still don't support object-fit: cover
//
// use for IE browsers:
if ('object-fit' in document.body.style) return;

// Video's intrinsic dimensions
var w = this.videoEl.videoWidth
, h = this.videoEl.videoHeight;



console.log('window width w = ', w);
console.log('window height h = ', h);

// Intrinsic ratio
// Will be more than 1 if W > H and less if H > W
var videoRatio = (w / h).toFixed(2);
Expand Down Expand Up @@ -221,6 +364,8 @@ console.log('body = ',bv2yy);
this.videoEl.style.height = new_height + 'px';
};


};


}(window));
53 changes: 50 additions & 3 deletions js/main.js
View file
Expand Up @@ -115,11 +115,15 @@ var handsEl = document.getElementById("hands");

var phoneEl = document.getElementById("phone-container");

var temp_num = getPosition(elmnt).y;
var temp_video_panel_scroll_height = getPosition(elmnt).y;

console.log('video panel y pos = ', temp_num);
var temp_phone_scroll_height = getPosition(phoneEl).y;

var phone_fixed_trigger = temp_num - 680; //this 680 number should be a variable calculated based on screen height
console.log('video panel y pos = ', temp_video_panel_scroll_height);

console.log('phone video y pos = ', temp_phone_scroll_height);

var phone_fixed_trigger = temp_video_panel_scroll_height - 338 - 400; // phone height it 338px, hands height is 578px

console.log('phone_fixed_trigger number = ', phone_fixed_trigger);

Expand Down Expand Up @@ -246,6 +250,8 @@ function removeClass(el, className) {



var real_bt = document.querySelectorAll('#hire-me')[0];
console.log('real_bt = ', real_bt);



Expand Down Expand Up @@ -318,4 +324,45 @@ function initBt3() {
}
});
}
function animateHireMeButton(){

var real_particleCount = 6;
var real_particles;
real_particles = []
console.log('Fire away!');

TweenLite.to(real_bt.querySelectorAll('.button__bg'), 1.5, { scaleX: 1.05, ease: Expo.easeOut, delay: 0.2 });


for (var i = 0; i < real_particleCount; i++) {
real_particles.push(document.createElement('span'));
real_bt.appendChild(real_particles[i]);

real_particles[i].classList.add(i % 2 ? 'left' : 'right');

var dir = i % 2 ? '-' : '+';
var tl = new TimelineLite();

tl.to(real_particles[i], 2, { x: dir + 18, scaleX: 1.4, ease: Expo.easeOut });
}

TweenLite.to(real_bt.querySelectorAll('.button__bg'), 0.9, { scale: 1, ease: Elastic.easeOut.config(1.2, 0.4), delay: 0.1,
onComplete: function(){
console.log('clicked = false;')
},
onOverwrite: function(){
console.log('clicked = false; //overwrite')
}
}, 0.6);

for (var i = 0; i < real_particleCount; i++) {
var dir = i % 2 ? '-' : '+';
var size = i < 2 ? 1 : getRandom(0.2, 0.6);
var r = i % 2 ? getRandom(-1, 1)*i/2 : getRandom(-1, 1)*i;

TweenLite.set(real_particles[i], { scale: size });
TweenLite.to(real_particles[i], 0.1, { scale: size, x: dir +'=25' });
TweenLite.to(real_particles[i], 0.6, { x: dir + 60, y: r*10, scale: 0, opacity: 0, ease: Power3.easeOut });
}
};

0 comments on commit 9831fe5

Please sign in to comment.