How to create a horizontal menu scroll style Video Game?

0

I'm trying to create a menu with the following features:

  • Horizontal with scroll
  • Working through touch / scroll of mobile devices.
  • Leave the middle of the div selected with a JavaScript / Jquery event (or a div within a linked container)
  • Div image of the middle highlighted (major) Similar to the video game menus, where the options go to the side horizontally. Only with scrolling mobile devices.

I try to think of some javascript effect, Jquery, example code on the internet, but I can not get anything conclusive. I tried something using Swipe from Jquery Mobile, CSS with overflow-x: scroll, but I can not think of any event to select the middle menu option, or leave the middle div with larger image (using the touch of the device of course not the mouse).

Here is my code with my attempts:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script><scriptsrc="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
  <script src="frameJS/deslizante.js"></script>
  <style type="text/css">
    body {
      overflow-x: scroll;
    }
    .produtos {
      position: fixed;
      top: 20px;
      z-index: 1;
    }
    .scroll {
      opacity: 0.3;
      z-index: 2;
      position: fixed;
    }
    #mover {
      position: fixed;
      bottom: 30px;
    }
    #elementoEsquerda {
      left: 10px;
    }
    #elementoCentral {
      margin-left: 50%;
    }
    #elementoDireita {
      right: 10px;
    }
    #caixaDeslizante {
      height: 300px;
      width: 450px;
      overflow-x: auto;
      white-space: nowrap;
    }
    .container {
      width: 100%;
      border-color: blue;
      text-align: center;
      left: -50%;
    }
    .botaoComprar {
      position: relative;
      width: 100px;
      height: 20px;
      top: 180px;
      background-color: blue;
      border-style: solid;
      border-color: green;
    }
    .produto {
      display: inline-block;
      width: 100px;
      height: 200px;
      margin: 10px 20px;
      border-style: solid;
      border-color: green;
    }
    #produto-1 {
      background-color: rgba(255, 0, 0, 0);
    }
    #produto-2 {
      background-color: green;
    }
    #produto-3 {
      background-color: pink;
    }
    #produto-4 {
      background-color: #ccc;
    }
    #produto-5 {
      background-color: #000;
    }
    #produto-6 {
      background-color: pink;
    }
    #produto-7 {
      background-color: pink;
    }
    #produto-8 {
      background-color: pink;
    }
    #produto-9 {
      background-color: pink;
    }
    #produto-10 {
      background-color: pink;
    }
  </style>
  <script type="text/javascript">
    $.mobile.changePage("hinoNac");

    function mudaLink() {
      document.location.href = "homeFrame.html";
    }
  </script>
</head>

<body>
  <div data-role="page" id="pageone" style="background-color: #ffffff;">
    <div data-role="main" class="ui-content" id="deslizante" style="background-color: #ffffff;">
      <div id="alvo">
        <div id="objeto" style="position: fixed; top: 0px; left: 10px;">Objeto</div>
      </div>
      <div id="caixaDeslizante">
        <div id="deslizante" class="container">
          <canvas style="background-color: #ccc; width: 100%; height: 90px;" id="deslizante" class="scroll"></canvas>
          <div id="produto-1" class="produto">1
            <div class="botaoComprar"></div>
          </div>
          <div id="produto-2" class="produto">2
            <div class="botaoComprar"></div>
          </div>
          <div id="produto-3" class="produto">3
            <div class="botaoComprar"></div>
          </div>
          <div id="produto-4" class="produto">4
            <div class="botaoComprar"></div>
          </div>
          <div id="produto-5" class="produto">5
            <div class="botaoComprar"></div>
          </div>
          <div id="produto-6" class="produto">6
            <div class="botaoComprar"></div>
          </div>
          <div id="produto-7" class="produto">7
            <div class="botaoComprar"></div>
          </div>
          <div id="produto-8" class="produto">8
            <div class="botaoComprar"></div>
          </div>
          <div id="produto-9" class="produto">9
            <div class="botaoComprar"></div>
          </div>
        </div>
      </div>
</body>

</html>
    
asked by anonymous 17.01.2017 / 23:48

1 answer

0

This library does exactly what you're looking for: link

Her library is very explanatory and has some cool models of horizontal scrolling.

If you prefer, you have an example of código , with it working: link

    
28.03.2017 / 23:14