Effectivement, NivoSlider, coinSLider et plein d'autres encore, mais aucun ne se rapproche de celui en exemple...
Mais, parce que je suis ultra persévérant :
Voici le javascript extrait :
// Intro animation developed by OK Focus
var introAnimation = true;
(function ($) {
$(document).ready(function(){
//console.log();
if(!$("html").hasClass("lt-ie9")){
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback, el ){
window.setTimeout(callback, 1000 / 16);
};
})();
var cellHeight = 68;
var cellWidths = [150, 130, 140, 135, 180, 210, 150];
var images = [];
var canvases = [];
/*var imageSrc = [
"detail_0588.jpg",
"Ef1_65.183.1_024.jpg",
"efb_14.40.675_v077_02.jpg",
"efb_2011.170ab_10483.jpg"
];*/
if(Drupal.settings.introAniArray != undefined){
var imageSrc = Drupal.settings.introAniArray.split("|");
} else {
var imageSrc = [
"test1.jpeg",
"test2.jpeg",
"test3.jpeg"
];
}
var startingBackground = 1;
var cells = [];
var header = document.getElementById("okIntro");
var table = document.getElementById("introTable");
var grid = document.getElementById("introGrid");
var _height = 2000;
var _width = 2570;
function makeGrid(){
var _top = 0
var j = 0;
while (_top < _height) {
var i = 0, _left = 0;
var tr = document.createElement("tr");
var gridTr = document.createElement("tr");
var row = [];
while (_left < _width) {
var gridTd = document.createElement("td");
gridTd.width = cellWidths[i % cellWidths.length];
gridTd.height = cellHeight;
gridTd.innerHTML = " ";
gridTr.appendChild(gridTd);
var td = document.createElement("td");
td.width = cellWidths[i % cellWidths.length];
td.height = cellHeight;
td.style.backgroundPosition = "-" + _left + "px " + (-1 * (_top - (cellHeight * 8))) + "px";
td.style.backgroundImage = backgroundImage(startingBackground); // + _left * _top % imageSrc.length] + ")"
// td.style.backgroundRepeat = "no-repeat";
td.style.opacity = 0;
tr.appendChild(td);
_left += cellWidths[ i % cellWidths.length ];
if (i < 9 && j > 2 && 1 + i - j < 0 && j - (7 - i) - 20 < 0) {
var cell = {
dx: rand(),
direction: 1, // Math.floor(Math.random() + 0.5) * 2 - 1,
opacity: Math.random() / 10,
hold: Math.floor( Math.abs( (7 - i) * (j) * 2 * (0.4 + Math.random()*0.6) ) ), // * 10,
//hold: 0,
td: td,
background: startingBackground
};
// cell.oldHold = cell.hold;
row.push( cell );
}
i++;
}
table.appendChild(tr);
grid.appendChild(gridTr);
// if (_top > cellHeight * 8 && _top < cellHeight * 20) {
if (row.length && _top < cellHeight * 22) {
cells.push(row);
}
j++;
_top += cellHeight;
}
table.width = _width;
table.height = _height;
table.style.width = _width + "px";
table.style.height = _height + "px";
grid.width = _width;
grid.height = _height;
grid.style.width = _width + "px";
grid.style.height = _height + "px";
}
var skip = false;
(function loop(){
skip = ! skip;
requestAnimFrame(loop, header);
if (skip) return;
if(introAnimation == true){for (var i = 0, _len = cells.length; i < _len; i++) {
for (var j = 0, _l = cells[i].length; j < _l; j++) {
var c = cells[i][j];
if (c.hold) {
c.hold--;
} else {
var dx = c.dx;
if (c.opacity > 0.2 && c.opacity < 0.9) dx *= 1.5;
cells[i][j].td.style.opacity = c.opacity = c.direction * dx + c.opacity;
if (c.direction > 0 && c.opacity > c.direction) {
c.direction = -c.direction;
c.hold = Math.floor( 50 + 10 * c.dx );
c.dx = 0.035;
}
else if (c.direction < 0 && c.opacity <= 0) {
c.direction = -c.direction;
c.hold = Math.floor( 60 + 10 * c.dx );
c.dx = 0.035;
c.td.style.backgroundImage = backgroundImage( ++c.background )
}
}
}}
}
})();
function backgroundImage(n) {
return "url("+imageSrc[ n % imageSrc.length ] + ")";
}
function randRange(m,n) {
return Math.random() * (n-m) + m;
}
function rand(){
return randRange( 0.020, 0.035 );
}
makeGrid(); } else {
$("#introBG").css({"background-image":"url(/sites/all/themes/met/art/intro-map.png)"});
}
})
})(jQuery);
Du coup, j'ai fait ça :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title></title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="css/animated-intro.css" media="screen, projection" />
<!--<script src="scripts/js/js_2lS3UL7eiKYxihSzNV6-tySlNGnAApULSwTAWAlPyBg.js"></script>-->
<script type="text/javascript" src="scripts/js/anim2.js"></script>
</head>
<body>
<div id="intro" style="height:800px;">
<div id="introBG" style="opacity:1;">
<div id="okIntro">
<table id="introTable"></table>
<table id="introGrid"></table>
</div>
</div>
</div>
</body>
</html>
et le CSS devant l'accompagner :
#okIntro {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
}
#met {
position: absolute;
top: 10%;
left: 10%;
width: 207px;
height: 242px;
z-index: 2;
}
#okIntro table {
z-index: 1;
position: absolute;
top: 2px;
left:70px;
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.8660254037844384, M12=-0.5000000000000004, M21=0.5000000000000004, M22=0.8660254037844384, SizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.8660254037844384, M12=-0.5000000000000004, M21=0.5000000000000004, M22=0.8660254037844384, SizingMethod='auto expand');
border-collapse:separate;
overflow: visible;
}
.no-csstransitions #okIntro table { left:-243px; top:-557px; } /* IE 9 Only */
#okIntro #introTable {
border-top: 1px solid transparent;
border-left: 1px solid transparent;
}
#okIntro #introGrid {
border-top: 1px solid #454545;
border-left: 1px solid #454545;
}
#okIntro #introGridBG{
width: 1600px;
height: 1000px;
background: url(/sites/all/themes/met/art/map_bg_trans.png);
position: absolute;
z-index:2;
background-position:-80px -200px;
background-repeat:no-repeat;
}
.lt-ie9 #okIntro #introGridBG { display:none; }
#okIntro #introTable td {
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
}
#okIntro #introGrid td {
border-right: 1px solid #454545;
border-bottom: 1px solid #454545;
[/i][/i][/i]
