2014-09-07 2 views
-1

webpage (이미지 아이콘 사용)에서 슬라이드하면서 동일한 배경 이미지를 유지할 수 있는지 물어보고 싶습니다. 나는 메인 페이지에서 배경을 유지하고 (어쨌든 거기서 고쳐서) 내용을 '슬라이드'로 만들고 싶었다. 슬라이드를 만들려면 this jquery - javascript 메서드를 사용했습니다. 가로로 움직이는 웹에 같은 배경을 유지하는 방법은 무엇입니까?

는 슬라이딩이 된 JQuery와 기능을 사용 :

/* jQuery.ScrollTo 
/* jQuery.LocalScroll 
/* Fire Horizontal Scroll */ 

(전체 코드가 링크 된 페이지에)

9 개 '슬라이드'가 랩에 배치됩니다. 첫 번째 것은 메인 페이지입니다.

<body> 

    <div id="wrap"> 
    <div id="one"><p>ONE</p></div> 
    <div id="two"><p>TWO</p> <a href="#one">« HOME </a> </div> 
    <div id="three"><p>THREE</p> <a href="#one">« HOME </a> </div> 
    <div id="four"><p>FOUR</p> <a href="#one">« HOME </a> </div> 
    <div id="five"><p>FIVE</p> <a href="#one">« HOME </a> </div> 
    <div id="six"><p>SIX</p> <a href="#one">« HOME </a> </div> 
    <div id="seven"><p>SEVEN</p> <a href="#one">« HOME </a> </div> 
    <div id="eight"><p>EIGHT</p> <a href="#one">« HOME </a> </div> 
    <div id="nine"><p>NINE</p> <a href="#one">« HOME </a> </div> 
    </div> 

여기에 도움을

#wrap { 
min-height: 100%; 
width: 900%; 
overflow: hidden; 
} 

#one, #two, #three, #four, #five, #six, #seven, #eight, #nine { 
width: 11.1%; 
float: left; 
text-align: center; 
} 

* html {background:url(images/mainfull.jpg)} 
* html #full {height:100%;} 

덕분에 CSS의 흥미로운 부분입니다

+0

게시물에 관련 HTML/JS 코드를 포함하십시오. 귀하의 질문에 대한 독자는 일반적으로 링크 된 웹 사이트를 파헤 치어 관련 코드를 찾는 것을 좋아하지 않습니다. – honk

답변

0

[SOLVED] 당신이해야 할 모든 고정 대신 절대의 배경 위치를 변경합니다.

.background-image { 
    background: url(images/mainfull.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

    position: fixed; 

    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    opacity: 0; 

    -webkit-animation-name: fade-in; 
    -webkit-animation-duration: 1s; 
    -webkit-animation-timing-function: ease-in; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-delay: 3s; 

    -moz-animation-name: fade-in; 
    -moz-animation-duration: 1s; 
    -moz-animation-timing-function: ease-in; 
    -moz-animation-iteration-count: 1; 
    -moz-animation-delay: 3s; 

    -webkit-animation-fill-mode: forwards; 
    -moz-animation-fill-mode: forwards; 
    -animation-fill-mode: forwards; 

    background-image: url('images/mainfull.jpg'); 
    background-position: center center fixed; 
    background-repeat: no-repeat; 
} 
관련 문제