I want to do a kind of horizontal Parallax

Asked

Viewed 36 times

1

I want to make sure that by clicking the "see more" button the "slide" page to the left and another one comes from the right. I took some examples and was trying to build on my own but did not succeed. 

<!DOCTYPE html>
<html>

<head>
  <title>Portifólio Augusto Seabra</title>

  <!-- Favicon -->
  <link rel="icon" href="" sizes="32x32">

  <!-- CSS -->
  <link rel="stylesheet" href="css/style.css">

  <!-- Meta tags Obrigatórias -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>

<body>
  <header>
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
      <img class="navbar-brand" src="" alt="icone">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="" id="aumentaFonte"> A+ </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="" id="diminuiFonte"> A- </a>
        </li>
      </ul>
    </nav>
  </header>
  <div id="container" class="d-flex justify-content-center align-items-center">
    <div class="d-flex justify-content-center" id="caixa-container">
      <div id="textos-container d-flex">
        <p class="lead"> Olá, meu nome é </p>
        <h1 class="display-3">Augusto</h1>
        <p class="lead"> eu gosto de criar & codificar! </p>
        <p class=text-center><a href="#qualificacoes" id="botao">Ver mais</a></p>
      </div>
    </div>

    <!-- <div id="qualificacoes1">
			<h3 class="display-5">Conhecimentos</h3>
			<ul>
				<li>
					HTML
				</li>
				<li>
					CSS
				</li>
				<li>
					JavaScript
				</li>
				<li>
					jQuery
				</li>
			</ul>
		</div> -->

  </div>
  <footer class="bg-dark d-flex justify-content-end align-items-center">
    <a href="">
      <img src="" alt="Bandeira do Brasil">
    </a>
    <a href="">
      <img src="" alt="Bandeira dos Estados Unidos">
    </a>
  </footer>

  <!-- JavaScript (Opcional) -->
  <script src="js/jquery-3.3.1.min.js"></script>
  <!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

</html>

javascript html jquery parallax
  • 1

    You mean a carousel? Where does parallax enter in history

  • Share an example of a website that does this to better understand your idea.

No answers

Browser other questions tagged javascript html jquery parallax

You are not signed in. Login or sign up in order to post.