jquery - texto - modificar un div con php

Moverse de un div a otro al hacer clic en un enlace de menú

Question

Hola chicos, quiero un efecto de animación de hacer en mi sitio web donde, cuando hagamos clic en un enlace de menú (por ejemplo, sobre-sección), se animará a ese div en un estilo de paralaje.

Así que chicos si conocen algún plugin jquery que pueda ayudarme en este contexto, háganmelo saber, y sería mejor si también me demostraran un ejemplo de eso.

Vea el código de ayuda:

.Home-section {
  height: 500px;
  background: deepskyblue;
}
.About-section {
  height: 300px;
  background: deeppink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<a href="#">Home</a>
<a href="#">About</a>

<div class="Home-section">
  <h1> Hello </h1>
</div>

<div class="About-section">
  <h1>Bye</h1>
</div>

Por lo tanto, de acuerdo con el código que quiero animar a la sección Acerca de al hacer clic en el enlace que dice Acerca de

Answer 1

Espero que quieras esto. Gracias

// handle links with @href started with ''#'' only
$(document).on(''click'', ''a[href^="#"]'', function(e) {
    // target element id
    var id = $(this).attr(''href'');

    // target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }

    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();

    // top position relative to the document
    var pos = $(id).offset().top - 10;

    // animated top scrolling
    $(''body, html'').animate({scrollTop: pos});
});

.Home-section {
  height:500px;
  background: deepskyblue;
  }

.About-section {
  height:300px;
  background:deeppink;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#home">Home</a>
<a href="#about">About</a>

<div class="Home-section" id="home"><h1> Hello </h1>
  </div>

<div class="About-section" id="about"><h1>Bye</h1>
  </div>

Answer 2

Para obtener más parecido a un efecto de paralaje, puede agregar background-attachment: fixed;

.About-section {
  height: 300px;
  background: url(''http://lorempicsum.com/futurama/627/200/3'') no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

Me gusta esto

Nota : utilizo el código @sagar kodte JS que funciona bien para la animación.

Answer 3

por favor prueba esto

.Home-section {
  height:500px;
  background: deepskyblue;
  }

.About-section {
  height:300px;
  background:deeppink;
  }
a{cursor:pointer}

código HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
  $("a").click(function() {
  var ourclass = $(this).attr(''class'');
 $(''html, body'').animate({
 scrollTop: $("#"+ourclass).offset().top-10
 }, 2000); 
 });
 });
</script>
 <a class="home">Home</a>
 <a class="about">About</a>
<div class="Home-section" id="home"><h1> Hello </h1></div>
<div class="About-section" id="about"><h1>Bye</h1></div>

y también js fiddlde aquí

Answer 4

.Home-section {
  height: 500px;
  background: deepskyblue;
}
.About-section {
  height: 300px;
  background: deeppink;
}

<a href="#home">Home</a>
<a href="#about">About</a>

<div class="Home-section" id="home">
  <h1> Hello </h1>
</div>

<div class="About-section" id="about">
  <h1>Bye</h1>

Prueba esto.