Skip to content

Instantly share code, notes, and snippets.

@gbishop

gbishop/index.html

Created July 3, 2017 11:37
Show Gist options
  • Save gbishop/d5b2e2b75d28f2f41db991742d3b0a2f to your computer and use it in GitHub Desktop.
Save gbishop/d5b2e2b75d28f2f41db991742d3b0a2f to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin css transition zoom book // source https://jsbin.com/bucuju
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="css transition zoom book">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
ul {
text-align: center;
}
li {
display: inline-block;
}
img {
width: 100%;
height: 100%
}
button {
padding: 0;
margin: 0;
width: 11em;
height: 11em;
}
body {
margin: 0;
}
</style>
</head>
<body>
<ul>
<li><button><img src="https://gb.cs.unc.edu/THSR/symbols/all.png" /></button></li>
<li><button><img src="https://gb.cs.unc.edu/THSR/symbols/all.png" /></button></li>
<li><button><img src="https://gb.cs.unc.edu/THSR/symbols/all.png" /></button></li>
<li><button><img src="https://gb.cs.unc.edu/THSR/symbols/all.png" /></button></li>
<li><button><img src="https://gb.cs.unc.edu/THSR/symbols/all.png" /></button></li>
<li><button><img src="https://gb.cs.unc.edu/THSR/symbols/all.png" /></button></li>
</ul>
<script id="jsbin-javascript">
$(function() {
$('button').on('click', function(e) {
console.log('e', e);
var t = e.currentTarget;
console.log('t', t);
var n = t.cloneNode(true);
var s1 = `position: absolute; left: ${t.offsetLeft}px; top: ${t.offsetTop}px;`;
n.style = s1;
console.log('s1', s1);
n.offsetTop = t.offsetTop;
n.offsetLeft = t.offsetLeft;
console.log('n', n);
$('body').append(n);
var s2 = 'transition: all 1s ease; position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(2); opacity: 1';
var s3 = 'transition: all 1s ease;' + s1 + 'opacity: 0;';
setTimeout(function() { n.style = s2;}, 100);
setTimeout(function() { n.style = s3;}, 5000);
})
})
</script>
<script id="jsbin-source-css" type="text/css">ul {
text-align: center;
}
li {
display: inline-block;
}
img {
width: 100%;
height: 100%
}
button {
padding: 0;
margin: 0;
width: 11em;
height: 11em;
}
body {
margin: 0;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">$(function() {
$('button').on('click', function(e) {
console.log('e', e);
var t = e.currentTarget;
console.log('t', t);
var n = t.cloneNode(true);
var s1 = `position: absolute; left: ${t.offsetLeft}px; top: ${t.offsetTop}px;`;
n.style = s1;
console.log('s1', s1);
n.offsetTop = t.offsetTop;
n.offsetLeft = t.offsetLeft;
console.log('n', n);
$('body').append(n);
var s2 = 'transition: all 1s ease; position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(2); opacity: 1';
var s3 = 'transition: all 1s ease;' + s1 + 'opacity: 0;';
setTimeout(function() { n.style = s2;}, 100);
setTimeout(function() { n.style = s3;}, 5000);
})
})</script></body>
</html>
Raw
jsbin.bucuju.css
ul {
text-align: center;
}
li {
display: inline-block;
}
img {
width: 100%;
height: 100%
}
button {
padding: 0;
margin: 0;
width: 11em;
height: 11em;
}
body {
margin: 0;
}
Raw
jsbin.bucuju.js
$(function() {
$('button').on('click', function(e) {
console.log('e', e);
var t = e.currentTarget;
console.log('t', t);
var n = t.cloneNode(true);
var s1 = `position: absolute; left: ${t.offsetLeft}px; top: ${t.offsetTop}px;`;
n.style = s1;
console.log('s1', s1);
n.offsetTop = t.offsetTop;
n.offsetLeft = t.offsetLeft;
console.log('n', n);
$('body').append(n);
var s2 = 'transition: all 1s ease; position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(2); opacity: 1';
var s3 = 'transition: all 1s ease;' + s1 + 'opacity: 0;';
setTimeout(function() { n.style = s2;}, 100);
setTimeout(function() { n.style = s3;}, 5000);
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment