PHOTOS PLUG IN 01

coller ce code dans : Popriétes de page > Code HTML personalisé > Html du bloc Head de la page

<style> body { background: url(https://VOTREPHOTO.jpg) no-repeat fixed; -webkit-background-size: cover; background-size: cover; background-position: center; } </style>

Coller ce code dans un élémént HTML

                                                      <div id="before-after-slider">
                                                        <div id="before-image">
                                                          <img src="wa_res/icons/ferrari_RED.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92" alt="before"/>
                                                        </div>
                                                      
                                                        <div id="after-image">
                                                          <img src="wa_res/icons/ferrari_BLEU.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92" alt="After"/>
                                                        </div>
                                                    
                                                        <div id="resizer"></div>
                                                     </div>

Coller ce code dans : Définir un code CSS associé à votre élémént HTML

                                                    img{
                                                      width:100%;
                                                      display:block;
                                                    }
                                                    
                                                    #before-after-slider {
                                                      width:100%;
                                                      position:relative;
                                                      overflow:hidden;
                                                    }
                                                    
                                                    #after-image {
                                                      display:block
                                                    }
                                                    
                                                    #before-image {
                                                      position:absolute;
                                                      height:100%;
                                                      width:50%;
                                                      top:0;
                                                      left:0;
                                                      overflow:hidden;
                                                      z-index:2;
                                                    }
                                                    
                                                    #resizer {
                                                      position:absolute;
                                                      display:flex;
                                                      align-items:center;
                                                      z-index:5;
                                                      top:0;
                                                      left:50%;
                                                      height:100%;
                                                      width:5px;
                                                      background:white;
                                                      /*Stop vertical scrolling on touch*/
                                                      -ms-touch-action: pan-y;
                                                        touch-action: pan-y;
                                                    }
                                                    
                                                    #resizer:after {
                                                      background: black;
                                                      font-family: "Ropa Sans";
                                                      content:'< >';
                                                      font-weight:900;
                                                      display:flex;
                                                      justify-content:center;
                                                      align-items:center;
                                                      color:white;
                                                      position:absolute;
                                                      margin: 0 0 0 -22px;
                                                      width:50px;
                                                      height:50px;
                                                      border-radius:50%;
                                                      border:10px solid white;
                                                    
                                                    }

Coller ce code dans : Popriétes de page > Code HTML personalisé > Code Html à la fin du bloc BODY

<script>
                                                    const slider = document.getElementById('before-after-slider');
                                                    const before = document.getElementById('before-image');
                                                    const beforeImage = before.getElementsByTagName('img')[0];
                                                    const resizer = document.getElementById('resizer');
                                                    
                                                    let active = false;
                                                    
                                                    //Sort overflow out for Overlay Image
                                                    document.addEventListener("DOMContentLoaded", function() {
                                                      let width = slider.offsetWidth;
                                                      console.log(width);
                                                      beforeImage.style.width = width + 'px';
                                                    });
                                                    
                                                    //Adjust width of image on resize 
                                                    window.addEventListener('resize', function() {
                                                      let width = slider.offsetWidth;
                                                      console.log(width);
                                                      beforeImage.style.width = width + 'px';
                                                    })
                                                    
                                                    resizer.addEventListener('mousedown',function(){
                                                      active = true;
                                                     resizer.classList.add('resize');
                                                    
                                                    });
                                                    
                                                    document.body.addEventListener('mouseup',function(){
                                                      active = false;
                                                     resizer.classList.remove('resize');
                                                    });
                                                    
                                                    document.body.addEventListener('mouseleave', function() {
                                                      active = false;
                                                      resizer.classList.remove('resize');
                                                    });
                                                    
                                                    document.body.addEventListener('mousemove',function(e){
                                                      if (!active) return;
                                                      let x = e.pageX;
                                                      x -= slider.getBoundingClientRect().left;
                                                      slideIt(x);
                                                      pauseEvent(e);
                                                    });
                                                    
                                                    resizer.addEventListener('touchstart',function(){
                                                      active = true;
                                                      resizer.classList.add('resize');
                                                    });
                                                    
                                                    document.body.addEventListener('touchend',function(){
                                                      active = false;
                                                      resizer.classList.remove('resize');
                                                    });
                                                    
                                                    document.body.addEventListener('touchcancel',function(){
                                                      active = false;
                                                      resizer.classList.remove('resize');
                                                    });
                                                    
                                                    //calculation for dragging on touch devices
                                                    document.body.addEventListener('touchmove',function(e){
                                                      if (!active) return;
                                                      let x;
                                                      
                                                      let i;
                                                      for (i=0; i < e.changedTouches.length; i++) {
                                                      x = e.changedTouches[i].pageX; 
                                                      }
                                                      
                                                      x -= slider.getBoundingClientRect().left;
                                                      slideIt(x);
                                                      pauseEvent(e);
                                                    });
                                                    
                                                    function slideIt(x){
                                                        let transform = Math.max(0,(Math.min(x,slider.offsetWidth)));
                                                        before.style.width = transform+"px";
                                                        resizer.style.left = transform-0+"px";
                                                    }
                                                    
                                                    //stop divs being selected.
                                                    function pauseEvent(e){
                                                        if(e.stopPropagation) e.stopPropagation();
                                                        if(e.preventDefault) e.preventDefault();
                                                        e.cancelBubble=true;
                                                        e.returnValue=false;
                                                        return false;
                                                    }
                                                    
                                                    
                                                    </script>
                                                    
                                                    
                                                    <script>
                                                    // Get the modal
                                                    var modal = document.getElementById('myModal');
                                                    // Get the image and insert it inside the modal - use its "alt" text as a caption
                                                    var img = document.getElementById('myImg');
                                                    var modalImg = document.getElementById("img01");
                                                    var captionText = document.getElementById("caption");
                                                    img.onclick = function(){
                                                        modal.style.display = "block";
                                                        modalImg.src = this.src;
                                                        modalImg.alt = this.alt;
                                                        captionText.innerHTML = this.alt;
                                                    }
                                                     
                                                    // When the user clicks on <span> (x), close the modal
                                                    modal.onclick = function() {
                                                        img01.className += " out";
                                                        setTimeout(function() {
                                                           modal.style.display = "none";
                                                           img01.className = "modal-content";
                                                         }, 400);
                                                        
                                                     }    
                                                        
                                                    </script>
                                                    
                                                     
                                                    
                                                    
                                                    <script>
                                                    var btncopy = document.querySelector('.js-copy');
                                                    if(btncopy) {
                                                        btncopy.addEventListener('click', docopy);
                                                    }
                                                    
                                                    function docopy() {
                                                        var range = document.createRange();
                                                        var target = this.dataset.target;
                                                        var fromElement = document.querySelector(target);
                                                        var selection = window.getSelection();
                                                    
                                                        range.selectNode(fromElement);
                                                        selection.removeAllRanges();
                                                        selection.addRange(range);
                                                    
                                                        try {
                                                            var result = document.execCommand('copy');
                                                            if (result) {
                                                                // La copie a réussi
                                                                alert('Copié !');
                                                            }
                                                        }
                                                        catch(err) {
                                                            // Une erreur est surevnue lors de la tentative de copie
                                                            alert(err);
                                                        }
                                                    
                                                        selection = window.getSelection();
                                                    
                                                        if (typeof selection.removeRange === 'function') {
                                                            selection.removeRange(range);
                                                        } else if (typeof selection.removeAllRanges === 'function') {
                                                            selection.removeAllRanges();
                                                        }
                                                    }
                                                    </script>
                                                    
                                                    
                                                    
                                                    <script>
                                                    var btncopy = document.querySelector('.js-copy2');
                                                    if(btncopy) {
                                                        btncopy.addEventListener('click', docopy);
                                                    }
                                                    
                                                    function docopy() {
                                                        var range = document.createRange();
                                                        var target = this.dataset.target;
                                                        var fromElement = document.querySelector(target);
                                                        var selection = window.getSelection();
                                                    
                                                        range.selectNode(fromElement);
                                                        selection.removeAllRanges();
                                                        selection.addRange(range);
                                                    
                                                        try {
                                                            var result = document.execCommand('copy');
                                                            if (result) {
                                                                // La copie a réussi
                                                                alert('Copié !');
                                                            }
                                                        }
                                                        catch(err) {
                                                            // Une erreur est surevnue lors de la tentative de copie
                                                            alert(err);
                                                        }
                                                    
                                                        selection = window.getSelection();
                                                    
                                                        if (typeof selection.removeRange === 'function') {
                                                            selection.removeRange(range);
                                                        } else if (typeof selection.removeAllRanges === 'function') {
                                                            selection.removeAllRanges();
                                                        }
                                                    }
                                                    </script>
                                                    
                                                    
                                                    
                                                    
                                                    <script>
                                                    var btncopy = document.querySelector('.js-copy3');
                                                    if(btncopy) {
                                                        btncopy.addEventListener('click', docopy);
                                                    }
                                                    
                                                    function docopy() {
                                                        var range = document.createRange();
                                                        var target = this.dataset.target;
                                                        var fromElement = document.querySelector(target);
                                                        var selection = window.getSelection();
                                                    
                                                        range.selectNode(fromElement);
                                                        selection.removeAllRanges();
                                                        selection.addRange(range);
                                                    
                                                        try {
                                                            var result = document.execCommand('copy');
                                                            if (result) {
                                                                // La copie a réussi
                                                                alert('Copié !');
                                                            }
                                                        }
                                                        catch(err) {
                                                            // Une erreur est surevnue lors de la tentative de copie
                                                            alert(err);
                                                        }
                                                    
                                                        selection = window.getSelection();
                                                    
                                                        if (typeof selection.removeRange === 'function') {
                                                            selection.removeRange(range);
                                                        } else if (typeof selection.removeAllRanges === 'function') {
                                                            selection.removeAllRanges();
                                                        }
                                                    }
                                                    </script>

