kevin/Popsu-coloque
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fond

Browse Source
This commit is contained in:
ouidade
2024-04-16 21:32:42 +02:00
parent 82076eabb0
commit e16cdef3ba
17 changed files with 467 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/colloque2024/colloque2024.libraries.yml
+1
View File
@@ -14,5 +14,6 @@ global-scripts:
js/flickity.pkgd.min.js: {}
js/lightbox.js: {}
js/script.js: {}
js/animation_home.js: {}
dependencies:
- core/jquery
web/themes/custom/colloque2024/css-compiled/components/hero.css
+73
View File
@@ -0,0 +1,73 @@
body {
overflow-x: hidden; }
.home .__img-hero {
display: none;
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw; }
.__img-hero {
height: 300px;
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw; }
.__img-hero img {
width: 100%;
height: 100%;
object-fit: cover; }
.participant_full {
flex-direction: column;
margin-top: 2rem; }
@media screen and (min-width: 992px) {
.participant_full {
margin-top: 0rem; } }
.participant_full .hero figure {
width: 100%; }
.participant_full .hero figure .__img > div {
margin: auto;
width: 250px;
height: 250px; }
.participant_full .hero figure .__img img {
border-radius: 100%;
width: 100%;
height: 100%;
object-fit: cover; }
.participant_full .hero figure figcaption {
align-self: center;
text-align: center;
margin: 2rem 0; }
@media screen and (min-width: 768px) {
.__img-hero {
height: 500px;
width: auto;
position: relative;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto; } }
@media screen and (min-width: 768px) {
.participant_full .hero figure {
width: 100%; }
.participant_full .hero figure .__img {
margin-right: 2rem; }
.participant_full .hero figure .__img > div {
width: 300px;
height: 300px; }
.participant_full .hero figure .__img img {
border-radius: 100%;
width: 100%;
height: 100%;
object-fit: cover; }
.participant_full .hero figure figcaption {
align-self: center;
text-align: left; } }
web/themes/custom/colloque2024/css-compiled/index.css
+9 -14
View File
File diff suppressed because one or more lines are too long
web/themes/custom/colloque2024/css-compiled/pages/layout.css
+3 -11
View File
@@ -13,21 +13,13 @@ body {
content: " ";
width: 100%;
height: 100%;
background-image: url("../images/fond-ronds.svg");
background-repeat: no-repeat;
background-size: content;
display: block;
position: absolute;
top: 0;
left: 0; }
body::after {
z-index: -1;
content: " ";
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(255, 255, 255, 0.8), white, rgba(255, 255, 255, 0.8));
display: block;
position: absolute;
transform: translateY(-50%);
top: 50%;
left: 0; }
article.publications, article.interviews {
margin-top: 1rem; }
web/themes/custom/colloque2024/css/components/hero.scss
+1
View File
@@ -3,6 +3,7 @@ body{
}
.home{
.__img-hero{
display: none;
width: 100vw;
position: relative;
left: 50%;
web/themes/custom/colloque2024/css/configs/animation.scss
+107
View File
@@ -0,0 +1,107 @@
@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 */}
}
@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 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 animateCircle_orange-6 {
0% {
transform: translateX(0); /* Start translation */
}
100% {
transform: translateX(50px); /* End translation */
}
}
@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 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 */}
}
/* Add more keyframes for other paths as needed */
#circle_pop_trans {
animation: animatePath1 2s infinite alternate; /* Animate stroke color */
}
#circle_orange-6 {
animation: animateCircle_orange-6 2s infinite alternate; /* Animate fill color */
}
/* Apply animations to other paths similarly */
web/themes/custom/colloque2024/css/configs/global.scss
+1 -1
View File
@@ -2,7 +2,7 @@ body,html{
font-size: 16px;
font-family: 'Marianne', "sans-serif";
line-height: 1.2;
background: $fond;
// background: $fond;
.is-active{
overflow: hidden;
}
web/themes/custom/colloque2024/css/configs/var.scss
+1 -1
View File
@@ -4,7 +4,7 @@ $color2024: rgb(3,135,136);
$col_black: black;
$color_orange: rgb(255, 128, 77);
$lightgrey: #6f6d7dff;
$fond: white;
// $fond: url("../../images/test_animation.svg");
$underline:#d2d2ebff;
$gutter: 0.5rem;
web/themes/custom/colloque2024/css/index.scss
+1
View File
@@ -12,6 +12,7 @@
@import "configs/mixin.scss";
@import "configs/typography.scss";
@import "configs/global.scss";
@import "configs/animation.scss";
// Lib Js
@import "hamburgers/hamburgers.scss";
web/themes/custom/colloque2024/css/pages/front.scss
+5 -1
View File
@@ -119,7 +119,7 @@ header {
padding: 0.5rem 1rem;
font-size: 12px;
display: block;
font-family: "truenobold";
font-family: "Mariannebold";
color: $color2;
}
}
@@ -179,3 +179,7 @@ header {
}
}
}
#block-colloque2024-mainpagecontent{
background-color: transparent;
}
web/themes/custom/colloque2024/css/pages/layout.scss
+19 -19
View File
@@ -15,30 +15,30 @@ body {
content: " ";
width: 100%;
height: 100%;
// background-image: url("../images/croix_fond.svg");
// background-size: content;
background-image: url("../images/fond-ronds.svg");
background-repeat: no-repeat;
background-size: content;
display: block;
position: absolute;
top: 0;
left: 0;
}
&::after {
z-index: -1;
content: " ";
width: 100%;
height: 100%;
background: linear-gradient(
to top,
rgba(255, 255, 255, 0.8),
white,
rgba(255, 255, 255, 0.8)
);
display: block;
position: absolute;
transform: translateY(-50%);
top: 50%;
left: 0;
}
// &::after {
// z-index: -1;
// content: " ";
// width: 100%;
// height: 100%;
// background: linear-gradient(
// to top,
// white,
// rgba(255, 255, 255, 0.8)
// );
// display: block;
// position: absolute;
// transform: translateY(-100%);
// top: 100%;
// left: 0;
// }
}
article {
web/themes/custom/colloque2024/images/fond-ronds.svg
+129
View File
@@ -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:#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>
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

web/themes/custom/colloque2024/images/rond_orange.svg
+24
View File
@@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="26.429976mm"
height="26.429976mm"
viewBox="0 0 26.429976 26.429976"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<g
id="layer1"
transform="translate(-51.525162,-32.699875)">
<circle
style="fill:#ff804d;fill-opacity:1;stroke:#d24f4f;stroke-width:0.095;paint-order:fill markers stroke"
id="circle_orange"
cx="64.74015"
cy="45.914864"
r="65" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 635 B

web/themes/custom/colloque2024/images/rond_pop_transition.svg
+24
View File
@@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="26.429976mm"
height="26.429976mm"
viewBox="0 0 26.429976 26.429976"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<g
id="layer1"
transform="translate(-51.525162,-32.699875)">
<circle
style="fill:#349a84;fill-opacity:1;stroke:#d24f4f;stroke-width:0.095;paint-order:fill markers stroke"
id="circle_pop_trans"
cx="64.74015"
cy="45.914864"
r="65" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 638 B

web/themes/custom/colloque2024/images/rond_vertClair_erable.svg
+24
View File
@@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="26.429976mm"
height="26.429976mm"
viewBox="0 0 26.429976 26.429976"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<g
id="layer1"
transform="translate(-51.525162,-32.699875)">
<circle
style="fill:#b9ce00;fill-opacity:1;stroke:#b9ce00;stroke-width:0.095;paint-order:fill markers stroke"
id="circle_vert_clair_erable"
cx="64.74015"
cy="45.914864"
r="65" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 646 B

web/themes/custom/colloque2024/images/rond_vert_erable.svg
+24
View File
@@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="26.429976mm"
height="26.429976mm"
viewBox="0 0 26.429976 26.429976"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<g
id="layer1"
transform="translate(-51.525162,-32.699875)">
<circle
style="fill:#038788;fill-opacity:1;stroke:#d24f4f;stroke-width:0.095;paint-order:fill markers stroke"
id="cercle_vert_erable"
cx="64.74015"
cy="45.914864"
r="65" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 640 B

web/themes/custom/colloque2024/js/animation_home.js
+21
View File
@@ -0,0 +1,21 @@
// Récupérer la forme SVG
const circle = document.getElementById('circle_orange');
console.log(circle);
// Fonction pour animer la forme
function slideIn() {
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
if (translateY < 200) { // Limite la hauteur à laquelle la forme doit être animée
requestAnimationFrame(animate); // Appel récursif de la fonction animate
}
}
animate(); // Lancer l'animation
}
slideIn(); // Lancer l'animation lorsque la page est chargée