Перемещение из одного div в другое по щелчку ссылки меню

Question

Привет, ребята, я хочу, чтобы анимационный эффект создавался на моем веб-сайте, где, когда мы нажимаем на ссылку меню (скажем, about-section), он будет анимировать этот div в стиль параллакса.

Итак, ребята, если вы знаете какой-либо плагин jquery, который может помочь мне в этом контексте, тогда, пожалуйста, дайте мне знать, и было бы лучше, если бы вы продемонстрировали мне пример этого.

Смотрите код для справки:

.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>

Так, согласно коду я хочу, чтобы оживить в О-секции по щелчку на ссылке с указанием О

Answer 1

Надеюсь, вы хотите этого. Благодаря

// 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

Чтобы получить больше как эффект параллакса, вы можете добавить background-attachment: fixed;

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

Like this

Примечание: Я использую @sagar kodte JS код, который работает хорошо для анимации.

Answer 3

пожалуйста, попробуйте этот

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

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

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> 

, а также js fiddlde here

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>

Попробуйте это.