Coller ce code dans un élémént HTML

<div class="contenedor"> 
                                                    			<div class="cube">
                                                    				<div class="card">
                                                                        <a href="#">
                                                    					<img src="wa_res/icons/ROSA.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92" title="Las Vegas" alt="Las Vegas" height="290px" width="290px" >
                                                    				  </a>
                                                                            </div>
                                                    				<div class="card">
                                                                        <a href="#">
                                                    					<img src="wa_res/icons/hong-kong-g08e7d105f_640.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92" title="Hong Kong" alt="Hong Kong" width="290px" height="290px">
                                                    				  </a>
                                                                            </div>
                                                    				<div class="card">
                                                                        <a href="#">
                                                    					<img src="wa_res/icons/business-g7a94522c6_640.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92" title="China" alt="China" width="290px" height="290px">
                                                    				  </a>
                                                                            </div>
                                                    				<div class="card">
                                                                        <a href="#">
                                                    					<img src="wa_res/icons/netherlands-g030585e5b_640.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92" title="HOLLAND" alt="Holland" width="290px" height="290px">
                                                    				  </a>
                                                                            </div>
                                                    				<div class="card">
                                                                        <a href="#">
                                                    					<img src="wa_res/icons/bridge-g3cea8f3d9_640.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92" title="Ponte" alt="Refugio" width="290px" height="290px">
                                                    				  </a>
                                                                            </div>
                                                    				<div class="card">
                                                                        <a href="#">
                                                    					<img src="wa_res/icons/hong-kong-gc27ca2ed7_640.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92" title="Macao" alt="Macao" width="290px" height="290px">
                                                                        </a>
                                                    				</div>
                                                                        
                                                    			</div>
                                                    		</div>

