diff --git a/css/res/black_branch.png b/css/res/black_branch.png new file mode 100644 index 0000000..e041cf3 Binary files /dev/null and b/css/res/black_branch.png differ diff --git a/css/res/black_branch_big.png b/css/res/black_branch_big.png new file mode 100644 index 0000000..455530a Binary files /dev/null and b/css/res/black_branch_big.png differ diff --git a/css/res/rainbow_branch.png b/css/res/rainbow_branch.png index 777562e..0701f1a 100644 Binary files a/css/res/rainbow_branch.png and b/css/res/rainbow_branch.png differ diff --git a/css/res/rainbow_branch_big.png b/css/res/rainbow_branch_big.png new file mode 100644 index 0000000..cac6ed4 Binary files /dev/null and b/css/res/rainbow_branch_big.png differ diff --git a/css/slider.css b/css/slider.css new file mode 100644 index 0000000..3944aff --- /dev/null +++ b/css/slider.css @@ -0,0 +1,42 @@ +@import "lesshat"; + +.ba-slider { + position: relative; + overflow: hidden; +} + +.ba-slider img { + width: 100%; + display:block; +} + +.resize { + position: absolute; + top:0; + left: 0; + height: 100%; + width: 50%; + overflow: hidden; +} + + +.handle { /* Thin line seperator */ + position:absolute; + left:50%; + top:0; + bottom:0; + width:4px; + margin-left:-2px; + + background: rgba(0,0,0,.5); + cursor: ew-resize; +} + + +.draggable:after { + width: 48px; + height: 48px; + margin: -24px 0 0 -24px; + line-height:48px; + font-size:30px; +} diff --git a/index.html b/index.html index 9a45692..d3fe2c8 100644 --- a/index.html +++ b/index.html @@ -43,9 +43,24 @@
-



  You're a
brand

+ + + ... + + + + +
+ +
+ +
+ +
+
+

Get Started

Getting started with Brancher is free and easy. There are no contracts or commitments, and everything is based upon the wants of the influencer or the company. Whether you are an influencer or a company, the first step is to make an account. When the account is created, you will have the ability to show interest in endorsement as an influencer or a company. In an influencer's profile, there should be examples for the type of work done, and the type of audience. For companies, there will be a catalog of influencers to look from, with filters to ease the search. From there, influencers will be contacted by various companies, and both the influencer and company will branch out to the public.

diff --git a/js/slider.js b/js/slider.js new file mode 100644 index 0000000..5a56a3b --- /dev/null +++ b/js/slider.js @@ -0,0 +1,78 @@ +// Call & init +$(document).ready(function(){ + $('.ba-slider').each(function(){ + var cur = $(this); + // Adjust the slider + var width = cur.width()+'px'; + cur.find('.resize img').css('width', width); + // Bind dragging events + drags(cur.find('.handle'), cur.find('.resize'), cur); + }); +}); + +// Update sliders on resize. +// Because we all do this: i.imgur.com/YkbaV.gif +$(window).resize(function(){ + $('.ba-slider').each(function(){ + var cur = $(this); + var width = cur.width()+'px'; + cur.find('.resize img').css('width', width); + }); +}); + +function drags(dragElement, resizeElement, container) { + + // Initialize the dragging event on mousedown. + dragElement.on('mousedown touchstart', function(e) { + + dragElement.addClass('draggable'); + resizeElement.addClass('resizable'); + + // Check if it's a mouse or touch event and pass along the correct value + var startX = (e.pageX) ? e.pageX : e.originalEvent.touches[0].pageX; + + // Get the initial position + var dragWidth = dragElement.outerWidth(), + posX = dragElement.offset().left + dragWidth - startX, + containerOffset = container.offset().left, + containerWidth = container.outerWidth(); + + // Set limits + minLeft = containerOffset + 10; + maxLeft = containerOffset + containerWidth - dragWidth - 10; + + // Calculate the dragging distance on mousemove. + dragElement.parents().on("mousemove touchmove", function(e) { + + // Check if it's a mouse or touch event and pass along the correct value + var moveX = (e.pageX) ? e.pageX : e.originalEvent.touches[0].pageX; + + leftValue = moveX + posX - dragWidth; + + // Prevent going off limits + if ( leftValue < minLeft) { + leftValue = minLeft; + } else if (leftValue > maxLeft) { + leftValue = maxLeft; + } + + // Translate the handle's left value to masked divs width. + widthValue = (leftValue + dragWidth/2 - containerOffset)*100/containerWidth+'%'; + + // Set the new values for the slider and the handle. + // Bind mouseup events to stop dragging. + $('.draggable').css('left', widthValue).on('mouseup touchend touchcancel', function () { + $(this).removeClass('draggable'); + resizeElement.removeClass('resizable'); + }); + $('.resizable').css('width', widthValue); + }).on('mouseup touchend touchcancel', function(){ + dragElement.removeClass('draggable'); + resizeElement.removeClass('resizable'); + }); + e.preventDefault(); + }).on('mouseup touchend touchcancel', function(e){ + dragElement.removeClass('draggable'); + resizeElement.removeClass('resizable'); + }); +}