rushilwiz/brancher
1
0
Fork 0
mirror of https://github.com/Rushilwiz/brancher.git synced 2025-04-20 12:00:16 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

homepage slider stuff

Browse Source
This commit is contained in:
arakich 2020-06-29 13:58:58 -04:00
parent d7b0f491ce
commit 9378e14215
7 changed files with 136 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
css/res/black_branch.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
css/res/black_branch_big.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
css/res/rainbow_branch.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 26 KiB

BIN
css/res/rainbow_branch_big.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

42
css/slider.css Normal file
View File

@ -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;
}

17
index.html
View File

@ -43,9 +43,24 @@
</div> </div>
</header> </header>
<div class="hero gradient-border"> <div class="hero gradient-border">
<h2><br><br>&emsp;&emsp;You're a<br>brand</h2> <head>
<meta charset="utf-8">
<title>...</title>
<link rel="stylesheet" type="text/css" href="css/slider.css" />
<script src="js/slider.js"></script>
</head>
<body>
<div class="ba-slider">
<img src="css/res/rainbow_branch_big.png" alt="">
<div class="resize">
<img src="css/res/black_branch_big.png" alt="">
</div>
<span class="handle"></span>
</div>
</body>
</div> </div>
<div class="row content"> <div class="row content">
<h1 class="sec01">Get Started</h1> <h1 class="sec01">Get Started</h1>
<p>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. </p> <p>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. </p>

78
js/slider.js Normal file
View File

@ -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');
});
}