스크롤 된 애니메이션으로 구성된 3 부분 웹 사이트

나는 그런 웹 사이트를 만들고 싶다. (나는 영어로 나쁘기 때문에 이미지를 넣는다.)스크롤 된 애니메이션으로 구성된 3 부분 웹 사이트

<html> 

<body> 

<div id="menu"> </div> 
<div id="content1"> </div> 
<div id="content2"> </div> 
<div id="content3"> </div> 

</body> 

</html>

내가 CSS와 DIV를 해결하는 방법을 알고, 이해 희망,하지만 난 다른 부분에 내 웹 사이트를 분리 스크롤 애니메이션을 만드는 방법을 알고하지 않습니다.

여러분 모두 도와주세요!

출처

2014-05-18 Ralsho

그것은 JQuery와 작업 –

처럼 찾고 있습니다 ... 당신이 웹 사이트에 3 상자를 만드는 것을 의미합니다 :

이 JSFiddle은 작업 표시 스크롤 옵션을 사용할 수있게합니다. 내가 맞습니까? – Shashank

아니, 나는 동일한 HTML을 원한다면 스크롤하는 애니메이션으로 3 부분으로 나눈다. – Ralsho

질문을 올바르게 이해하면 원하는 곳 근처에 있어야합니다.

HTML :

<div id="menu"> 
    <h1>This is the menu div</h1> 
</div> 

<div id="main-container"> 
    <div id="content-container"> 
     <div id="content1"> 
      <h1>This is content 1</h1> 
      <a href="#" id="right1">Right</a> 
     </div> 
     <div id="content2"> 
      <h1>This is content 2</h1> 
      <a href="#" id="left2">Left</a> 
      <a href="#" id="right2">Right</a> 
     </div> 
     <div id="content3"> 
      <h1>This is content 3</h1> 
      <a href="#" id="left3">Left</a> 
     </div> 
    </div> 
</div>

CSS

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    text-align: center; 
} 

h1 { 
    margin: 0; 
    padding: 10px; 
    font-family: Helvetica, Arial, sans-serif; 
    font-size: 25px; 
} 

#menu { 
    width: 100%; 
    height: 20%; 
} 

#main-container { 
    width: 100%; 
    height: 80%; 
    overflow: hidden; 
} 

#content-container { 
    width: 300%; 
    height: 100%; 
    position: relative; 
    top: 0; 
    left: 0; 
    font-size: 0px; 
    transition: left 0.5s ease; 
    -o-transition: left 0.5s ease; 
    -ms-transition: left 0.5s ease; 
    -moz-transition: left 0.5s ease; 
    -webkit-transition: left 0.5s ease; 
} 

#content-container > div { 
    width: 33.33%; 
    height: 100%; 
    display: inline-block; 
    font-size: 15px; 
} 

#content1 { 
    background: red; 
} 

#content2 { 
    background: orange; 
} 

#content3 { 
    background: green; 
}

JS :

$("#right1, #left3").on("click", function() { 
    // This fires when 'right' is pressed on content 1, 
    // or 'left' is pressed on content 3. In both cases 
    // we want to move to show content 2. 
    $("#content-container").css({left: "-100%"}); 
}); 

$("#left2").on("click", function() { 
    // This fires when 'left' is pressed on content 2. 
    // We want to move to show content 1. 
    $("#content-container").css({left: "0%"}); 
}); 

$("#right2").on("click", function() { 
    // This fires when 'right' is pressed on content 2. 
    // We want to move to show content 3. 
    $("#content-container").css({left: "-200%"}); 
});

을 설명하기 위해 슬라이딩 효과 CSS3 천이 기반으로한다. CSS의 *-transition 속성은 이동 용이성을 사용하여 left 속성의 길이를 0.5 초로 지정해야한다고 지정합니다. 즉, 콘텐츠 컨테이너 div의 left 속성을 변경하면 브라우저가 변경 사항을 애니메이션으로 적용하여 즉시 적용하는 대신 원하는 슬라이드 효과를 만듭니다.

페이지가 작동하는 방식은 각 콘텐츠 div가 콘텐츠 컨테이너 div의 너비의 1/3 즉, width: 33.33%으로 설정된다는 것입니다. 콘텐츠 컨테이너 div는 페이지 폭의 3 배입니다 (예 : width: 300%). 내부의 콘텐츠 div는 display: inline-block을 사용하여 나란히 배치되며이 방법을 사용하면 콘텐츠 컨테이너 div에 font-size: 0px을 설정하고 콘텐츠 div에는 font-size: (xyz)px을 다시 설정해야합니다. 이것은 inline-block 방식의 단점이지만 위의 작업을 수행하면 3 개의 콘텐츠 div 사이의 가로 간격을 제거 할 수 있습니다.

마지막으로, 포함 된 JS는 페이지를 전환하는 링크에 대한 이벤트 핸들러를 작성하기 위해 jQuery를 사용합니다 (하지만 사용자는이를 수행 할 수 있습니다). 이러한 이벤트 처리기는 주석 처리가되어 있으므로 설명이 필요하지만 기본적으로 표시해야하는 페이지에 따라 콘텐츠 컨테이너 div의 left 속성을 변경합니다. 나는 당신이이 3 개 웹 사이트가 동일한 웹 페이지에 있지만 스크롤에 표시 할 생각 http://jsfiddle.net/CN8z6/1/

출처

2014-05-18 22:24:30

진심으로 당신을 사랑합니다! 너는 내 하루를 보냈다! 감사! – Ralsho

content2에서 내 문서를 시작하는 방법을 알고 있습니까? – Ralsho

기꺼이 도와 드릴 수 있습니다. 그리고 yes -'content-container'의 CSS에서'left : 0;'을'left : -100 %;'로 변경하면됩니다. 그러면 3 개의 콘텐츠 div를 모두 보유하고있는 콘텐츠 컨테이너 div가 1 개의 콘텐츠 div 크기만큼 왼쪽으로 이동하므로 기본적으로 콘텐츠 2가 표시됩니다. –

스크롤 된 애니메이션으로 구성된 3 부분 웹 사이트

답변

관련 문제