bachir/drupal-quartiersdedemain
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

slick home diap

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2024-09-26 21:44:31 +02:00
parent 7614707240
commit a89b923cf8
7 changed files with 57 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/themes/custom/quartiers_de_demain/dist/assets/bundle.js vendored
View File

File diff suppressed because one or more lines are too long

8
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

@@ -1624,7 +1624,9 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
#home .config_pages--type--diaporama-home .diaporama .slick-list .cadre-img-zoom img {
width: 100%;
height: auto;
animation: zoomOut 2.5s ease-in infinite;
animation-duration: 4.5s;
animation-name: zoomOut;
animation-iteration-count: infinite;
}
#home .config_pages--type--diaporama-home .diaporama .slick-list blockquote {
position: relative;
@@ -1637,10 +1639,10 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
}
@keyframes zoomOut {
0% {
transform: scale(1);
transform: scale(1.1);
}
100% {
transform: scale(1.05);
transform: scale(1.3);
}
}
#home .content_container #block-quartiers-de-demain-titredepage {

30
web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees.svg vendored
View File

@@ -4,9 +4,9 @@
<svg
version="1.1"
id="svg1"
width="1440.5675"
height="6585.9683"
viewBox="0 0 1440.5675 6585.9684"
width="1399.6859"
height="3961.061"
viewBox="0 0 1399.6859 3961.0611"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
@@ -46,51 +46,47 @@
</defs>
<g
id="g3"
transform="translate(-509.36305,-2445.5661)">
transform="translate(-509.36305,-2803.6546)">
<g
id="g2">
<g
id="g1"
transform="translate(0.17944336,-2.9196463)">
<path
id="path148"
d="m 1544.4558,8077.9597 194.3574,-163.0856"
style="fill:none;stroke:#0833c2;stroke-width:64.3111;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path151"
d="m 1818.0282,2628.0978 v 160.571"
style="fill:none;stroke:#0833c2;stroke-width:78.092;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path254"
d="M 0,0 C 0,205.098 -166.265,371.361 -371.362,371.361"
style="fill:none;stroke:#000000;stroke-width:137.482;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(0.91872984,0,0,-0.91872984,1649.0098,9034.4538)"
transform="matrix(0.48783546,0,0,-0.48783546,1583.811,6767.6351)"
clip-path="url(#clipPath255)" />
<path
id="path256"
d="m 533.81621,3347.9845 163.08557,194.3583"
style="fill:none;stroke:#0833c2;stroke-width:64.3111;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path256-3"
d="m 1652.1683,5878.9184 -163.0856,194.3583"
style="fill:none;stroke:#0833c2;stroke-width:64.3111;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path257"
d="M 0,0 C -205.098,0 -371.361,-166.265 -371.361,-371.362"
style="fill:none;stroke:#f7002b;stroke-width:137.482;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(0.91872984,0,0,-0.91872984,1388.9577,2511.6402)"
transform="matrix(-0.47297787,0,0,-0.47297787,1700.711,2839.0872)"
clip-path="url(#clipPath258)" />
<path
id="path300"
d="M 0,0 C 0,-126.805 102.795,-229.6 229.6,-229.6"
style="fill:none;stroke:#f7002b;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(0.91872984,0,0,-0.91872984,1738.8107,4755.9014)"
transform="matrix(0.72647042,0,0,-0.72647042,1636.7965,4238.0583)"
clip-path="url(#clipPath301)" />
<path
id="path302"
d="M 0,0 C 0,126.805 -102.795,229.6 -229.6,229.6"
style="fill:none;stroke:#0833c2;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(0.91872984,0,0,-0.91872984,1874.1866,6246.5711)"
transform="matrix(0.82260013,0,0,-0.82260013,1865.1937,5133.4927)"
clip-path="url(#clipPath303)" />
<path
id="path311"
d="M 552.65311,6047.771 V 5787.7705"
d="M 552.65311,4967.771 V 4707.7705"
style="fill:none;stroke:#000000;stroke-width:78.092;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
</g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

2
web/themes/custom/quartiers_de_demain/src/assets/js/animated_formes.js
View File

@@ -3,7 +3,7 @@ document.addEventListener('scroll', function() {
const background = document.getElementById('background-animated');
if (background) {
// Adjust this value to control the speed of the parallax effect
const parallaxSpeed = 0.2;
const parallaxSpeed = 0.5;
background.style.transform = 'translateY(' + (scrolled * parallaxSpeed) + 'px)';
}
});

54
web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js
View File

@@ -561,32 +561,36 @@
////////////////////// end diaporama home swiper /////////////////////////////////
$(document).ready(function(){
$(document).ready(function () {
let diapohome = $('.config_pages--type--diaporama-home .diaporama');
if (diapohome) {
diapohome.slick({
slidesToShow: 1,
dots: false,
arrows: false,
centerMode: false, // Désactivé pour éviter les sauts
adaptiveHeight: false, // Désactivé pour éviter les changements de hauteur
autoplay: true,
autoplaySpeed: 2000,
infinite: true,
responsive: [
{
breakpoint: 810,
settings: {
slidesToShow: 1,
adaptiveHeight: false,
arrows: true,
draggable: true,
centerMode: true, // Désactivé seulement pour les petits écrans
}
}]
});
console.log('Diaporama initialisé');
}
if (diapohome.length) {
// Initialisation de Slick
diapohome.slick({
slidesToShow: 1,
dots: false,
arrows: false,
centerMode: true,
adaptiveHeight: true,
autoplay: true, // Activer l'autoplay
autoplaySpeed: 4000, // Changement de slide toutes les 4 secondes
infinite: true,
pauseOnHover: false, // Ne pas arrêter l'autoplay lors du survol
pauseOnFocus: false,
responsive: [
{
breakpoint: 810,
settings: {
slidesToShow: 1,
adaptiveHeight: false,
arrows: false,
draggable: true,
centerMode: false,
}
}]
});
}
});

10
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss
View File

@@ -13,7 +13,11 @@
img{
width: 100%;
height: auto;
animation: zoomOut 2.5s ease-in infinite;
// animation: zoomOut infinite 4.3s ease-in-out;
animation-duration: 4.5s;
animation-name: zoomOut;
animation-iteration-count: infinite;
}
}
blockquote{
@@ -28,10 +32,10 @@
@keyframes zoomOut {
0% {
transform: scale(1);
transform: scale(1.1);
}
100% {
transform: scale(1.05);
transform: scale(1.3);
}
}

1
web/themes/custom/quartiers_de_demain/templates/config-pages--diaporama-home.html.twig
View File

@@ -18,5 +18,4 @@ set classes = [
%}
<div{{ attributes.addClass(classes) }}>
{{ content }}
{# {% include active_theme_path() ~ '/dist/assets/img/formes-animees-1.svg' %} #}
</div>