오늘날 웹에서 가장 인기있는 기술 중 하나는 시차 스크롤링입니다. 우리는 마우스의 스크롤 휠을 돌리고 마우스 휠을 돌리면 페이지의 내용이 페이지 위아래로 움직이는 사이트에 다 다녔습니다.
웹 디자인 및 그래픽 디자인에 익숙하지 않은 사용자에게는 필요한 CSS의 양 때문에이 기술을 매우 어려울 수 있습니다.
그것이 당신을 설명한다면, 그래픽 아티스트에게 어필할만한 많은 어플리케이션이 있습니다. 그들은 기본적으로 웹 페이지에 익숙한 페이지 레이아웃 방식을 사용합니다. 즉, 코딩이 많이 포함되어 있지는 않습니다. 정말 눈에 띄게 한 가지 응용 프로그램은 Adobe Muse입니다.
Muse를 사용하여 그래픽 전문가가 수행하는 작업은 매우 놀랍습니다. Muse를 방문하여 수행 할 수있는 샘플을 볼 수 있습니다. 오늘의 사이트 . 웹 전문가는 Muse를 일종의 "바람 완구"로 간주하지만 디자이너들도 모바일 및 웹 프로토 타입을 제작하여 결국에는 개발자 팀에 전달할 예정입니다.
Muse로 믿을 수 없을 정도로 쉬운 기술 중 하나는 시차 스크롤입니다. 완성 된 버전의 운동을보고 싶다면. 마우스의 스크롤 휠을 돌리면 텍스트가 페이지 위아래로 움직이며 이미지가 변경됩니다.
시작하자.
07 년 1 월웹 페이지 만들기
Muse를 실행하면 새 사이트 링크. 그러면 새 사이트 속성. 이 프로젝트는 데스크톱 응용 프로그램 용으로 설계되었으며 초기 레이아웃 팝 다운 메뉴. Columns, Gutter Width, Margins 및 Padding 수에 대한 값을 설정할 수도 있습니다. 이 경우 우리는이 문제에 크게 신경을 쓰지 않았고 간단히 클릭했습니다. 승인.
페이지 서식 지정
사이트 속성을 설정하고 클릭하면 승인 너는 불린 것에 데려 갔다. 계획 전망. 이있다 집 페이지 상단에 마스터 페이지 창 하단. 우리는 한 페이지 만 필요했습니다. 디자인 뷰로 이동하기 위해 인터페이스를 연 홈페이지를 두 번 클릭했습니다.
왼쪽에는 몇 가지 기본 도구가 있고 오른쪽에는 페이지의 내용을 조작하는 데 사용되는 다양한 패널이 있습니다. 맨 위에는 페이지에 적용 할 수있는 속성이나 페이지에서 선택한 속성이 있습니다. 이 경우 검은 색 배경을 원했습니다. 이 작업을 수행하기 위해 브라우저 채우기 색상 선택기에서 검정색을 선택했습니다.
03 / 07페이지에 텍스트 추가
다음 단계는 페이지에 텍스트를 추가하는 것입니다. 우리는 텍스트 도구 텍스트 상자를 꺼냈다. 우리는 "Welcome"라는 단어를 입력하고, Properties에서 텍스트를 Arial, 120 픽셀 흰색. 센터 정렬.
그런 다음 선택 도구로 전환하고 텍스트 상자를 클릭 한 다음 Y 위치에서 168까지 위쪽에서 픽셀. 텍스트 상자가 선택된 상태에서 패널 정렬 텍스트 상자를 중앙에 맞 춥니 다.
마지막으로 선택한 텍스트 상자를 사용하여 옵션 / 대체 과 시프트 텍스트 상자의 4 개의 복사본을 만들었습니다. 각 복사본의 텍스트와 Y 위치를 다음과 같이 변경했습니다.
- 끝 : 871
- 그래픽, 1621
- 소프트웨어, 2371
각 텍스트 상자의 위치를 설정할 때 페이지의 크기가 텍스트 위치에 맞게 조정됩니다.
04 / 07이미지 자리 표시 자 추가
다음 단계는 텍스트 블록 사이에 이미지를 넣는 것입니다.
첫 번째 단계는 사각형 도구 페이지의 한 쪽에서 다른 쪽까지 늘어나는 상자를 그립니다. 선택한 사각형을 사용하여 높이를 250 픽셀 그리고 그것의 Y 위치에서 425 픽셀. 사용자의 브라우저 뷰포트를 수용하기 위해 항상 페이지 너비로 늘리거나 줄이게 할 계획입니다. 이를 위해 Google은 100 % 너비 버튼을 클릭합니다. 이것은 X 값을 회색으로 표시하고 이미지가 항상 브라우저의 뷰포트 너비의 100 %가되도록합니다.
07 년 5 월이미지 자리 표시 자에 이미지 추가
Rectangle을 선택하면 색상 채우기가 아닌 채우기 링크 - 클릭하여마법사 잉크 사각형에 이미지를 추가합니다. 에서 입어 보기 지역 크기에 맞게 조정 를 클릭하고 중앙 핸들 ~ 안에 위치 영역은 이미지가 이미지의 중앙에서 확대되도록합니다.
다음으로, Option / Alt-Shift- 드래그 기술을 사용하여 처음 두 텍스트 블록 사이에 이미지 복사본을 만들고 채우기 패널을 열고 다른 이미지로 바꿨습니다. 우리는 나머지 두 이미지에 대해서도 이것을 수행했습니다.
이미지가 제자리에 있으면 모션을 추가 할 차례입니다.
07 년 6 월시차 스크롤링 추가
Adobe Muse에서 시차 스크롤을 추가하는 방법에는 여러 가지가 있습니다. 우리는 당신에게 그것을하는 간단한 방법을 보여줄 것입니다.
채우기 패널을 연 상태에서 스크롤 탭 그리고 창이 열리면 모션 체크 박스.
에 대한 값이 표시됩니다. 머리 글자 과 최종 모션. 스크롤 휠과 관련하여 이미지가 얼마나 빨리 움직이는 지 결정합니다. 예를 들어, 1.5의 값은 휠보다 1.5 배 빠른 이미지를 이동시킵니다. 우리는 0을 사용하여 이미지를 제자리에 고정 시켰습니다.
그만큼 수평 및 수직 화살표 모션의 방향을 결정한다.값이 0이면 클릭 한 화살표에 관계없이 이미지가 움직이지 않습니다.
중간 값 – 주요 위치 - 이미지가 움직이기 시작하는 지점을 보여줍니다. 이미지 위의 선이 시작됩니다.이 이미지의 경우 페이지 상단에서 325 픽셀입니다. 스크롤이 그 값에 도달하면 이미지가 움직이기 시작합니다. 이 값은 대화 상자에서 값을 변경하거나 줄 위쪽의 점을 위 또는 아래로 드래그하여 변경할 수 있습니다.
페이지의 다른 이미지에 대해서도이 작업을 반복하십시오.
07 년 7 월브라우저 테스트
이 시점에서 우리는 끝났습니다. 명백한 이유 때문에 우리가 한 첫 번째 일은 파일> 사이트 저장. 브라우저 테스트를 위해 파일> 브라우저에서 미리보기 페이지. 이렇게하면 컴퓨터의 기본 브라우저가 열리고 페이지가 열리면 스크롤이 시작됩니다.