Coller ce code dans : Définir un code CSS associé à votre élémént HTML

                                                    .contenedor {
                                                      -webkit-perspective: 500px;
                                                      perspective: 500px;
                                                      perspective-origin: 50% 50%;
                                                    }
                                                    
                                                    .cube, .cube .card{
                                                      height: 290px;
                                                      width: 290px;
                                                    }
                                                    
                                                    
                                                    .cube {
                                                      -webkit-transform-style: preserve-3d;
                                                      transform-style: preserve-3d;
                                                    
                                                      -webkit-transform: rotateX(-30deg) rotateY(30deg);
                                                      transform: rotateX(-30deg) rotateY(-30deg);
                                                    
                                                      margin: 150px auto;
                                                    
                                                      -webkit-animation: giro 20s infinite linear;
                                                      animation: giro 20s infinite linear;
                                                    }
                                                    
                                                    .cube .card {
                                                      position: absolute;
                                                      border: 0px solid #ffff;
                                                      opacity: 0.95;
                                                      transition: 0.2s;
                                                    }
                                                    /* Pause animation on hover */
                                                    .cube:hover{
                                                        animation-play-state: paused;
                                                    }
                                                    .cube:hover .card{
                                                       opacity: 1;
                                                       transition: 0.2s;
                                                    }
                                                    
                                                    /*card frontal*/
                                                    .cube .card:nth-child(1) {
                                                      -webkit-transform: translateZ(150px);
                                                      transform: translateZ(150px);
                                                    }
                                                    /*card posterior*/
                                                    .cube .card:nth-child(2) {
                                                      -webkit-transform: rotateY(180deg) translateZ(150px);
                                                      transform: rotateY(180deg) translateZ(150px);
                                                    }
                                                    /*card izquierda*/
                                                    .cube .card:nth-child(3) {
                                                      -webkit-transform: rotateY(-90deg) translateZ(150px);
                                                      transform: rotateY(-90deg) translateZ(150px);
                                                    }
                                                    /*card derecha*/
                                                    .cube .card:nth-child(4) {
                                                      -webkit-transform: rotateY(90deg) translateZ(150px);
                                                      transform: rotateY(90deg) translateZ(150px);
                                                    }
                                                    /*card superior*/
                                                    .cube .card:nth-child(5) {
                                                      -webkit-transform: rotateX(90deg) translateZ(150px);
                                                      transform: rotateX(90deg) translateZ(150px);
                                                    }
                                                    /*card inferior*/
                                                    .cube .card:nth-child(6) {
                                                      -webkit-transform: rotateX(-90deg) translateZ(150px);
                                                      transform: rotateX(-90deg) translateZ(150px);
                                                    }
                                                    
                                                    @-webkit-keyframes giro {
                                                        0% { -webkit-transform: rotateX(-45deg) rotateY(0deg); }
                                                        50% { -webkit-transform: rotateX(45deg) rotateY(360deg); }
                                                        100% { -webkit-transform: rotateX(-45deg) rotateY(720deg); }
                                                    }
                                                    
                                                    @keyframes giro {
                                                        0% { transform: rotateX(-45deg) rotateY(0deg); }
                                                        50% { transform: rotateX(45deg) rotateY(360deg); }
                                                        100% { transform: rotateX(-45deg) rotateY(720deg); }
                                                    }
                                                    
                                                    @-webkit-keyframes giro360 {
                                                        0% { -webkit-transform: rotateX(  0deg) rotateY(  0deg); }
                                                      100% { -webkit-transform: rotateX(360deg) rotateY(360deg); }
                                                    }
                                                    
                                                    @keyframes giro360 {
                                                        0% { transform: rotateX(  0deg) rotateY(  0deg); }
                                                      100% { transform: rotateX(360deg) rotateY(360deg); }
                                                    }

Coller ce code dans un élémént HTML

<div class="slide">
                          <div style="background-image:url(wa_res/icons/food_001.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92)"></div>
                          <div style="background-image:url(wa_res/icons/food_002.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92)"></div>
                          <div style="background-image:url(wa_res/files/food_003.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92)"></div>
                          <div style="background-image:url(wa_res/icons/food_001.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92)"></div>
                          <div style="background-image:url(wa_res/icons/food_002.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92)"></div>
                          <div style="background-image:url(wa_res/files/food_003.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92)"></div>
                        </div>

Coller ce code dans : Définir un code CSS associé à votre élémént HTML

.slide {
                         
                          height: 350px;
                          overflow: hidden;
                          position: relative;
                          background-color: #000;
                        }
                        .slide > div {
                          width: 100%;
                          height: 100%;
                          background-size: cover;
                          background-position: center;
                          position: absolute;
                          animation: slide 25s infinite;
                          opacity: 0;
                        }
                        .slide > div:nth-child(2) {
                          animation-delay: 5s;
                        }
                        .slide > div:nth-child(3) {
                          animation-delay: 10s;
                        }
                        .slide > div:nth-child(4) {
                          animation-delay: 15s;
                        }
                        .slide > div:nth-child(5) {
                          animation-delay: 20s;
                        }
                        
                        @keyframes slide {
                          10% {
                            opacity: 1;
                          }
                          20% {
                            opacity: 1;
                          }
                          30% {
                            opacity: 0;
                          }
                          40% {
                            transform: scale(1.3);
                          }
                        }

Coller ce code dans un élémént HTML

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

<section class="slideshow2">
                                                       <div class="content2">
                                                          <div class="slider-content2">
                                                             <figure class="shadow"><a href="https://wa-fusion.fr/"><img src="wa_res/icons/ASLIDE_02.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92"></a></figure>
                                                    		  <figure class="shadow"><a href="https://wa-fusion.fr/"><img src="wa_res/icons/AASLIDE_03.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92"></a></figure>
                                                             <figure class="shadow"><a href="https://wa-fusion.fr/"><img src="wa_res/icons/AASLIDE_04.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92"></a></figure>
                                                             <figure class="shadow"><a href="https://wa-fusion.fr/"><img src="wa_res/icons/AASLIDE_05.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92"></a></figure>
                                                             <figure class="shadow"><a href="https://wa-fusion.fr/"><img src="wa_res/icons/AASLIDE_06.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92"></a></figure>
                                                             <figure class="shadow"><a href="https://wa-fusion.fr/"><img src="wa_res/icons/AASLIDE_07.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92"></a></figure>
                                                             <figure class="shadow"><a href="https://wa-fusion.fr/"><img src="wa_res/icons/AASLIDE_08.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92"></a></figure>
                                                             <figure class="shadow"><a href="https://wa-fusion.fr/"><img src="wa_res/icons/AASLIDE_09.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92"></a></figure>
                                                             <figure class="shadow"><a href="https://wa-fusion.fr/"><img src="wa_res/icons/AASLIDE_010.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92"></a></figure>
                                                             <figure class="shadow"><a href="https://wa-fusion.fr/"><img src="wa_res/icons/AASLIDE_01.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92"></a></figure>
                                                          </div>
                                                       </div>
                                                    </section>

Coller ce code dans : Définir un code CSS associé à votre élémént HTML

.slideshow2{
                                                      margin: 0 auto;
                                                      padding-top: 45px;
                                                      height: 450px;
                                                      perspective: 1500px;
                                                    }
                                                    .content2{
                                                      margin: auto;
                                                      width: 150px;
                                                      perspective: 1500px;
                                                      position:relative;
                                                      padding-top: 70px;
                                                      transform-style: preserve-3d;
                                                    }
                                                    .slider-content2{
                                                      width: 100%;
                                                      position:absolute;
                                                      float:right;
                                                      animation: rotate 15s infinite linear;
                                                      transform-style: preserve-3d;
                                                    }
                                                    .slider-content2:hover{
                                                      cursor: pointer;
                                                      animation-play-state: paused;
                                                    }
                                                    
                                                    .slider-content2 figure{
                                                      width:180px;
                                                      height:100px;
                                                      border:2px solid #555;
                                                      overflow:hidden;
                                                      position:absolute;
                                                    }
                                                    .slider-content2 figure:nth-child(1){
                                                      transform:rotateY(0deg) translateZ(300px);
                                                    }
                                                    
                                                    .slider-content2 figure:nth-child(2){
                                                      transform:rotateY(40deg) translateZ(300px);
                                                    }
                                                    .slider-content2 figure:nth-child(3){
                                                      transform:rotateY(80deg) translateZ(300px);
                                                    }
                                                    .slider-content2 figure:nth-child(4){
                                                      transform:rotateY(120deg) translateZ(300px);
                                                    }
                                                    .slider-content2 figure:nth-child(5){
                                                      transform:rotateY(160deg) translateZ(300px);
                                                    }
                                                    .slider-content2 figure:nth-child(6){
                                                      transform:rotateY(200deg) translateZ(300px);
                                                    }
                                                    .slider-content2 figure:nth-child(7){
                                                      transform:rotateY(240deg) translateZ(300px);
                                                    }
                                                    .slider-content2 figure:nth-child(8){
                                                      transform:rotateY(280deg) translateZ(300px);
                                                    }
                                                    .slider-content2 figure:nth-child(9){
                                                      transform:rotateY(320deg) translateZ(300px);
                                                    }
                                                    
                                                    .shadow{
                                                      position: absolute;
                                                      box-shadow: 0px 0px 0px #000;
                                                     
                                                    }
                                                    .slider-content2 img{
                                                      image-rendering: auto;
                                                      transition: all 300ms;
                                                      width: 100%;
                                                      height: 100%;
                                                    }
                                                    .slider-content2 img:hover{
                                                      transform: scale(1.2);
                                                      transition: all 300ms;
                                                     
                                                    }
                                                    
                                                    @keyframes rotate {
                                                      from{
                                                        transform: rotateY(0deg);
                                                      }
                                                      to{
                                                          transform: rotateY(360deg);
                                                      }
                                                    }

Coller ce code dans un élémént HTML

 <figure class="wave">
                                                    <img src="wa_res/icons/futur.webp?t=9bc47409_1b72_4b42_9c39_f66979e33b92" alt="Back"></img>
                                                    <figcaption>Back Futur</figcaption>
                                                  </figure>
                                                
                                                  <figure class="wave">
                                                    <img src="wa_res/icons/baby-driver-rory-hi-res.webp?t=9bc47409_1b72_4b42_9c39_f66979e33b92" alt="Baby"></img>
                                                    <figcaption>Baby Drive</figcaption>
                                                  </figure>
                                                
                                                  <figure class="wave">
                                                    <img src="wa_res/icons/batmn.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92" alt="Batman"></img>
                                                    <figcaption>Batman</figcaption>
                                                  </figure>
                                                
                                                  <figure class="wave">
                                                    <img src="wa_res/icons/AVATAR.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92"></img>
                                                    <figcaption>Avatar</figcaption>
                                                  </figure>

Coller ce code dans : Définir un code CSS associé à votre élémént HTML

                                                .wave {
                                                  float: left;
                                                  margin: 20px;
                                                  animation: wave  ease-in-out 0.5s infinite alternate;
                                                  transform-origin: center -36px;
                                                }
                                                
                                                .wave:hover {
                                                  animation-play-state: paused;
                                                  cursor: pointer;
                                                }
                                                
                                                .wave img {
                                                  border: 5px solid grey;
                                                  display: block;
                                                  width: 200px;
                                                  height: 250px;
                                                }
                                                
                                                .wave figcaption {
                                                  text-align: center;
                                                }
                                                
                                                .wave:after{
                                                  content: '';
                                                  position: absolute;
                                                  width: 20px; 
                                                  height: 20px;
                                                  border: 1.5px solid black;
                                                  top: -10px; 
                                                  left: 50%;
                                                  border-bottom: none;
                                                  border-right: none;
                                                  transform: rotate(35deg);
                                                }
                                                       
                                                .wave:before{
                                                  content: '';
                                                  position: absolute;
                                                  top: -23px;
                                                  left: 50%;
                                                  display: block;
                                                  height: 44px;
                                                  width: 47px;
                                                  background-image: url(https://cdn.hashnode.com/res/hashnode/image/upload/v1602040503586/FW6g79WBY.png);
                                                  background-size: 20px 20px;
                                                  background-repeat: no-repeat;
                                                  z-index: 16;
                                                }
                                                        
                                                @keyframes wave {
                                                  0% { transform: rotate(10deg); }
                                                  100% { transform: rotate(-10deg); }
                                                }

Coller ce code dans un élémént HTML

<logo-slider>
                                    <div>
                                    <img src="wa_res/icons/logo-01.png?t=9bc47409_1b72_4b42_9c39_f66979e33b92">
                                    <img src="wa_res/icons/logo-02.png?t=9bc47409_1b72_4b42_9c39_f66979e33b92">
                                    <img src="wa_res/icons/logo-03.png?t=9bc47409_1b72_4b42_9c39_f66979e33b92">
                                    <img src="wa_res/icons/logo-04.png?t=9bc47409_1b72_4b42_9c39_f66979e33b92">
                                    <img src="wa_res/icons/logo-05.png?t=9bc47409_1b72_4b42_9c39_f66979e33b92">
                                    <img src="wa_res/icons/logo-06.png?t=9bc47409_1b72_4b42_9c39_f66979e33b92">
                                    <img src="wa_res/icons/logo-07.png?t=9bc47409_1b72_4b42_9c39_f66979e33b92">
                                    <img src="wa_res/icons/logo-08.png?t=9bc47409_1b72_4b42_9c39_f66979e33b92">
                                    </div>
                                    <div>
                                    <img src="wa_res/icons/logo-01.png?t=9bc47409_1b72_4b42_9c39_f66979e33b92">
                                    <img src="wa_res/icons/logo-02.png?t=9bc47409_1b72_4b42_9c39_f66979e33b92">
                                    <img src="wa_res/icons/logo-03.png?t=9bc47409_1b72_4b42_9c39_f66979e33b92">
                                    <img src="wa_res/icons/logo-04.png?t=9bc47409_1b72_4b42_9c39_f66979e33b92">
                                    <img src="wa_res/icons/logo-05.png?t=9bc47409_1b72_4b42_9c39_f66979e33b92">
                                    <img src="wa_res/icons/logo-06.png?t=9bc47409_1b72_4b42_9c39_f66979e33b92">
                                    <img src="wa_res/icons/logo-07.png?t=9bc47409_1b72_4b42_9c39_f66979e33b92">
                                    <img src="wa_res/icons/logo-08.png?t=9bc47409_1b72_4b42_9c39_f66979e33b92">
                                    </div>
                                    </logo-slider>

Coller ce code dans : Définir un code CSS associé à votre élémént HTML

logo-slider {
                                    --image-size: 150px;
                                    border: 0px solid #575757;
                                    padding: 20px;
                                    width: 100%;
                                    overflow: hidden;
                                    max-width: 900px;
                                    margin: 0 auto;
                                    position: relative;
                                    display: flex;
                                    }
                                    logo-slider:hover div {
                                    animation-play-state: paused;
                                    }
                                    logo-slider div {
                                    display: flex;
                                    position: relative;
                                    animation: marquee 10s linear infinite;
                                    justify-content: space-around;
                                    }
                                    logo-slider img {
                                    display: block;
                                    min-width: var(--image-size);
                                    height: var(--image-size);
                                    margin: 0 1vw;
                                    }
                                    logo-slider:after {
                                    content: "";
                                    position: absolute;
                                    width: 100%;
                                    height: 100%;
                                    left: 0;
                                    top: 0;
                                    background: linear-gradient(to right, white, rgba(255, 255, 255, 0) 80px, rgba(255, 255, 255, 0) calc(100% - 80px), white);
                                    }
                                    @media (max-width: 900px) {
                                    logo-slider {
                                    --image-size: 50px;
                                    --image-size: min(max(50px, 10vw), 150px);
                                    }
                                    }
                                    @keyframes marquee {
                                    0% {
                                    transform: translateX(0%);
                                    }
                                    100% {
                                    transform: translateX(-100%);
                                    }
                                    }

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

<div class="slider">
                                                   <div class="item"><a href="https://www.wa-fusion.fr/fr/index.html"><img alt="logo" src="wa_res/icons/logo-01.png?t=9bc47409_1b72_4b42_9c39_f66979e33b92"></a></div>
                                                   <div class="item"><a href="https://www.wa-fusion.fr/fr/index.html"><img alt="logo" src="wa_res/icons/logo-02.png?t=9bc47409_1b72_4b42_9c39_f66979e33b92"></a></div>
                                                   <div class="item"><a href="https://www.wa-fusion.fr/fr/index.html"><img alt="logo" src="wa_res/icons/logo-03.png?t=9bc47409_1b72_4b42_9c39_f66979e33b92"></a></div>
                                                	<div class="item"><a href="https://www.wa-fusion.fr/fr/index.html"><img alt="logo" src="wa_res/icons/logo-04.png?t=9bc47409_1b72_4b42_9c39_f66979e33b92"></a></div>
                                                	<div class="item"><a href="https://www.wa-fusion.fr/fr/index.html"><img alt="logo" src="wa_res/icons/logo-05.png?t=9bc47409_1b72_4b42_9c39_f66979e33b92"></a></div>
                                                	<div class="item"><a href="https://www.wa-fusion.fr/fr/index.html"><img alt="logo" src="wa_res/icons/logo-06.png?t=9bc47409_1b72_4b42_9c39_f66979e33b92"></a></div>
                                                	<div class="item"><a href="https://www.wa-fusion.fr/fr/index.html"><img alt="logo" src="wa_res/icons/logo-07.png?t=9bc47409_1b72_4b42_9c39_f66979e33b92"></a></div>
                                                  </div>

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

                                                .slider {
                                                	display: flex;
                                                	width: 100%;
                                                	margin: 0 auto;
                                                	overflow: hidden;
                                                	padding: 2.5rem;
                                                }
                                                
                                                .item {
                                                	animation: animate 25s linear infinite;
                                                }
                                                .item img
                                                	{
                                                		min-width: 200px;
                                                		padding: 0 30px;
                                                	}
                                                
                                                .slider:hover .item {
                                                	animation-play-state: paused;
                                                }
                                                @keyframes animate {
                                                	0% {
                                                		transform: translate3d(0, 0, 0);
                                                	}
                                                	100% {
                                                		transform: translate3d(-1800px, 0, 0);
                                                	}
                                                }

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

<div class="marquee">
                                      <div class="marquee__group">
                                        <img src='wa_res/icons/AASLIDE_09.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92 alt=''>
                                        <img src='wa_res/icons/AASLIDE_08.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92' alt=''>
                                        <img src='wa_res/icons/AASLIDE_07.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92' alt=''>
                                        <img src='wa_res/icons/AASLIDE_010.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92' alt=''>
                                        <img src='wa_res/icons/AASLIDE_03.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92' alt=''>
                                      </div>
                                    
                                      <div aria-hidden="true" class="marquee__group">
                                        <img src='wa_res/icons/ASLIDE_02.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92' alt=''>
                                        <img src='wa_res/icons/AASLIDE_06.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92' alt=''>
                                        <img src='wa_res/icons/AASLIDE_05.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92' alt=''>
                                        <img src='wa_res/icons/AASLIDE_04.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92' alt=''>
                                        <img src='wa_res/icons/ASLIDE_02.jpg?t=9bc47409_1b72_4b42_9c39_f66979e33b92' alt=''>
                                      </div>
                                    </div>

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

body {
                                     --space: 1rem;
                                    }
                                    
                                    .marquee {
                                      --duration: 60s;
                                      --gap: var(--space);
                                    
                                      display: flex;
                                      overflow: hidden;
                                      user-select: none;
                                      gap: var(--gap);
                                      transform: skewY(-3deg);
                                    }
                                    
                                    .marquee__group {
                                      flex-shrink: 0;
                                      display: flex;
                                      align-items: center;
                                      justify-content: space-around;
                                      gap: var(--gap);
                                      min-width: 100%;
                                      animation: scroll var(--duration) linear infinite;
                                    }
                                    
                                    .marquee__group img {
                                      max-width: clamp(2rem, 2rem + 28vmin, 25rem);
                                      aspect-ratio: 1;
                                      object-fit: cover;
                                      border-radius: 1rem;
                                    }
                                    
                                    @media (prefers-reduced-motion: reduce) {
                                      .marquee__group {
                                        animation-play-state: paused;
                                      }
                                    }
                                    
                                    
                                    @keyframes scroll {
                                      0% {
                                        transform: translateX(0);
                                      }
                                    
                                      100% {
                                        transform: translateX(calc(-100% - var(--gap)));
                                      }
                                    }

Tutoriels vidéo

Plugins Photos Page 01

01 - Intégrer une image PLEIN ECRAN FIXE

Tutoriel vidéo

02 - Slider de comparaison avant après !

Tutoriel vidéo

03 - Slider Cube avec liens

04 - Slide Avec effet zoom

05 - Carrousel "Roulette"

06 - Posters "Move One"

07 - Carrousel Logos

08 - Carrousel Logos avec liens

09 - Carrousel Images "Diagonale"

Soutenez mon travail.