Difference between revisions of "Team:Pasteur Paris/TrainingThomas"

Line 58: Line 58:
 
right: 0;
 
right: 0;
 
}
 
}
−
#SVGcontainer{
+
#SVGcontainer1{
 
position: fixed;
 
position: fixed;
 
margin-top: 80px;
 
margin-top: 80px;
Line 66: Line 66:
 
transition: right 3s;
 
transition: right 3s;
 
transition-delay: 1s;
 
transition-delay: 1s;
−
transition-timing-function: ease-in-out;
+
transition-timing-function: cubic-bezier(.74,0,.34,1);
 +
}
 +
#SVGcontainer2{
 +
position: fixed;
 +
margin-top: 80px;
 +
transition: transform 1s;
 +
width: 100%;
 +
right: 100%;
 +
transition: right 3s;
 +
transition-delay: 1s;
 +
transition-timing-function: cubic-bezier(.74,0,.34,1);
 
}
 
}
 
#Calque_1{
 
#Calque_1{
 +
background-color: red;
 +
}
 +
#Calque_2{
 
background-color: red;
 
background-color: red;
 
}
 
}
Line 83: Line 96:
  
  
−
<div id="SVGcontainer">
+
<div id="SVGcontainer1">
 
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 +
height="100%" viewBox="0 0 3840 1080" enable-background="new 0 0 3840 1080" xml:space="preserve">
 +
<circle stroke="#FFFFFF" stroke-miterlimit="10" cx="949.5" cy="539.596" r="49.359"/>
 +
<line fill="none" stroke="#000000" stroke-width="14" stroke-miterlimit="10" x1="949" y1="539" x2="1909" y2="539"/>
 +
<line fill="none" stroke="#000000" stroke-width="14" stroke-miterlimit="10" x1="1911" y1="539" x2="2463.494" y2="538.736"/>
 +
<circle fill="none" stroke="#000000" stroke-width="14" stroke-miterlimit="10" cx="2870.723" cy="538.736" r="407.23"/>
 +
<line fill="none" stroke="#000000" stroke-width="14" stroke-miterlimit="10" x1="3278" y1="539" x2="3840" y2="539"/>
 +
<line fill="none" stroke="#000000" stroke-width="14" stroke-miterlimit="10" x1="-1" y1="0" x2="-1" y2="1080"/>
 +
</svg>
 +
</div>
 +
<div id="SVGcontaine2r">
 +
<svg version="1.1" id="Calque_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 
height="100%" viewBox="0 0 3840 1080" enable-background="new 0 0 3840 1080" xml:space="preserve">
 
height="100%" viewBox="0 0 3840 1080" enable-background="new 0 0 3840 1080" xml:space="preserve">
 
<circle stroke="#FFFFFF" stroke-miterlimit="10" cx="949.5" cy="539.596" r="49.359"/>
 
<circle stroke="#FFFFFF" stroke-miterlimit="10" cx="949.5" cy="539.596" r="49.359"/>
Line 97: Line 121:
 
<script type="text/javascript">
 
<script type="text/javascript">
 
$(document).ready(function() {
 
$(document).ready(function() {
−
$('#SVGcontainer').css("right", "100%");
+
$('#SVGcontainer1').css("right", "100%");
 +
$('#SVGcontainer2').css("right", "0%");
 
});
 
});
 
</script>
 
</script>
 
 
 
</html>
 
</html>

Revision as of 15:42, 3 September 2018

""