Skip to content

Instantly share code, notes, and snippets.

@clemens-tolboom
Last active December 27, 2015 08:59
Embed
What would you like to do?
Just a dumb test for iFrame animation.
<!DOCTYPE html>
<html>
<head>
<title>'slideshow'</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
#stage {
position: relative;
overflow: hidden;
width: 800px;
height: 800px;
}
#stage div.slide {
display:inline;
position:absolute;
background-color: white;
}
</style>
<script>
d3.selection.prototype.moveToFront = function() {
return this.each(function() {
this.parentNode.appendChild(this);
});
};
d3.selection.prototype.moveToBack = function() {
return this.each(function() {
var firstChild = this.parentNode.firstChild;
if (firstChild) {
this.parentNode.insertBefore(this, firstChild);
}
});
};
</script>
<script>
(function($) {
$('document').ready(function() {
var data = [
{
uri: "https://drupal.org/node/1960824"
},
{
uri: "https://drupal.org/node/1762204"
},
{
uri: "http://d3js.org/"
}
];
var width = 800;
var width_20 = width / 5;
var width_80 = width * 4 / 5;
var height = 600;
var height_20 = height / 5;
var stage = d3.select('#stage')
;
var actors = stage
.selectAll('div.slide')
.data(data)
;
actors
.enter()
.append('div')
.classed('slide', true)
.append('iframe')
.attr('src', function(d) {
return d.uri;
})
.attr('width', '100%')
.attr('height', '100%')
;
var focus = 0;
var update = function() {
focus++;
focus = focus % data.length;
actors
.classed('focus', function(d, index) {
return index === focus;
})
.style('z-index', function(d, index) {
return ((index === focus) ? 100 : 0);
})
.transition()
.duration(1000)
.ease('linear')
.style('width', function(d, index) {
return ((index === focus) ? width_80 : width_20) + 'px';
})
.style('height', function(d, index) {
return ((index === focus) ? height : height_20) + 'px';
})
.style('top', function(d, index) {
return ((index === focus) ? 0 : index * height_20) + 'px';
})
.style('left', function(d, index) {
return ((index === focus) ? 0 : width_80) + 'px';
})
;
setTimeout(update, 2000);
}
update();
});
})(jQuery);
</script>
</head>
<body>
<div id="stage"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment