5077 sujets

Sémantique web et HTML

bonjour à tous, étant un méga gros noob, je viens ici à l'aide, j'ai tenté de créer comme j'ai pu un avant après avec un curseur, malheureusement cela ne fonctionne pas .... merci d'avance


<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="lt-ie10" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en">
  <!--<![endif]-->
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />
    <title>Simulation 3D</title>


    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

    <style>
      *{
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none;   /* Chrome/Safari/Opera */
        -khtml-user-select: none;    /* Konqueror */
        -moz-user-select: none;      /* Firefox */
        -ms-user-select: none;       /* Internet Explorer/Edge */
        user-select: none;           /* Non-prefixed version, currently
        not supported by any browser */

      }
      body, html{
        margin: 0 !important;
        width: 100%;
        height: 100%;
        max-height: 100%;
        max-width: 100%;
        overflow: hidden;
        background: #000;
      }
      .super-container{
        background: #000;
        position: relative;
        width: 100%;
        height: 100%;
        max-width: 2008px;
        margin: 0 auto;
        padding: 0;
      }
      .aspect-container{
        position: relative;
        display: block;
        height: 100%;
        margin: 0 auto;
      }
      .aspect-critical-content{
        position: absolute;
        top:0; right: 0; bottom: 0; left: 0;
      }
      .slider-wrapper:hover { cursor: none; }

      .comparison-slider {
        position: absolute;
        width: 4px;
        left: 0%;
        top: -10px;
        bottom: -15px;
        background: rgb(0, 0, 0);
        -webkit-box-shadow: 0 0 10px 1px rgba(0,0,0,0.4);
        -moz-box-shadow: 0 0 10px 1px rgba(0,0,0,0.4);
        box-shadow: 0 0 10px 1px rgba(0,0,0,0.4);
      }



      .before-wrapper {
        display: block;
        overflow: hidden;
        width: 100%;
        height: 100%;
        position: relative;
        background-position: center;
      }



      .after-wrapper {
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        -webkit-transform: translateX(100%);
        transform: translateX(100%);
      }

      .after-image {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
        background-position: center;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);

      }


      .handle {
        position:absolute; 
        left:100%;
        top:0;
        bottom:0;
        width:1px;
        margin-left:-1px;
        background: #A89331;
        cursor: ew-resize;
      }

      .handle::after {
        position: absolute;
        top: 50%;
        width: 44px;
        height: 44px;
        margin: -25px 0 0 -25px;
        content:'\2039   \203A';
        background: rgba(0, 0, 0, 0.42);
        color:#A89331;
        font-weight:bold;
        font-size:30px;
        text-align:center;
        line-height:40px;
        border: 3px solid #A89331;
        border-radius: 50%;
        transition:all 0.3s ease;
        text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
        box-shadow: 0 0 6px rgba(0, 0, 0, 0);
      }


      .avant, .apres{
        position: absolute;
        left:50%;
        top: 50%;
        margin-top: -15px;
        margin-left: -100px;
        z-index: 1000;
        font-family: "Proxima Nova", sans-serif;
        font-weight: bold;
        font-size: 15px;
        padding: 6px 6px 6px 6px;
        background: rgba(0, 0, 0, 0.76);
        border-radius: 5px;
        color: #A89331;
      }
      .apres{
        margin-left: 42px;
      }

    </style>

    <script>
      $.urlParam = function (name) {
        var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
        return results[1] || 0;
      }
    </script>
  </head>
  <body>
    <body>

      <div class="super-container">
        <div class="aspect-container">

          <div class="aspect-critical-content">

            <div class="before-wrapper" style="background: url(&quot;https://static.wixstatic.com/media/f6a88e_cba91740d41d4ca5bd542b303d6ebbf9~mv2_d_4160_3120_s_4_2.jpg/v1/fill/w_4160,h_3120/P_20190618_162626.jpg&quot;) center center / contain no-repeat;">
              <div class="after-wrapper" style="transform: translateX(402px); transition: none 0s ease 0s;">

                <div class="after-image" style="background: url(&quot;https://static.wixstatic.com/media/f6a88e_7f3fa548615a4e0cab374494401435e0~mv2_d_4160_3120_s_4_2.jpg/v1/fill/w_4160,h_3120/aa1%20(2).jpg&quot;) center center / contain no-repeat; transform: translateX(-402px); transition: none 0s ease 0s;"></div>
              </div>
            </div>
            <div class="comparison-slider handle" style="left: 402px; transition: none 0s ease 0s;">
              <div class="avant" style="">Avant</div><div class="apres" style="">Après</div>
            </div>

          </div>

        </div>
      </div>



      <script>

        bWrapper = $('.before-wrapper');
        var down = false;
        $(".comparison-slider").on("mousedown touchstart", function () {
          down = true;
          $('.avant, .apres').stop().fadeOut(100);

        });
        $(document).on("mouseup touchend", function () {
          down = false;
          $('.avant, .apres').stop().fadeIn(400);
        });

        $(document).on("touchmove", function (e) {
          e.preventDefault();
          var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
          if (down) {

            var offsets = bWrapper.offset();
            var fullWidth = bWrapper.width();
            var mouseX = touch.pageX - offsets.left;

            if (mouseX < 0) { mouseX = 0; }
            else if (mouseX > fullWidth) { mouseX = fullWidth }

            bWrapper.parent().find('.comparison-slider').css({
              left: mouseX,
              transition: 'none'
            });
            bWrapper.find('.after-wrapper').css({
              transform: 'translateX(' + (mouseX) + 'px)',
              transition: 'none'
            });
            bWrapper.find('.after-image').css({
              transform: 'translateX(' + (-1 * mouseX) + 'px)',
              transition: 'none'
            });

          }

        });

        $(document).on("mousemove", function (e) {

          if (down) {

            var offsets = bWrapper.offset();
            var fullWidth = bWrapper.width();
            var mouseX = e.pageX - offsets.left;



            if (mouseX < 0) { mouseX = 0; }
            else if (mouseX > fullWidth) { mouseX = fullWidth }


            bWrapper.parent().find('.comparison-slider').css({
              left: mouseX,
              transition: 'none'
            });
            bWrapper.find('.after-wrapper').css({
              transform: 'translateX(' + (mouseX) + 'px)',
              transition: 'none'
            });
            bWrapper.find('.after-image').css({
              transform: 'translateX(' + (-1 * mouseX) + 'px)',
              transition: 'none'
            });

          }

        });

        $(document).ready(function () {

          // alert($("#avant").attr("src"));
          $(".before-wrapper").css({
            "background": "url(" + $.urlParam('avant') + ") center no-repeat",
            "background-size": "contain"
          });
          // alert($("#avant").attr("src"));
          $(".after-image").css({
            "background": "url(" + $.urlParam('apres') + ") center no-repeat",
            "background-size": "contain"
          });

          $(this).find('.comparison-slider').css({
            left: '50%',
            transition: 'all 1.5s'
          });
          $(this).find('.after-wrapper').css({
            transform: 'translateX(50%)',
            transition: 'all 1.5s'
          });
          $(this).find('.after-image').css({
            transform: 'translateX(-50%)',
            transition: 'all 1.5s'
          });
        });

        $(window).resize(function () {
          $(document).find('.comparison-slider').css({
            left: '50%',
            transition: 'all 1.5s'
          });
          $(document).find('.after-wrapper').css({
            transform: 'translateX(50%)',
            transition: 'all 1.5s'
          });
          $(document).find('.after-image').css({
            transform: 'translateX(-50%)',
            transition: 'all 1.5s'
          });
        });

      </script>



    </body>

      </div>
    </div>



    <script>

      bWrapper = $('.before-wrapper');
      var down = false;
      $(".comparison-slider").on("mousedown touchstart", function () {
        down = true;
        $('.avant, .apres').stop().fadeOut(100);

      });
      $(document).on("mouseup touchend", function () {
        down = false;
        $('.avant, .apres').stop().fadeIn(400);
      });

      $(document).on("touchmove", function (e) {
        e.preventDefault();
        var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
        if (down) {

          var offsets = bWrapper.offset();
          var fullWidth = bWrapper.width();
          var mouseX = touch.pageX - offsets.left;

          if (mouseX < 0) { mouseX = 0; }
          else if (mouseX > fullWidth) { mouseX = fullWidth }

          bWrapper.parent().find('.comparison-slider').css({
            left: mouseX,
            transition: 'none'
          });
          bWrapper.find('.after-wrapper').css({
            transform: 'translateX(' + (mouseX) + 'px)',
            transition: 'none'
          });
          bWrapper.find('.after-image').css({
            transform: 'translateX(' + (-1 * mouseX) + 'px)',
            transition: 'none'
          });

        }

      });

      $(document).on("mousemove", function (e) {

        if (down) {

          var offsets = bWrapper.offset();
          var fullWidth = bWrapper.width();
          var mouseX = e.pageX - offsets.left;



          if (mouseX < 0) { mouseX = 0; }
          else if (mouseX > fullWidth) { mouseX = fullWidth }


          bWrapper.parent().find('.comparison-slider').css({
            left: mouseX,
            transition: 'none'
          });
          bWrapper.find('.after-wrapper').css({
            transform: 'translateX(' + (mouseX) + 'px)',
            transition: 'none'
          });
          bWrapper.find('.after-image').css({
            transform: 'translateX(' + (-1 * mouseX) + 'px)',
            transition: 'none'
          });

        }

      });

      $(document).ready(function () {

        // alert($("#avant").attr("src"));
        $(".before-wrapper").css({
          "background": "url(" + $.urlParam('avant') + ") center no-repeat",
          "background-size": "contain"
        });
        // alert($("#avant").attr("src"));
        $(".after-image").css({
          "background": "url(" + $.urlParam('apres') + ") center no-repeat",
          "background-size": "contain"
        });

        $(this).find('.comparison-slider').css({
          left: '50%',
          transition: 'all 1.5s'
        });
        $(this).find('.after-wrapper').css({
          transform: 'translateX(50%)',
          transition: 'all 1.5s'
        });
        $(this).find('.after-image').css({
          transform: 'translateX(-50%)',
          transition: 'all 1.5s'
        });
      });

      $(window).resize(function () {
        $(document).find('.comparison-slider').css({
          left: '50%',
          transition: 'all 1.5s'
        });
        $(document).find('.after-wrapper').css({
          transform: 'translateX(50%)',
          transition: 'all 1.5s'
        });
        $(document).find('.after-image').css({
          transform: 'translateX(-50%)',
          transition: 'all 1.5s'
        });
      });

    </script>

  </body>
</html>

Modifié par maelh (22 Nov 2019 - 14:31)
Tu as un problème de syntaxe ? tu mets:

<div class="before-wrapper" style="background: url(&quot;https://static.wixstatic.com/media/f6a88e_cba91740d41d4ca5bd542b303d6ebbf9~mv2_d_4160_3120_s_4_2.jpg/v1/fill/w_4160,h_3120/P_20190618_162626.jpg&quot;) center center / contain no-repeat;">

Au lieu de

<div class="before-wrapper" style="background: url('https://static.wixstatic.com/media/f6a88e_cba91740d41d4ca5bd542b303d6ebbf9~mv2_d_4160_3120_s_4_2.jpg/v1/fill/w_4160,h_3120/P_20190618_162626.jpg') center center / contain no-repeat;">