Skip to content

Instantly share code, notes, and snippets.

@rhysburnie
Created June 6, 2013 11:25
Show Gist options
  • Save rhysburnie/5720856 to your computer and use it in GitHub Desktop.
Save rhysburnie/5720856 to your computer and use it in GitHub Desktop.
A CodePen by [rb]. angle swipe tests - Working out best way to make a swipe mask for angled divided screen the other requirement is that it maintains a perfect scaled stretch of window size
<div id="container"></div>
<code id="note">NB: this is just testing out shit not a demo of something - cheers</code>
jQuery(function($){
var width = 400,
height = 300,
dividerOriginPoints = [
[300,0],
[100,300]
];
var $container = $('#container').width(width).height(height);
var $wrap = $('<div>').insertAfter($container).append($container).css({
width: '100%',
height: '100%',
overflow: 'hidden',
position: 'relative'
});
var draw = SVG('container');
draw.viewbox(0,0,width,height);
var moveAmount = 20;
var polyPointsA = [
[0 - moveAmount, 0],
dividerOriginPoints[0],
dividerOriginPoints[1],
[0 - moveAmount,height]
],
polyPointsB = [
dividerOriginPoints[0],
[width,0],
[width,height],
dividerOriginPoints[1]
];
var polyA = draw.polygon(polyPointsA).attr('fill','red');
var polyB = draw.polygon(polyPointsB).attr('fill','blue').attr('opacity',.5).move(100,0);
var imageA = draw.image('http://placekitten.com/'+width+'/'+height).size(width,height);
imageA.clipWith(polyA);
var ratio = height / width;
function setSize()
{
var wW = $(window).width(),
wH = $(window).height(),
tW = wW,
tH = wW * ratio;
$container.width(tW).height(tH);
}
setSize();
$(window).resize(setSize);
//polyA.animate().move(0,0);
});
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
background: green;
}
#note {
position: absolute;
top: 0;
left: 0;
width: 100px;
padding: 5px;
color: #fff;
background: rgba(0,0,0,.2);
}
@rhysburnie
Copy link
Author

This is just for personal record of simple unit tests to work out which way to go on a real project,
for what I needed this was enough to know I needed to go with Raphael

Tho SVG.js is pretty cool, be good to use for something cool

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment