스크롤 웹 사이트는

Question

임 템플릿 또는 예를 들어 다음과 같은 웹 사이트를 만드는 방법을 가르치는 장소를 찾고 기본적으로 동일하게 유지되지만 다소 스크롤하여 내용이 변경 될 수 있습니다. 또는 링크를 클릭하면 내용이 변경됩니다. 배경은 중립적이다.

이 질문이 유효한 질문입니다. 나는 자신의 포트폴리오 사이트를 설계했는데,이 효과를 얻으려면 코드를 호출하는 방법을 배울 수있다. 메인 페이지에는 오른쪽에 링크가있는 콘텐츠가 있습니다. 스크롤하거나 링크를 클릭하면 콘텐츠가 새 콘텐츠로 전환됩니다. 배경은 정지 상태로 유지됩니다.

희망이 맞는 것! 감사합니다

Answer 1

내가 제대로 귀하의 질문에 후 내가 사용하는 한 가지 방법은 서로의 상단에 position: absolute와 div의 스택 다음 단지 요소가 현재 볼 수있는 표시됩니다 활성 클래스를 전환하는 것입니다이 클래스 것 이해한다면 z-index: 100 또는 1000 또는 원하는 모든 숫자가 있어야하지만 스택 된 요소 수보다 높아야합니다. HTML에서는 페이지를로드 한 후에 표시 될 요소에 활성 클래스를 추가합니다. 그런 다음 JS를 사용하여 활성 클래스의 요소를 변경합니다. JS에서 나는 사용

jQuery를 : https://jquery.com/download/
jQuery를 마우스 휠 플러그인 : https://github.com/jquery/jquery-mousewheel

HTML :

<div class="container"> 
    <div class="vertically-stacked active"> //first visible bannner 
     <h1>Hello</h1> 
    </div> 
    <div class="vertically-stacked"> //visible only if class active is added 
     <h1>World</h1> 
    </div> 
</div> 

당신은 수직 스택 요소의 무한한 수를 가질 수있다.

CSS :

.container //container of vertically stacked elements 
{ 
    position: relative //or absolute but not static 
} 

.vertically-stacked 
{ 
    left: 0; 
    opacity: 0; 
    position: absolute; 
    top: 0; 
    transition: all .25s; //time which takes to switch the active element 
    -moz-transition: all .25s; 
    -o-transition: all .25s; 
    -webkit-transition: all .25s; 
} 

.vertically-stacked.active 
{ 
    opacity: 1; 
    z-index: 100; 
} 

JS :

$(document).on('mousewheel', function (e) 
{ 
    var $verticallyStacked = $('.vertically-stacked'), 
     oldActive = $verticallyStacked.index($('.vertically-stacked.active')), 
     newActive; 

    $verticallyStacked.eq(oldActive).removeClass('active'); 
    if (e.deltaY < 0) //scroll down 
    {  
     newActive = oldActive + 1; 
    } 
    else //scroll up 
    { 
     newActive = oldActive - 1; 
    } 
    $verticallyStacked.eq(newActive).addClass('active'); 
});