99 lines
2.3 KiB
HTML
99 lines
2.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
|
||
|
|
<title>superject</title>
|
||
|
|
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||
|
|
<canvas id="canvas-image" width = "1000" height = "1000"></canvas>
|
||
|
|
<script src="scripts/granim.min.js"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var granimInstance = new Granim({
|
||
|
|
element: '#canvas-image',
|
||
|
|
name: 'anima',
|
||
|
|
direction: 'radial',
|
||
|
|
isPausedWhenNotInView: true,
|
||
|
|
elToSetClassOn: 'body',
|
||
|
|
opacity: [1, 1],
|
||
|
|
image : {
|
||
|
|
source: 'img/prehension.png',
|
||
|
|
blendingMode: 'hue',
|
||
|
|
stretchMode: ['stretch', 'stretch'],
|
||
|
|
position: ['center', 'center']
|
||
|
|
},
|
||
|
|
states : {
|
||
|
|
"default-state": {
|
||
|
|
gradients: [
|
||
|
|
['#834D9B', '#D04ED6'],
|
||
|
|
['#1CD8D2', '#93EDC7']
|
||
|
|
],
|
||
|
|
transitionSpeed: 23*1000
|
||
|
|
}}});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
var content = document.getElementById('card');
|
||
|
|
|
||
|
|
function moveDown () {
|
||
|
|
var top = parseInt(content.style.marginTop); // get the top margin
|
||
|
|
// we'll be using this to
|
||
|
|
// push the div down
|
||
|
|
|
||
|
|
if (!top) {
|
||
|
|
top = 0; // if the margin is undefined, default it to zero
|
||
|
|
}
|
||
|
|
|
||
|
|
top += 20; // add 20 pixels to the current margin
|
||
|
|
|
||
|
|
content.style.marginTop = top + 'px'; // push div down
|
||
|
|
|
||
|
|
if (top < 200) {
|
||
|
|
// If it's not yet 200 pixels then call this function
|
||
|
|
// again in another 100 milliseconds (100 ms gives us
|
||
|
|
// roughly 10 fps which should be good enough):
|
||
|
|
setTimeout(moveDown,100);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<style>
|
||
|
|
#canvas-image {
|
||
|
|
position: absolute;
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card {
|
||
|
|
/* Black shadow with 10px blur */
|
||
|
|
filter: drop-shadow(16px 16px 10px black);
|
||
|
|
position: "absolute";
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
#card1 { position: absolute; right: 10%; top: 50%; }
|
||
|
|
#card2 { position: absolute; right: 30%; top: 50%; }
|
||
|
|
#card3 { position: absolute; right: 40%; top: 50%; }
|
||
|
|
#card4 { position: absolute; right: 60%; top: 50%; }
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<canvas id="canvas-image"></canvas>
|
||
|
|
|
||
|
|
<div class="card" id="card1"><img src="img/c1.png" height="320"></div>
|
||
|
|
<div class="card" id="card3"><img src="img/c3.png" height="320"></div>
|
||
|
|
<div class="card" id="card4"><img src="img/c4.png" height="320"></div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|