사이드 스크롤링 웹 사이트 만들기

http://www.rleonardi.com/interactive-resume/과 비슷한 가운데 고정 된 문자로 가로로 스크롤하는 웹 사이트를 만들려고합니다.사이드 스크롤링 웹 사이트 만들기

이미지 크기를 조정하려고 CSS를 변경하려고하면 웹 사이트에 영향을 미치지 않으며 위치를 사용해야하는지 여부는 알지 못합니다. 센터의 문자를 수정하려면 고정되어 있어야합니다.

<html lang="en"> 

<head> 
    <!-- Required meta tags --> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 

    <!-- Bootstrap CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
    <title>Your title</title> 
    <link rel="stylesheet" href="css/styles.css"> 
</head> 

    <body> 

     <background><img src="Photos/Backgroundclear%20.png" alt= "Background"/> </background> 


     <character><img src="Photos/Character.png" alt= "Background image"/> </character> 


     <div><floor><img src="Photos/floor.png" alt= "Background image"/> </floor> </div> 


    </body>

과 CSS :

body{ 
    background-color: $primarycolour; 
    max-width: 8000px; 
    max-height: auto; 

} 

background{ 
    max-height: auto; 
    max-width: 100%; 

} 

character{ 
    max-height: 20px; 
    margin: auto; 

}

출처

2017-11-15 user8946239

더 나은 코드를 피들로 감쌀 수 있습니다. 귀하의 CSS는 전혀 크기를 조정하지 않습니다. –

당신이 정말로 할 겁니다 이런 복잡한 프로젝트의 경우는 주위에 당신의 머리를 정리하기 요소의 위치 및 고정 방법/r 절대 및 절대 위치 지정 작업. This에서 올바른 방향으로 이동해야합니다. 이 경우 크롬 인스펙터를 사용하여 복제하려고하는 예를 살펴보고 캐릭터에 position: absolute이 있음을 알 수 있습니다. 캐릭터의 크기를 재조정 한 CSS가 있습니다. 희망이 도움이됩니다!

body{ 
    background-color: $primarycolour; 
    max-width: 8000px; 
    max-height: auto; 

} 

background{ 
    max-height: auto; 
    max-width: 100%; 

} 

character{ 
    max-height: 20px; 
    margin: auto; 

} 
background img { 
    width: 100%; 
} 
floor img { 
    width: 100%; 
    position: fixed; 
    bottom: 0; 
} 
character img { 
    position: absolute; 
    width: 200px; 
    bottom: 140px; 
    left: calc(50% - 100px); 
}

출처

2017-11-16 11:27:46

사이드 스크롤링 웹 사이트 만들기

답변

관련 문제