Created
June 6, 2013 11:25
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="container"></div> | |
<code id="note">NB: this is just testing out shit not a demo of something - cheers</code> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
}); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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