rushilwiz/brancher
1
0
Fork 0
mirror of https://github.com/Rushilwiz/brancher.git synced 2025-04-19 03:20:17 -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,8 +43,23 @@
</div>
</header>
<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 class="row content">
<h1 class="sec01">Get Started</h1>

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