animated background
This commit is contained in:
@@ -338,109 +338,33 @@ footer h2 {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem; }
|
||||
|
||||
@keyframes animateCircle_pop_trans {
|
||||
0% {
|
||||
stroke: #000000;
|
||||
/* Initial stroke color */ }
|
||||
100% {
|
||||
stroke: #ff0000;
|
||||
/* Final stroke color */ } }
|
||||
/* Link the SVG file */
|
||||
body {
|
||||
/* background-image: url('../images/fond-ronds.svg'); */
|
||||
/* Add other background properties as needed */
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
/* Adjust as needed */
|
||||
background-size: cover;
|
||||
/* Adjust as needed */ }
|
||||
|
||||
@keyframes animateCircle_pop_trans-2 {
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
fill: #ffffff;
|
||||
/* Initial fill color */ }
|
||||
transform: scale(0); }
|
||||
100% {
|
||||
fill: #00ff00;
|
||||
/* Final fill color */ } }
|
||||
transform: scale(0.5); } }
|
||||
|
||||
@keyframes animateCircle_vert_clair_erable {
|
||||
0% {
|
||||
stroke: #000000;
|
||||
/* Initial stroke color */ }
|
||||
100% {
|
||||
stroke: #ff0000;
|
||||
/* Final stroke color */ } }
|
||||
@keyframes slidein {
|
||||
from {
|
||||
transform: translateX(20%); }
|
||||
to {
|
||||
transform: translateX(70%); } }
|
||||
|
||||
@keyframes animateCircle_vert_clair_erable-93 {
|
||||
0% {
|
||||
fill: #ffffff;
|
||||
/* Initial fill color */ }
|
||||
100% {
|
||||
fill: #00ff00;
|
||||
/* Final fill color */ } }
|
||||
|
||||
@keyframes animateCircle_vert_clair_erable-9 {
|
||||
0% {
|
||||
stroke: #000000;
|
||||
/* Initial stroke color */ }
|
||||
100% {
|
||||
stroke: #ff0000;
|
||||
/* Final stroke color */ } }
|
||||
|
||||
@keyframes animateCircle_vert_clair_erable-3 {
|
||||
0% {
|
||||
fill: #ffffff;
|
||||
/* Initial fill color */ }
|
||||
100% {
|
||||
fill: #00ff00;
|
||||
/* Final fill color */ } }
|
||||
|
||||
@keyframes animateCircle_vert_clair_erable-3-1 {
|
||||
0% {
|
||||
stroke: #000000;
|
||||
/* Initial stroke color */ }
|
||||
100% {
|
||||
stroke: #ff0000;
|
||||
/* Final stroke color */ } }
|
||||
|
||||
@keyframes animateCircle_vert_clair_erable-3-1-7 {
|
||||
0% {
|
||||
fill: #ffffff;
|
||||
/* Initial fill color */ }
|
||||
100% {
|
||||
fill: #00ff00;
|
||||
/* Final fill color */ } }
|
||||
|
||||
@keyframes animateCircle_vert_erable {
|
||||
0% {
|
||||
stroke: #000000;
|
||||
/* Initial stroke color */ }
|
||||
100% {
|
||||
stroke: #ff0000;
|
||||
/* Final stroke color */ } }
|
||||
|
||||
@keyframes animateCircle_vert_erable-4 {
|
||||
0% {
|
||||
fill: #ffffff;
|
||||
/* Initial fill color */ }
|
||||
100% {
|
||||
fill: #00ff00;
|
||||
/* Final fill color */ } }
|
||||
|
||||
@keyframes animateCircle_vert_erable-4-6 {
|
||||
0% {
|
||||
stroke: #000000;
|
||||
/* Initial stroke color */ }
|
||||
100% {
|
||||
stroke: #ff0000;
|
||||
/* Final stroke color */ } }
|
||||
|
||||
@keyframes animateCircle_vert_erable-4-3 {
|
||||
0% {
|
||||
fill: #ffffff;
|
||||
/* Initial fill color */ }
|
||||
100% {
|
||||
fill: #00ff00;
|
||||
/* Final fill color */ } }
|
||||
|
||||
@keyframes animateCircle_vert_erable-2 {
|
||||
0% {
|
||||
stroke: #000000;
|
||||
/* Initial stroke color */ }
|
||||
100% {
|
||||
stroke: #ff0000;
|
||||
/* Final stroke color */ } }
|
||||
@keyframes dropDown {
|
||||
from {
|
||||
transform: translateY(20%); }
|
||||
to {
|
||||
transform: translateY(70%); } }
|
||||
|
||||
@keyframes translateAnimation {
|
||||
0% {
|
||||
@@ -452,57 +376,72 @@ footer h2 {
|
||||
transform: translateX(500px);
|
||||
/* End translation */ } }
|
||||
|
||||
@keyframes animateCircle_orange-7 {
|
||||
@keyframes changeColor {
|
||||
0% {
|
||||
stroke: #000000;
|
||||
/* Initial stroke color */ }
|
||||
100% {
|
||||
stroke: #ff0000;
|
||||
/* Final stroke color */ } }
|
||||
|
||||
@keyframes animateCircle_orange-2 {
|
||||
0% {
|
||||
fill: #ffffff;
|
||||
fill: #b9ce00;
|
||||
/* Initial fill color */ }
|
||||
100% {
|
||||
fill: #00ff00;
|
||||
fill: #ff804d;
|
||||
/* Final fill color */ } }
|
||||
|
||||
@keyframes animateCircle_orange-9 {
|
||||
@keyframes changeColor2 {
|
||||
0% {
|
||||
stroke: #000000;
|
||||
/* Initial stroke color */ }
|
||||
100% {
|
||||
stroke: #ff0000;
|
||||
/* Final stroke color */ } }
|
||||
|
||||
@keyframes animateCircle_orange {
|
||||
0% {
|
||||
fill: #ffffff;
|
||||
fill: #038788;
|
||||
/* Initial fill color */ }
|
||||
100% {
|
||||
fill: #00ff00;
|
||||
fill: #349a84;
|
||||
/* Final fill color */ } }
|
||||
|
||||
@keyframes slidein {
|
||||
from {
|
||||
transform: translateX(0%); }
|
||||
to {
|
||||
transform: translateX(100%); } }
|
||||
/* Apply styles to the SVG paths
|
||||
#circle_pop_trans,
|
||||
#circle_pop_trans-2,
|
||||
/* Add other SVG IDs or classes here */
|
||||
#circle_orange {
|
||||
/* Add styles to your SVG paths */
|
||||
/* Example animation */
|
||||
/* animation: pulse 2s infinite alternate; */
|
||||
/* animation: dropDown 2s infinite alternate; */
|
||||
/* animation: pulse 2s infinite alternate; */ }
|
||||
|
||||
/* Add more keyframes for other paths as needed */
|
||||
#circle_pop_trans {
|
||||
animation-name: translateAnimation;
|
||||
animation-duration: 13s;
|
||||
animation-repeat: infinite;
|
||||
animation-delay: 1s;
|
||||
animation-fill-mode: none; }
|
||||
#cercle_vert_erable-4-3 {
|
||||
animation: changeColor2 2s forwards; }
|
||||
|
||||
/* Apply styles to the SVG paths */
|
||||
#circle_vert_clair_erable-3-1 {
|
||||
animation: changeColor 2s forwards;
|
||||
/* animation: slidein 2s infinite alternate; */ }
|
||||
|
||||
#circle_orange-7 {
|
||||
/* animation: changeColor 2s infinite alternate; */ }
|
||||
|
||||
#circle_orange-6 {
|
||||
animation: slidein 2s infinite alternate;
|
||||
/* Animate fill color */ }
|
||||
/* Main animation for the football */
|
||||
/* animation: football-motion 2s linear infinite; */ }
|
||||
|
||||
#circle_orange-6-bis {
|
||||
/* Trailing effect animation */
|
||||
/* animation: trace-motion 2s linear infinite; */ }
|
||||
|
||||
@keyframes football-motion {
|
||||
0% {
|
||||
transform: translateX(0) translateY(0); }
|
||||
100% {
|
||||
transform: translateX(100px); } }
|
||||
|
||||
@keyframes trace-motion {
|
||||
0% {
|
||||
opacity: 0.5;
|
||||
/* Adjust the opacity to control the visibility of the trace */
|
||||
/* Additional properties for the trailing effect */
|
||||
transform: translateX(0px) translateY(0);
|
||||
/* Adjust as needed */ }
|
||||
100% {
|
||||
opacity: 0.3;
|
||||
/* Make the trace disappear at the end */
|
||||
/* Additional properties for the trailing effect */
|
||||
transform: translateX(100px);
|
||||
/* Adjust as needed */ } }
|
||||
|
||||
/* Apply animations to other paths similarly */
|
||||
/*!
|
||||
* Hamburgers
|
||||
* @description Tasty CSS-animated hamburgers
|
||||
@@ -626,12 +565,19 @@ footer h2 {
|
||||
|
||||
body {
|
||||
position: relative; }
|
||||
body #content-ontop {
|
||||
z-index: 3000;
|
||||
position: relative;
|
||||
top: -1200px; }
|
||||
body #background-animated {
|
||||
z-index: 2000;
|
||||
position: relative;
|
||||
left: -350px; }
|
||||
body::before {
|
||||
z-index: -1;
|
||||
content: " ";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("../images/fond-ronds.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: content;
|
||||
display: block;
|
||||
@@ -1101,14 +1047,13 @@ header {
|
||||
width: min-content;
|
||||
margin-bottom: 0; }
|
||||
header .row #block-colloque2024-mainnavigation {
|
||||
width: max-content;
|
||||
display: none; }
|
||||
width: max-content; }
|
||||
header .row #block-colloque2024-mainnavigation .burger {
|
||||
padding-top: 0.25rem;
|
||||
z-index: 9999; }
|
||||
@media screen and (min-width: 1200px) {
|
||||
header .row #block-colloque2024-mainnavigation {
|
||||
display: block; }
|
||||
display: flex; }
|
||||
header .row #block-colloque2024-mainnavigation ul {
|
||||
margin-bottom: 0;
|
||||
flex-wrap: wrap; }
|
||||
@@ -1192,9 +1137,6 @@ header.front #block-colloque2024-branding {
|
||||
header.front #block-colloque2024-branding.is-active > div {
|
||||
max-height: 115px; }
|
||||
|
||||
header.front #block-colloque2024-renderedsitesettingsblock-2 {
|
||||
display: none; }
|
||||
|
||||
#block-colloque2024-submenu {
|
||||
margin: 1rem auto; }
|
||||
#block-colloque2024-submenu ul {
|
||||
|
||||
@@ -8,12 +8,19 @@
|
||||
|
||||
body {
|
||||
position: relative; }
|
||||
body #content-ontop {
|
||||
z-index: 3000;
|
||||
position: relative;
|
||||
top: -1200px; }
|
||||
body #background-animated {
|
||||
z-index: 2000;
|
||||
position: relative;
|
||||
left: -350px; }
|
||||
body::before {
|
||||
z-index: -1;
|
||||
content: " ";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("../images/fond-ronds.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: content;
|
||||
display: block;
|
||||
|
||||
@@ -88,9 +88,8 @@ header{
|
||||
z-index: 9999;
|
||||
}
|
||||
// .nav-main{
|
||||
display: none;
|
||||
@media screen and (min-width: 1200px) {
|
||||
display: block;
|
||||
display: flex;
|
||||
ul{
|
||||
margin-bottom: 0;
|
||||
flex-wrap: wrap;
|
||||
@@ -201,6 +200,6 @@ header.front{
|
||||
}
|
||||
}
|
||||
#block-colloque2024-renderedsitesettingsblock-2{
|
||||
display: none;
|
||||
// display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,123 +1,108 @@
|
||||
@keyframes animateCircle_pop_trans {
|
||||
0% {stroke: #000000; /* Initial stroke color */}
|
||||
100% {stroke: #ff0000; /* Final stroke color */}
|
||||
}
|
||||
|
||||
@keyframes animateCircle_pop_trans-2 {
|
||||
0% {fill: #ffffff; /* Initial fill color */}
|
||||
100% {fill: #00ff00; /* Final fill color */}
|
||||
}
|
||||
/* Link the SVG file */
|
||||
body {
|
||||
/* background-image: url('../images/fond-ronds.svg'); */
|
||||
/* Add other background properties as needed */
|
||||
width: 100%;
|
||||
height: 100vh; /* Adjust as needed */
|
||||
background-size: cover; /* Adjust as needed */
|
||||
}
|
||||
|
||||
@keyframes animateCircle_vert_clair_erable {
|
||||
0% {stroke: #000000; /* Initial stroke color */}
|
||||
100% {stroke: #ff0000; /* Final stroke color */}
|
||||
}
|
||||
|
||||
@keyframes animateCircle_vert_clair_erable-93 {
|
||||
0% {fill: #ffffff; /* Initial fill color */}
|
||||
100% {fill: #00ff00; /* Final fill color */}
|
||||
}
|
||||
|
||||
@keyframes animateCircle_vert_clair_erable-9 {
|
||||
0% {stroke: #000000; /* Initial stroke color */}
|
||||
100% {stroke: #ff0000; /* Final stroke color */}
|
||||
}
|
||||
|
||||
@keyframes animateCircle_vert_clair_erable-3 {
|
||||
0% {fill: #ffffff; /* Initial fill color */}
|
||||
100% {fill: #00ff00; /* Final fill color */}
|
||||
}
|
||||
|
||||
@keyframes animateCircle_vert_clair_erable-3-1 {
|
||||
0% {stroke: #000000; /* Initial stroke color */}
|
||||
100% {stroke: #ff0000; /* Final stroke color */}
|
||||
}
|
||||
|
||||
@keyframes animateCircle_vert_clair_erable-3-1-7 {
|
||||
0% {fill: #ffffff; /* Initial fill color */}
|
||||
100% {fill: #00ff00; /* Final fill color */}
|
||||
}
|
||||
@keyframes pulse {
|
||||
0% {transform: scale(0);}
|
||||
100% {transform: scale(.5);}
|
||||
}
|
||||
|
||||
@keyframes animateCircle_vert_erable {
|
||||
0% {stroke: #000000; /* Initial stroke color */}
|
||||
100% {stroke: #ff0000; /* Final stroke color */}
|
||||
}
|
||||
|
||||
@keyframes animateCircle_vert_erable-4 {
|
||||
0% {fill: #ffffff; /* Initial fill color */}
|
||||
100% {fill: #00ff00; /* Final fill color */}
|
||||
}
|
||||
|
||||
@keyframes animateCircle_vert_erable-4-6 {
|
||||
0% {stroke: #000000; /* Initial stroke color */}
|
||||
100% {stroke: #ff0000; /* Final stroke color */}
|
||||
}
|
||||
|
||||
@keyframes animateCircle_vert_erable-4-3 {
|
||||
0% {fill: #ffffff; /* Initial fill color */}
|
||||
100% {fill: #00ff00; /* Final fill color */}
|
||||
}
|
||||
|
||||
@keyframes animateCircle_vert_erable-2 {
|
||||
0% {stroke: #000000; /* Initial stroke color */}
|
||||
100% {stroke: #ff0000; /* Final stroke color */}
|
||||
}
|
||||
|
||||
@keyframes translateAnimation {
|
||||
0% {
|
||||
transform: translateX(0); /* Start translation */
|
||||
}
|
||||
50% {
|
||||
transform: translateX(200);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(500px); /* End translation */
|
||||
}
|
||||
}
|
||||
@keyframes slidein {
|
||||
from {transform: translateX(20%);}
|
||||
to {transform: translateX(70%);}
|
||||
}
|
||||
|
||||
@keyframes animateCircle_orange-7 {
|
||||
0% {stroke: #000000; /* Initial stroke color */}
|
||||
100% {stroke: #ff0000; /* Final stroke color */}
|
||||
}
|
||||
|
||||
@keyframes animateCircle_orange-2 {
|
||||
0% {fill: #ffffff; /* Initial fill color */}
|
||||
100% {fill: #00ff00; /* Final fill color */}
|
||||
}
|
||||
@keyframes dropDown {
|
||||
from {transform: translateY(20%);}
|
||||
to {transform: translateY(70%);}
|
||||
}
|
||||
|
||||
@keyframes animateCircle_orange-9 {
|
||||
0% {stroke: #000000; /* Initial stroke color */}
|
||||
100% {stroke: #ff0000; /* Final stroke color */}
|
||||
}
|
||||
|
||||
@keyframes animateCircle_orange {
|
||||
0% {fill: #ffffff; /* Initial fill color */}
|
||||
100% {fill: #00ff00; /* Final fill color */}
|
||||
}
|
||||
@keyframes translateAnimation {
|
||||
0% {transform: translateX(0); /* Start translation */}
|
||||
50% {transform: translateX(200);}
|
||||
100% {transform: translateX(500px); /* End translation */}
|
||||
}
|
||||
|
||||
@keyframes changeColor {
|
||||
0% {fill: #b9ce00; /* Initial fill color */}
|
||||
100% {fill: #ff804d; /* Final fill color */}
|
||||
}
|
||||
|
||||
@keyframes changeColor2 {
|
||||
0% {fill: #038788; /* Initial fill color */}
|
||||
100% {fill: #349a84; /* Final fill color */}
|
||||
}
|
||||
|
||||
@keyframes slidein {
|
||||
from {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
/* Apply styles to the SVG paths
|
||||
#circle_pop_trans,
|
||||
#circle_pop_trans-2,
|
||||
/* Add other SVG IDs or classes here */
|
||||
#circle_orange{
|
||||
/* Add styles to your SVG paths */
|
||||
/* Example animation */
|
||||
/* animation: pulse 2s infinite alternate; */
|
||||
/* animation: dropDown 2s infinite alternate; */
|
||||
/* animation: pulse 2s infinite alternate; */
|
||||
|
||||
|
||||
}
|
||||
|
||||
#cercle_vert_erable-4-3{
|
||||
animation: changeColor2 2s forwards;
|
||||
}
|
||||
|
||||
/* Apply styles to the SVG paths */
|
||||
#circle_vert_clair_erable-3-1
|
||||
{
|
||||
animation: changeColor 2s forwards;
|
||||
/* animation: slidein 2s infinite alternate; */
|
||||
|
||||
}
|
||||
|
||||
#circle_orange-7{
|
||||
/* animation: changeColor 2s infinite alternate; */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#circle_orange-6 {
|
||||
/* Main animation for the football */
|
||||
/* animation: football-motion 2s linear infinite; */
|
||||
}
|
||||
|
||||
#circle_orange-6-bis {
|
||||
/* Trailing effect animation */
|
||||
/* animation: trace-motion 2s linear infinite; */
|
||||
}
|
||||
|
||||
@keyframes football-motion {
|
||||
0% {
|
||||
transform: translateX(0) translateY(0);
|
||||
}
|
||||
|
||||
/* Add more keyframes for other paths as needed */
|
||||
|
||||
#circle_pop_trans {
|
||||
animation-name: translateAnimation;
|
||||
animation-duration:13s;
|
||||
animation-repeat:infinite;
|
||||
animation-delay: 1s;
|
||||
animation-fill-mode: none; }
|
||||
|
||||
#circle_orange-6 {
|
||||
animation: slidein 2s infinite alternate; /* Animate fill color */
|
||||
100% {
|
||||
transform: translateX(100px) ;
|
||||
}
|
||||
|
||||
/* Apply animations to other paths similarly */
|
||||
|
||||
}
|
||||
|
||||
@keyframes trace-motion {
|
||||
0% {
|
||||
opacity: 0.5; /* Adjust the opacity to control the visibility of the trace */
|
||||
/* Additional properties for the trailing effect */
|
||||
transform: translateX(0px) translateY(0); /* Adjust as needed */
|
||||
}
|
||||
100% {
|
||||
opacity: 0.3; /* Make the trace disappear at the end */
|
||||
/* Additional properties for the trailing effect */
|
||||
transform: translateX(100px) ; /* Adjust as needed */
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,13 +9,26 @@ main:not(.home) {
|
||||
|
||||
//
|
||||
body {
|
||||
#content-ontop{
|
||||
z-index: 3000;
|
||||
position: relative;
|
||||
top: -1200px;
|
||||
}
|
||||
|
||||
|
||||
#background-animated{
|
||||
z-index: 2000;
|
||||
position: relative;
|
||||
left: -350px;
|
||||
|
||||
}
|
||||
position: relative;
|
||||
&::before {
|
||||
z-index: -1;
|
||||
content: " ";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("../images/fond-ronds.svg");
|
||||
// background-image: url("../images/fond-ronds.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: content;
|
||||
display: block;
|
||||
@@ -23,6 +36,10 @@ body {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// &::after {
|
||||
// z-index: -1;
|
||||
// content: " ";
|
||||
@@ -63,3 +80,4 @@ article {
|
||||
h4 {
|
||||
// @include croix_or;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,129 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="1900"
|
||||
height="1500"
|
||||
viewBox="0 0 502.70834 396.875"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xml:space="preserve"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
sodipodi:docname="fond-rond.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="0.25575084"
|
||||
inkscape:cx="643.20414"
|
||||
inkscape:cy="-11.730167"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1016"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="36"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" /><defs
|
||||
id="defs1" /><g
|
||||
inkscape:label="Calque 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-51.525162,-32.699875)"><circle
|
||||
style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0315418;paint-order:fill markers stroke"
|
||||
id="circle_pop_trans"
|
||||
cx="92.695091"
|
||||
cy="69.974625"
|
||||
r="21.581236" /><circle
|
||||
style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0315418;paint-order:fill markers stroke"
|
||||
id="circle_pop_trans-2"
|
||||
cx="88.803978"
|
||||
cy="180.71878"
|
||||
r="21.581236" /><circle
|
||||
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
|
||||
id="circle_vert_clair_erable"
|
||||
cx="90.108749"
|
||||
cy="265.0322"
|
||||
r="23.131907" /><circle
|
||||
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
|
||||
id="circle_vert_clair_erable-93"
|
||||
cx="89.875549"
|
||||
cy="165.00394"
|
||||
r="23.131907" /><circle
|
||||
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
|
||||
id="circle_vert_clair_erable-9"
|
||||
cx="267.71634"
|
||||
cy="72.928932"
|
||||
r="23.131907" /><circle
|
||||
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
|
||||
id="circle_vert_clair_erable-3"
|
||||
cx="466.42831"
|
||||
cy="73.960678"
|
||||
r="23.131907" /><circle
|
||||
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
|
||||
id="circle_vert_clair_erable-3-1"
|
||||
cx="402.3569"
|
||||
cy="170.33492"
|
||||
r="23.131907" /><circle
|
||||
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
|
||||
id="circle_vert_clair_erable-3-1-7"
|
||||
cx="239.84669"
|
||||
cy="131.55588"
|
||||
r="23.131907" /><circle
|
||||
style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
|
||||
id="cercle_vert_erable"
|
||||
cx="352.88077"
|
||||
cy="74.67765"
|
||||
r="22.098125" /><circle
|
||||
style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
|
||||
id="cercle_vert_erable-4"
|
||||
cx="509.92899"
|
||||
cy="126.76264"
|
||||
r="22.098125" /><circle
|
||||
style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
|
||||
id="cercle_vert_erable-4-6"
|
||||
cx="303.03726"
|
||||
cy="220.98933"
|
||||
r="22.098125" /><circle
|
||||
style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
|
||||
id="cercle_vert_erable-4-3"
|
||||
cx="217.18208"
|
||||
cy="130.37013"
|
||||
r="22.098125" /><circle
|
||||
style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
|
||||
id="cercle_vert_erable-2"
|
||||
cx="169.43532"
|
||||
cy="89.477364"
|
||||
r="22.098125" /><circle
|
||||
style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke"
|
||||
id="circle_orange"
|
||||
cx="465.94473"
|
||||
cy="167.39673"
|
||||
r="22.098158" /><circle
|
||||
style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke"
|
||||
id="circle_orange-7"
|
||||
cx="375.21536"
|
||||
cy="170.19913"
|
||||
r="22.098158" /><circle
|
||||
style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke"
|
||||
id="circle_orange-2"
|
||||
cx="139.51772"
|
||||
cy="206.53943"
|
||||
r="22.098158" /><circle
|
||||
style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke"
|
||||
id="circle_orange-9"
|
||||
cx="271.93399"
|
||||
cy="219.95616"
|
||||
r="22.098158" /><circle
|
||||
style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0315419;paint-order:fill markers stroke"
|
||||
id="circle_orange-6"
|
||||
cx="169.97908"
|
||||
cy="70.481293"
|
||||
r="21.581268" /></g></svg>
|
||||
|
After Width: | Height: | Size: 5.2 KiB |
@@ -2,130 +2,143 @@
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="1900"
|
||||
height="1500"
|
||||
viewBox="0 0 502.70834 396.875"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xml:space="preserve"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
sodipodi:docname="fond-rond.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="0.25575084"
|
||||
inkscape:cx="643.20414"
|
||||
inkscape:cy="-11.730167"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1016"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="36"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" /><defs
|
||||
id="defs1" /><g
|
||||
inkscape:label="Calque 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-51.525162,-32.699875)"><circle
|
||||
style="fill:#349a84;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0315418;paint-order:fill markers stroke"
|
||||
id="circle_pop_trans"
|
||||
cx="91.660561"
|
||||
cy="84.505714"
|
||||
r="15" /><circle
|
||||
style="fill:#349a84;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0315418;paint-order:fill markers stroke"
|
||||
id="circle_pop_trans-2"
|
||||
cx="91.907585"
|
||||
cy="302.79398"
|
||||
r="15" /><circle
|
||||
style="fill:#b9ce00;fill-opacity:1;stroke:#b9ce00;stroke-width:0.0338082;paint-order:fill markers stroke"
|
||||
id="circle_vert_clair_erable"
|
||||
cx="135.62831"
|
||||
cy="280.55023"
|
||||
r="15" /><circle
|
||||
style="fill:#b9ce00;fill-opacity:1;stroke:#b9ce00;stroke-width:0.0338082;paint-order:fill markers stroke"
|
||||
id="circle_vert_clair_erable-93"
|
||||
cx="91.944618"
|
||||
cy="357.42755"
|
||||
r="15" /><circle
|
||||
style="fill:#b9ce00;fill-opacity:1;stroke:#b9ce00;stroke-width:0.0338082;paint-order:fill markers stroke"
|
||||
id="circle_vert_clair_erable-9"
|
||||
cx="268.75085"
|
||||
cy="89.481499"
|
||||
r="15" /><circle
|
||||
style="fill:#b9ce00;fill-opacity:1;stroke:#b9ce00;stroke-width:0.0338082;paint-order:fill markers stroke"
|
||||
id="circle_vert_clair_erable-3"
|
||||
cx="465.39377"
|
||||
cy="90.513245"
|
||||
r="15" /><circle
|
||||
style="fill:#b9ce00;fill-opacity:1;stroke:#b9ce00;stroke-width:0.0338082;paint-order:fill markers stroke"
|
||||
id="circle_vert_clair_erable-3-1"
|
||||
cx="396.14969"
|
||||
cy="194.12924"
|
||||
r="15" /><circle
|
||||
style="fill:#b9ce00;fill-opacity:1;stroke:#b9ce00;stroke-width:0.0338082;paint-order:fill markers stroke"
|
||||
id="circle_vert_clair_erable-3-1-7"
|
||||
cx="265.71008"
|
||||
cy="196.22624"
|
||||
r="15" /><circle
|
||||
style="fill:#038788;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
|
||||
id="circle_vert_erable"
|
||||
cx="343.56995"
|
||||
cy="91.230217"
|
||||
r="15" /><circle
|
||||
style="fill:#038788;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
|
||||
id="circle_vert_erable-4"
|
||||
cx="509.92899"
|
||||
cy="147.45335"
|
||||
r="15" /><circle
|
||||
style="fill:#038788;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
|
||||
id="circle_vert_erable-4-6"
|
||||
cx="311.31354"
|
||||
cy="276.85425"
|
||||
r="15" /><circle
|
||||
style="fill:#038788;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
|
||||
id="circle_vert_erable-4-3"
|
||||
cx="209.94034"
|
||||
cy="196.07504"
|
||||
r="15" /><circle
|
||||
style="fill:#038788;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
|
||||
id="circle_vert_erable-2"
|
||||
cx="173.57346"
|
||||
cy="113.27168"
|
||||
r="15" /><circle
|
||||
style="fill:#ff804d;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0322973;paint-order:fill markers stroke"
|
||||
id="circle_orange"
|
||||
cx="465.94473"
|
||||
cy="195.32918"
|
||||
r="15" /><circle
|
||||
style="fill:#ff804d;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0322973;paint-order:fill markers stroke"
|
||||
id="circle_orange-7"
|
||||
cx="345.21384"
|
||||
cy="197.09705"
|
||||
r="15" /><circle
|
||||
style="fill:#ff804d;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0322973;paint-order:fill markers stroke"
|
||||
id="circle_orange-2"
|
||||
cx="477.81082"
|
||||
cy="322.40741"
|
||||
r="15" /><circle
|
||||
style="fill:#ff804d;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0322973;paint-order:fill markers stroke"
|
||||
id="circle_orange-9"
|
||||
cx="267.79587"
|
||||
cy="276.85562"
|
||||
r="15" /><circle
|
||||
style="fill:#ff804d;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0315419;paint-order:fill markers stroke"
|
||||
id="circle_orange-6"
|
||||
cx="173.08269"
|
||||
cy="80.826645"
|
||||
r="15" /></g>
|
||||
|
||||
</svg>
|
||||
width="1900"
|
||||
height="1500"
|
||||
viewBox="0 0 502.70834 396.875"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xml:space="preserve"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
sodipodi:docname="fond-ronds.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="0.25575084"
|
||||
inkscape:cx="643.20414"
|
||||
inkscape:cy="-11.730167"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1016"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="36"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" /><defs
|
||||
id="defs1" /><g
|
||||
inkscape:label="Calque 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-51.525162,-32.699875)"><circle
|
||||
style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0315418;paint-order:fill markers stroke"
|
||||
id="circle_pop_trans"
|
||||
class="dropdown"
|
||||
cx="92.695091"
|
||||
cy="69.974625"
|
||||
r="15" /><circle
|
||||
style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0315418;paint-order:fill markers stroke"
|
||||
id="circle_pop_trans-2"
|
||||
class="moveup"
|
||||
|
||||
cx="88.803978"
|
||||
cy="180.71878"
|
||||
r="15" /><circle
|
||||
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
|
||||
id="circle_vert_clair_erable"
|
||||
class="moveup"
|
||||
|
||||
cx="90.108749"
|
||||
cy="265.0322"
|
||||
r="15" /><circle
|
||||
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
|
||||
id="circle_vert_clair_erable-93"
|
||||
class="dropdown"
|
||||
cx="89.875549"
|
||||
cy="165.00394"
|
||||
r="15" /><circle
|
||||
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
|
||||
id="circle_vert_clair_erable-9"
|
||||
cx="267.71634"
|
||||
cy="72.928932"
|
||||
r="15" /><circle
|
||||
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
|
||||
id="circle_vert_clair_erable-3"
|
||||
cx="466.42831"
|
||||
cy="73.960678"
|
||||
r="15" /><circle
|
||||
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
|
||||
id="circle_vert_clair_erable-3-1"
|
||||
class="moveup changecolor"
|
||||
cx="402.3569"
|
||||
cy="170.33492"
|
||||
r="15" /><circle
|
||||
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
|
||||
id="circle_vert_clair_erable-3-1-7"
|
||||
class="toleft"
|
||||
cx="239.84669"
|
||||
cy="131.55588"
|
||||
r="15" /><circle
|
||||
style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
|
||||
id="cercle_vert_erable"
|
||||
class="moveup"
|
||||
cx="352.88077"
|
||||
cy="74.67765"
|
||||
r="15" /><circle
|
||||
style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
|
||||
id="cercle_vert_erable-4"
|
||||
cx="509.92899"
|
||||
cy="126.76264"
|
||||
r="15" /><circle
|
||||
style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
|
||||
id="cercle_vert_erable-4-6"
|
||||
cx="303.03726"
|
||||
cy="220.98933"
|
||||
r="15" /><circle
|
||||
style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
|
||||
id="cercle_vert_erable-4-3"
|
||||
class="torightslow"
|
||||
cx="217.18208"
|
||||
cy="130.37013"
|
||||
r="15" /><circle
|
||||
style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
|
||||
id="cercle_vert_erable-2"
|
||||
class="toright"
|
||||
cx="169.43532"
|
||||
cy="89.477364"
|
||||
r="15" /><circle
|
||||
style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke"
|
||||
id="circle_orange"
|
||||
class="dropdown"
|
||||
cx="465.94473"
|
||||
cy="167.39673"
|
||||
r="15" /><circle
|
||||
style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke"
|
||||
id="circle_orange-7"
|
||||
cx="375.21536"
|
||||
cy="170.19913"
|
||||
r="15" /><circle
|
||||
style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke"
|
||||
id="circle_orange-2"
|
||||
cx="139.51772"
|
||||
cy="206.53943"
|
||||
r="15" /><circle
|
||||
style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke"
|
||||
id="circle_orange-9"
|
||||
class="moveup"
|
||||
|
||||
cx="271.93399"
|
||||
cy="219.95616"
|
||||
r="15" /><circle
|
||||
style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0315419;paint-order:fill markers stroke"
|
||||
id="circle_orange-6"
|
||||
class="toleft"
|
||||
cx="169.97908"
|
||||
cy="70.481293"
|
||||
r="15" /></g></svg>
|
||||
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.0 KiB |
@@ -1,14 +1,21 @@
|
||||
// Récupérer la forme SVG
|
||||
const circle = document.getElementById('circle_orange');
|
||||
console.log(circle);
|
||||
|
||||
// Fonction pour animer la forme
|
||||
function slideIn() {
|
||||
|
||||
// Récupérer la forme SVG
|
||||
|
||||
|
||||
let dropdowns = document.getElementsByClassName('dropdown');
|
||||
console.log(dropdowns);
|
||||
|
||||
// Parcourir tous les éléments sélectionnés
|
||||
Array.from(dropdowns).forEach(dropdown => {
|
||||
function slideDown() {
|
||||
let translateY = -50; // Position de départ (en bas)
|
||||
|
||||
function animate() {
|
||||
translateY += 1; // Déplacement d'un pixel vers le haut à chaque itération
|
||||
circle.setAttribute('transform', `translate(0, ${translateY})`); // Appliquer la transformation
|
||||
dropdown.style.transform = `translateY(${translateY}px)`; // Appliquer la transformation
|
||||
|
||||
// dropdown.setAttribute('transform', `translate(0, ${translateY})`); // Appliquer la transformation
|
||||
|
||||
if (translateY < 200) { // Limite la hauteur à laquelle la forme doit être animée
|
||||
requestAnimationFrame(animate); // Appel récursif de la fonction animate
|
||||
@@ -18,4 +25,132 @@ function slideIn() {
|
||||
animate(); // Lancer l'animation
|
||||
}
|
||||
|
||||
slideIn(); // Lancer l'animation lorsque la page est chargée
|
||||
slideDown(); // Lancer l'animation lorsque la page est chargée
|
||||
});
|
||||
|
||||
|
||||
let moveups = document.getElementsByClassName('moveup');
|
||||
console.log(moveups);
|
||||
|
||||
// Parcourir tous les éléments sélectionnés
|
||||
Array.from(moveups).forEach(moveup => {
|
||||
function slideUp() {
|
||||
let translateY = 0; // Position de départ (en bas)
|
||||
|
||||
function animate() {
|
||||
translateY -= 0.5; // Déplacement d'un pixel vers le haut à chaque itération
|
||||
moveup.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
|
||||
|
||||
if (translateY > -25) { // Limite la hauteur à laquelle la forme doit être animée
|
||||
requestAnimationFrame(animate); // Appel récursif de la fonction animate
|
||||
}
|
||||
}
|
||||
|
||||
animate(); // Lancer l'animation
|
||||
}
|
||||
|
||||
slideUp(); // Lancer l'animation lorsque la page est chargée
|
||||
});
|
||||
|
||||
let torights = document.getElementsByClassName('toright');
|
||||
console.log(torights);
|
||||
|
||||
// Parcourir tous les éléments sélectionnés
|
||||
Array.from(torights).forEach(toright => {
|
||||
function slideRight() {
|
||||
let translateX = 0; // Position de départ (en bas)
|
||||
|
||||
function animate() {
|
||||
translateX += 0.5; // Déplacement d'un pixel vers le haut à chaque itération
|
||||
toright.style.transform = `translateX(${translateX}%)`; // Appliquer la transformation
|
||||
|
||||
if (translateX > -25) { // Limite la hauteur à laquelle la forme doit être animée
|
||||
requestAnimationFrame(animate); // Appel récursif de la fonction animate
|
||||
}
|
||||
}
|
||||
|
||||
animate(); // Lancer l'animation
|
||||
}
|
||||
|
||||
slideRight(); // Lancer l'animation lorsque la page est chargée
|
||||
});
|
||||
|
||||
let torightslows = document.getElementsByClassName('torightslow');
|
||||
console.log(torightslows);
|
||||
|
||||
// Parcourir tous les éléments sélectionnés
|
||||
Array.from(torightslows).forEach(torightslow => {
|
||||
function slideRightSlow() {
|
||||
let translateX = 0; // Position de départ (en bas)
|
||||
let duration = 8000; // Durée de l'animation en millisecondes
|
||||
let startTime = null; // Temps de départ de l'animation
|
||||
|
||||
function animate(timestamp) {
|
||||
|
||||
if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
|
||||
let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
|
||||
progress = Math.min(progress, 0.8); // Limite la progression à 1 (pour éviter un dépassement)
|
||||
|
||||
// Utilise une fonction d'interpolation (ease-in-out) pour ajuster la progression
|
||||
progress = easeInOut(progress);
|
||||
|
||||
translateX = 60 * progress; // Déplacement d'un pixel vers le haut à chaque itération
|
||||
torightslow.style.transform = `translateX(${translateX}%)`; // Appliquer la transformation
|
||||
|
||||
if (progress < 0.8) {
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
}
|
||||
|
||||
function easeInOut(t) {
|
||||
return t < 0.5 ? 4 * t * t : -1 + (10 - 2 * t) * t;
|
||||
}
|
||||
|
||||
// Lance l'animation
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
slideRightSlow(); // Lancer l'animation lorsque la page est chargée
|
||||
});
|
||||
|
||||
let tolefts = document.getElementsByClassName('toleft');
|
||||
console.log(tolefts);
|
||||
|
||||
// Parcourir tous les éléments sélectionnés
|
||||
Array.from(tolefts).forEach(toleft => {
|
||||
function slideLeft() {
|
||||
let translateX = 0; // Position de départ (en bas)
|
||||
let duration = 4000; // Durée de l'animation en millisecondes
|
||||
let startTime = null; // Temps de départ de l'animation
|
||||
|
||||
function animate(timestamp) {
|
||||
if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
|
||||
let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
|
||||
progress = Math.min(progress, 0.5); // Limite la progression à 1 (pour éviter un dépassement)
|
||||
|
||||
// Utilise une fonction d'interpolation (ease-in-out) pour ajuster la progression
|
||||
progress = easeInOut(progress);
|
||||
|
||||
// Calcule la translation en fonction de la progression
|
||||
translateX = -20 * progress; // -20 est la distance maximale à laquelle vous voulez déplacer l'élément
|
||||
|
||||
// Applique la transformation à l'élément
|
||||
toleft.style.transform = `translateX(${translateX}%)`;
|
||||
|
||||
// Continue l'animation si la progression n'a pas atteint 1
|
||||
if (progress < 0.8) {
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
}
|
||||
|
||||
// Fonction d'interpolation (ease-in-out)
|
||||
function easeInOut(t) {
|
||||
return t < 0.5 ? 4 * t * t : -1 + (4 - 2 * t) * t;
|
||||
}
|
||||
|
||||
// Lance l'animation
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
slideLeft(); // Lancer l'animation lorsque la page est chargée
|
||||
});
|
||||
|
||||
@@ -42,6 +42,7 @@
|
||||
Keyboard navigation/accessibility link to main content section in
|
||||
page.html.twig.
|
||||
#}
|
||||
|
||||
<a href="#main-content" class="visually-hidden focusable">
|
||||
{{ 'Skip to main content'|t }}
|
||||
</a>
|
||||
|
||||
@@ -63,7 +63,155 @@
|
||||
<a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
|
||||
|
||||
<div class="layout-content">
|
||||
{{ page.content }}
|
||||
<div id="background-animated" >
|
||||
<svg width="1900" height="1500"
|
||||
viewBox="0 0 502.70834 396.875"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xml:space="preserve"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
sodipodi:docname="fond-ronds.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="0.25575084"
|
||||
inkscape:cx="643.20414"
|
||||
inkscape:cy="-11.730167"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1016"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="36"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" /><defs
|
||||
id="defs1" /><g
|
||||
inkscape:label="Calque 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-51.525162,-32.699875)"><circle
|
||||
style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0315418;paint-order:fill markers stroke"
|
||||
id="circle_pop_trans"
|
||||
class="dropdown"
|
||||
cx="92.695091"
|
||||
cy="69.974625"
|
||||
r="15" /><circle
|
||||
style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0315418;paint-order:fill markers stroke"
|
||||
id="circle_pop_trans-2"
|
||||
class="moveup"
|
||||
|
||||
cx="88.803978"
|
||||
cy="180.71878"
|
||||
r="15" /><circle
|
||||
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
|
||||
id="circle_vert_clair_erable"
|
||||
class="moveup"
|
||||
|
||||
cx="90.108749"
|
||||
cy="265.0322"
|
||||
r="15" /><circle
|
||||
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
|
||||
id="circle_vert_clair_erable-93"
|
||||
class="dropdown"
|
||||
cx="89.875549"
|
||||
cy="165.00394"
|
||||
r="15" /><circle
|
||||
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
|
||||
id="circle_vert_clair_erable-9"
|
||||
cx="267.71634"
|
||||
cy="72.928932"
|
||||
r="15" /><circle
|
||||
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
|
||||
id="circle_vert_clair_erable-3"
|
||||
cx="466.42831"
|
||||
cy="73.960678"
|
||||
r="15" /><circle
|
||||
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
|
||||
id="circle_vert_clair_erable-3-1"
|
||||
class="moveup"
|
||||
class="changecolor"
|
||||
|
||||
cx="402.3569"
|
||||
cy="170.33492"
|
||||
r="15" /><circle
|
||||
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0338082;paint-order:fill markers stroke"
|
||||
id="circle_vert_clair_erable-3-1-7"
|
||||
class="toleft"
|
||||
cx="239.84669"
|
||||
cy="131.55588"
|
||||
r="15" /><circle
|
||||
style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
|
||||
id="cercle_vert_erable"
|
||||
class="moveup"
|
||||
cx="352.88077"
|
||||
cy="74.67765"
|
||||
r="15" /><circle
|
||||
style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
|
||||
id="cercle_vert_erable-4"
|
||||
cx="509.92899"
|
||||
cy="126.76264"
|
||||
r="15" /><circle
|
||||
style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
|
||||
id="cercle_vert_erable-4-6"
|
||||
cx="303.03726"
|
||||
cy="220.98933"
|
||||
r="15" /><circle
|
||||
style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
|
||||
id="cercle_vert_erable-4-3"
|
||||
class="torightslow"
|
||||
cx="217.18208"
|
||||
cy="130.37013"
|
||||
r="15" /><circle
|
||||
style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
|
||||
id="cercle_vert_erable-2"
|
||||
class="toright"
|
||||
cx="169.43532"
|
||||
cy="89.477364"
|
||||
r="15" /><circle
|
||||
style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke"
|
||||
id="circle_orange"
|
||||
class="dropdown"
|
||||
cx="465.94473"
|
||||
cy="167.39673"
|
||||
r="15" /><circle
|
||||
style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke"
|
||||
id="circle_orange-7"
|
||||
cx="375.21536"
|
||||
cy="170.19913"
|
||||
r="15" /><circle
|
||||
style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke"
|
||||
id="circle_orange-2"
|
||||
cx="139.51772"
|
||||
cy="206.53943"
|
||||
r="15" /><circle
|
||||
style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0322973;paint-order:fill markers stroke"
|
||||
id="circle_orange-9"
|
||||
class="moveup"
|
||||
|
||||
cx="271.93399"
|
||||
cy="219.95616"
|
||||
r="15" /><circle
|
||||
style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0315419;paint-order:fill markers stroke"
|
||||
id="circle_orange-6"
|
||||
class="toleft"
|
||||
cx="169.97908"
|
||||
cy="70.481293"
|
||||
r="15" /></g>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="content-ontop">
|
||||
<div>
|
||||
{{ page.content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>{# /.layout-content #}
|
||||
|
||||
{% if page.sidebar_second %}
|
||||
|
||||
Reference in New Issue
Block a user