Skip to content

Instantly share code, notes, and snippets.

@raldred

raldred/index.html

Last active August 29, 2015 14:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save raldred/9d25e968a9f13c923d5e to your computer and use it in GitHub Desktop.
Save raldred/9d25e968a9f13c923d5e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.2/TweenMax.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.map {
position: relative;
transform-origin: top left;
}
h2 {
position: absolute;
z-index: 2;
font-size: 4em;
}
img {
position: absolute;
z-index: 1;
left: -15em;
top: -15em;
width: 30em;
}
</style>
</head>
<body>
<div class="map">
<h2>Title</h2>
<img src="http://i.imgur.com/OSTaqeW.jpg">
</div>
<script id="jsbin-javascript">
var zoomed = false;
$('.map').on('click',function(e) {
var scale = zoomed ? 1 : 2;
TweenMax.to(e.delegateTarget,1,{
scaleX: scale,
scaleY: scale,
force3D: true
});
zoomed = !zoomed;
});
</script>
</body>
</html>
Raw
jsbin.qehuna.css
.map {
position: relative;
transform-origin: top left;
}
h2 {
position: absolute;
z-index: 2;
font-size: 4em;
}
img {
position: absolute;
z-index: 1;
left: -15em;
top: -15em;
width: 30em;
}
Raw
jsbin.qehuna.js
var zoomed = false;
$('.map').on('click',function(e) {
var scale = zoomed ? 1 : 2;
TweenMax.to(e.delegateTarget,1,{
scaleX: scale,
scaleY: scale,
force3D: true
});
zoomed = !zoomed;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment