jQuery의 "맨 위로 가기" 버튼을 부드럽게 만듭니다. 페이지 상단으로의 애니메이션 전환 페이지 상단으로 이동하는 방법
사이트의 "위로" 버튼과 같은 기능은 방문자가 인터넷 리소스를 더욱 편리하게 사용할 수 있도록 해줍니다. 페이지의 어느 곳에서나 페이지 상단으로 쉽게 이동할 수 있도록 도와줍니다. 이는 아래로 긴 스크롤이 필요한 큰 기사가 있는 온라인 상점 및 사이트에 필수입니다.
이것이 왜 필요한가요?현재 대부분의 사이트에는 "위로" 버튼과 같은 기능이 없으며 이에 대해 중요한 사항도 없습니다. 그러나 이를 사용하면 인터넷 리소스와 방문자 모두에게 많은 이점을 가져올 수 있습니다.
방문객을 위한 혜택인터넷 리소스의 페이지에 정보가 너무 많을 때, 정보 기사가 많은 공간을 차지하고 마우스 휠을 사용하여 페이지를 아래로 스크롤해야 할 때 종종 발생합니다. 이 외에도 기사 끝에는 이에 대한 많은 의견이 있을 수 있습니다.
방문자가 기사를 읽을 때는 페이지를 아래로 스크롤하는 것이 지루하지 않지만, 텍스트가 끝나고 위로 이동해야 하면 조금 피곤해지기 시작합니다. 대부분의 사람들은 너무 게으른 나머지 오랫동안 스크롤할 수 없으며 사이트를 돌아다니는 대신 단순히 사이트를 닫을 것입니다.
버튼을 이용하면 페이지 상단으로 즉시 이동이 가능해 사이트 이용 시간이 더욱 편리해집니다.
인터넷 자원의 이점리소스 자체의 긍정적인 측면은 과거 요인에서 비롯됩니다. 사이트 탐색이 단순화되어 행동 요인이 개선되고, 모든 방문자가 활동에 더욱 적극적으로 참여하고 다른 페이지로 이동하기 때문입니다.
따라서 데이터는 사이트에 대한 모든 검색 엔진의 태도에 영향을 미치고 검색 결과에서 해당 사이트의 위치가 향상됩니다.
웹사이트에 "위로" 버튼을 직접 만드는 방법
- 이미지 생성;
- 스크립트 작성;
- 버튼 스타일 생성;
- 사이트에 추가 중입니다.
사이트에 "맨 위로 가기" 버튼을 추가하려면 먼저 아이콘 자체를 만들어야 합니다. 아이콘을 클릭하면 사용자가 페이지 상단으로 이동하게 됩니다. 이를 위해 기성 옵션을 사용할 수 있으며 그 중에서 언제든지 가장 적합한 옵션을 선택할 수 있습니다.
버튼의 모양을 개선하려면 CSS를 기반으로 배경 이미지를 결합하여 애니메이션을 생성할 수 있는 스프라이트를 만드는 등 몇 가지 개선이 필요합니다.
그래픽 작업의 경우 모든 편집기를 사용할 수 있습니다. 하지만 가장 편리한 옵션은 PIXLR 온라인 서비스입니다. 여기에서 아무것도 다운로드할 필요가 없고 브라우저에서 직접 사용할 수 있기 때문입니다.
시작하려면 나타나는 편집기 창에서 "컴퓨터에서 이미지 업로드" 필드를 선택해야 합니다. 로켓 이미지를 예로 들어보겠습니다.
선택한 아이콘의 크기가 너무 크면 작은 크기 조정이 필요합니다. 이렇게 하려면 상단 메뉴로 이동하여 "편집" 필드를 선택한 다음 "자유 변환..."을 선택해야 합니다.
다음으로 사진 옆에 특수 마커가 나타나며 이를 이동하여 이미지 크기를 변경할 수 있습니다. 비율을 유지하려면 Shift 키를 누른 상태에서 파란색 마커를 움직여야 합니다. 이러한 작업이 끝나면 로켓 이미지가 얻어집니다.
다음 단계는 레이어의 복사본을 만드는 것입니다.
이제 새 레이어의 로켓 이미지를 약간 위로 이동해야 합니다. 이렇게 하려면 왼쪽 메뉴의 두 번째 열에 있는 이동 도구와 키보드의 위쪽 화살표를 사용하는 것이 편리합니다.
이제 상단 이미지를 흑백으로 만들어야 합니다. 이는 상단 메뉴의 "수정" - "색조/채도" 항목을 사용하여 수행할 수 있습니다. 완전한 채도 감소를 위해서는 채도 슬라이더를 -100으로 설정해야 합니다. 이 작업을 사용하면 "위로" 버튼 위로 마우스를 가져가면 해당 버튼이 흑백에서 컬러로 바뀌는 효과를 만들 수 있습니다.
마지막 작업은 두 사진 주위의 추가 공간을 제거하는 것입니다. 이렇게 하려면 왼쪽 메뉴에서 "자르기" 항목을 선택하고 직사각형에서 두 개의 로켓만 선택합니다. 자르기를 수행하려면 Enter 키를 누릅니다.
결과적으로 추가 여유 공간이 없는 이미지가 생성됩니다. 결과 이미지의 너비와 높이를 기록해 두어야 합니다. 이 데이터는 다음 단계에서 유용할 것입니다.
저장하려면 "파일" - "저장"을 클릭해야 합니다. 왼쪽 항목 "내 컴퓨터"에 이미지 이름(영어 레이아웃만 해당)을 기록하고 형식(이 경우 - PNG)을 선택한 다음 “예” 버튼을 클릭하세요.
위로 버튼 스크립트 파일이 경우 스크립트를 작성할 필요가 없습니다. 완성된 코드를 일부 수정하면 공개적으로 사용 가능한 옵션을 사용할 수 있습니다.
이렇게 하려면 코드 편집기를 다운로드해야 합니다. 가장 인기 있고 무료인 옵션은 Notepad++입니다. 설치한 후 다음 코드를 모두 복사하여 붙여넣어야 합니다.
| $(document).ready(function())( $(window).scroll(function () (if ($(this).scrollTop() > 0) ($("#scroller").fadeIn();) else ($("#scroller").fadeOut();))); $("#scroller").click(function () ($("body,html").animate((scrollTop: 0), 400 ) ; 거짓을 반환 ;)); )); |
사이트에 스크롤 업 버튼을 설치하려면 필요한 위치에 코드를 배치해야 합니다. 태그 앞에 입력해야 합니다. .
CSS에서 버튼 스타일 지정대부분의 경우 사이트의 "위로" 버튼은 하단("바닥글")에 있습니다.
사이트의 style.css 파일에 다음 코드를 추가해야 합니다.
이 경우 이미지의 너비와 높이에 대한 데이터가 필요합니다. 남은 것은 수신된 데이터를 코드에 입력하는 것뿐입니다. 그러면 사이트의 "위로" 버튼이 준비됩니다! 또 뭐야?
Wordpress 사이트의 위로 버튼
이 CMS의 경우 "상단" 버튼은 플러그인을 사용하거나 독립적으로 생성할 수 있습니다.
플러그인 방법은 설치 버튼을 클릭하고 플러그인 메뉴의 모든 기능을 구성하기만 하면 되기 때문에 가장 편리하고 설치하기 쉽습니다.
후자의 선택은 신중하게 접근해야 합니다. 왜냐하면 그것과 함께 사이트에 대한 바이러스를 쉽게 구입할 수 있기 때문입니다. 가장 인기 있고 입증된 옵션은 Scroll Back To Top이라는 플러그인입니다. 표준 Wordpress 플러그인 검색을 사용하여 다운로드할 수 있습니다.
이 확장에는 다양한 기능이 있으며 Wordpress 사이트의 "맨 위로 가기" 버튼을 사용자 정의하는 것이 매우 쉽습니다. 모든 값을 변경할 필요는 없으며 사이트 페이지에서 버튼의 모양과 위치만 구성하면 됩니다.
보시다시피 플러그인을 사용하여 "위로" 버튼을 설치하는 것은 매우 간단합니다. 그러나 한 가지 중요한 차이점이 있는데, 이는 설치된 각 플러그인이 CMS를 로드한다는 것입니다. 이는 인터넷 리소스 속도에 영향을 미칠 수 있습니다. 이것이 바로 대부분의 웹사이트 소유자가 타사 확장 프로그램을 사용하지 않고 코드에서 직접 모든 변경을 시도하는 이유입니다. HTML로 웹사이트에 "위로" 버튼을 만들면 소비되는 리소스가 최소화됩니다.
모든 Wordpress 시스템 파일을 변경하기 전에 해당 파일을 백업해야 합니다. 다음으로 위에서 설명한 모든 단계를 수행하여 자신만의 버튼을 만들 수 있습니다.
Joomla의 위로 버튼
CMS Joomla는 Wordpress와 마찬가지로 플러그인 설치도 지원합니다. Joomla 3 사이트의 "상단" 버튼 중 가장 성공적인 버전은 페이지 상단이라는 확장 기능입니다.
이 CMS에서는 "확장 관리자"를 통해 모든 플러그인을 설치할 수 있습니다. 이렇게 하려면 다음이 필요합니다.
- 인터넷에서 플러그인을 다운로드하십시오.
- 확장 관리자에서 "찾아보기" 버튼을 클릭하세요.
- 다운로드한 아카이브를 선택하세요.
- "다운로드"를 클릭하고 설치하세요.
이제 플러그인 관리자에서 활성화해야 합니다. 이렇게 하려면 이 섹션으로 이동하여 플러그인을 찾아 상태를 "활성화"로 전환해야 합니다.
페이지 상단에는 다음과 같은 기능이 있습니다.
- 실행/ 관리자 - 인터넷 리소스뿐만 아니라 Joomla CMS 패널 자체에서도 옵션을 활성화합니다.
- 버튼 공개 위치 - "위로" 버튼이 나타나기 위해 사용자가 되감아야 하는 픽셀 수입니다.
- 버튼 텍스트 생략 - 버튼에 텍스트가 있습니다.
- 항상 맨 위에 - 사이트 페이지가 항상 처음부터 표시됩니다. 앵커를 사용하여 페이지의 특정 위치로 스크롤하는 경우 이 옵션을 활성화할 필요가 없습니다.
- 부드러운 스크롤 - 페이지 스크롤을 더욱 부드럽게 만듭니다.
- 스크롤 기간 - 페이지가 처음으로 완전히 이동한 후의 시간입니다.
- 스크롤 전환 - 스크롤에 뛰어난 시각 효과를 추가합니다.
- 전환 완화 - 페이지 상단으로의 이동을 '완화'합니다.
- 링크 위치 - 아이콘의 위치입니다. 표준에 따르면 버튼은 오른쪽 하단에 있습니다.
- 스타일 사용 - 아래 필드에서 설정할 수 있는 개별 버튼 스타일입니다. 음수 값으로 전환하면 모든 스타일 매개변수가 활성 사이트 테마에서 가져옵니다.
- 링크 스타일 - 버튼 스타일 매개변수를 입력하기 위한 필드입니다.
"위로" 버튼의 스타일을 직접 사용자 정의하려면 CCS에 대한 최소한의 지식이 있어야 합니다. 그렇지 않으면 두 번째 매개변수의 값을 "No"로 전환해야 합니다.
또 다른 중요한 뉘앙스는 아이콘의 일반적인 비문에 영어 텍스트(Return to Top)가 포함되어 있다는 것입니다. 이러한 텍스트는 러시아어 사이트에 존재할 수 없으므로 플러그인 매개변수에서 해당 텍스트를 비활성화하거나 러시아어로 변경하면 됩니다.
이 비문을 변경하려면 FTP 또는 호스팅에 내장된 파일 관리자를 사용하여 사이트 서버에 로그인해야 합니다. 다음으로, "/administrator/언어/en-GB/" 디렉토리에서 "en-GB.plg_system_topofthepage.ini"라는 파일을 찾아야 합니다.
텍스트를 변경하기 전에 이 문서의 인코딩을 UTF-8로 변경해야 합니다. 이렇게 하면 러시아어 문자가 정상적으로 표시됩니다.
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="맨 위로 돌아가기" " |
따옴표 안의 문구를 러시아어로 변경합니다. “Up!”, “To the Beginning!”과 같은 문구를 사용할 수 있습니다. 또는 "위로!"
Ucoz의 위로 버튼
Ucoz 사이트의 "위로" 버튼은 코드 삽입을 사용해 수행해야 합니다. 왜냐하면 이 CMS에 대한 플러그인 연결이 불가능하기 때문입니다. 그러나 이를 위해서는 시스템 파일을 오랫동안 연구하고 필요한 줄을 검색할 필요가 없으며 필요한 위치에 작은 코드만 삽입하면 됩니다.
설치를 위해서는 다음이 필요합니다:
- “제어판 -> 디자인 -> 디자인 관리(템플릿) -> 사이트 하단으로 이동하세요.
- 스크립트를 삽입합니다(프로젝트 공식 웹사이트 및 타사 리소스에서 찾을 수 있음).
그러면 오른쪽 하단에 아이콘이 나타나 사용자를 페이지 맨 위로 이동시킵니다.
보시다시피 CMS에 "맨 위로 가기" 버튼을 설치하는 것은 특별히 어렵지 않았습니다. 자동 설치 방법(플러그인)이나 수동 설치 방법을 사용할 수 있습니다. 그러나 마지막 옵션은 사이트 성능에 부정적인 영향을 미치지 않으므로 가장 적합합니다.
HTML 사이트의 "맨 위로 돌아가기" 버튼을 사용하면 사이트 리소스 소비를 최소화할 수 있습니다. 확장 기능이 너무 많으면 리소스 성능에 부정적인 영향을 미칠 수 있기 때문입니다. 하나의 "위로" 버튼 플러그인은 사이트 페이지의 로딩 시간에 큰 영향을 미치지 않지만 대부분의 경우 사용자는 CMS에 최소 12개의 플러그인을 설치합니다. 이 경우 모든 플러그인은 사이트 페이지 성능에 부정적인 영향을 미칠 수 있습니다.
사이트에 상당한 양의 콘텐츠가 있는 경우 웹마스터는 소위 "맨 위로 스크롤" 버튼을 사용합니다. 이 버튼을 사용하면 콘텐츠를 페이지 상단까지 즉시 스크롤할 수 있으므로 사용자가 지루한 수동 스크롤을 하지 않아도 됩니다.
이 블로그 페이지에서 "맨 위로 스크롤" 버튼의 작동을 볼 수 있습니다.
버튼 자체는 png 형식의 이미지를 사용하므로 먼저 자신에게 적합한 이미지 버전을 찾아야 합니다. 여기에는 iconfinder라는 고품질 아이콘 서비스가 적합합니다.
버튼 출력을 위한 HTML 코드arrowup 식별자가 있는 div 블록은 템플릿 실행 파일(일반적으로 index.php 파일)의 태그 사이에 삽입됩니다. Youtheme 스튜디오 템플릿에서는 "레이아웃" 폴더에 있는 theme.php 파일입니다.
CSS 버튼 스타일링
arrowup 클래스에 첨부된 버튼 스타일 CSS 코드는 템플릿에 포함된 모든 CSS 파일에 배치됩니다. 일반적으로 "css" 폴더에 있는 style.css 파일이 사용됩니다.
#arrowup ( 위치: 고정; 오른쪽: 30px; /*버튼 위치: 오른쪽 들여쓰기*/ 하단: 30px; /*버튼 위치: 하단 들여쓰기*/ background: url(/images/arrowup.png); /*버튼 경로 이미지 버튼*/ 너비: 48px; /*버튼 너비 크기*/ 높이: 48px; /*버튼 높이 크기*/ 커서: 포인터; 디스플레이: 없음; 불투명도: 0.8; /*정적 투명도 수준*/ ) #arrowup :hover ( opacity: 1; /*호버링 시 불투명도 수준*/ )
버튼이 작동하는 JS 코드버튼 기능을 구현하는 JavaScript 코드는 템플릿 실행 파일(index.php)의 ... 태그 사이 또는 닫는 태그 앞에 배치됩니다.
$(document).ready(function() ( $(window).scroll(function() ( if ($(this).scrollTop() > 0) ( $("#arrowup").fadeIn(300); / /버튼이 사라지는 속도 ) else ( $("#arrowup").fadeOut(200); //버튼이 나타나는 속도 ) )); $("#arrowup").click(function() ( $ ("body,html" ).animate(( scrollTop: 0 ), 200); //스크롤 속도 return false; ));));
모바일 장치에서 "위로 버튼"을 숨기는 방법많은 웹마스터는 모바일 장치에 사이트를 표시할 때 불필요하다는 이유로 '위로 버튼'을 숨깁니다. 모바일 장치에서 "맨 위로 스크롤" 버튼을 숨기려면 CSS 미디어 쿼리 @media를 사용하세요(모든 내용은 동일한 CSS 파일 style.css로 작성됨).
@media 전용 화면 및 (max-width: 568px) ( #arrowup (display: none;) )
"맨 위로 돌아가기" 또는 " " 버튼은 최신 웹사이트 페이지에서 인기 있고 유용한 요소입니다. 특히 해당 페이지에 많은 콘텐츠가 포함되어 있는 경우 더욱 그렇습니다.
우선, 이는 일반적으로 사이트의 유용성을 향상시킵니다. 사용자가 많은 양의 콘텐츠를 읽고 사이트 상단으로 돌아가기 위해 페이지 하단으로 스크롤하는 경우 표준 스크롤을 사용합니다. 사용자가 자동으로 페이지 상단으로 리디렉션되도록 하기 위해 방문자를 생각하는 사이트 개발자와 관리자는 "맨 위로 돌아가기" 버튼의 다양한 변형을 사용합니다. 이는 추가 라이브러리나 스크립트를 사용하지 않고 확장된 기능을 사용하여 라이브러리와 작은 실행 스크립트를 연결하는 가장 간단한 솔루션이 될 수 있습니다.
"맨 위로 가기" 버튼은 다양한 방식으로 디자인되었습니다. 이는 평범한 텍스트 링크, 고전적인 모양의 버튼, 화살표가 있는 둥근 버튼 또는 적절한 유형의 이미지를 사용할 수 있습니다. 대부분의 경우 이러한 버튼은 정적으로 보입니다. 때로는 마우스를 가져가면 배경색과 글꼴이 변경되며 개발자가 애니메이션 효과를 사용하는 경우는 거의 없습니다.
오늘은 간단한 예를 사용하여 CSS 애니메이션을 사용하여 "맨 위로 가기" 팝업 버튼에 약간의 움직임을 추가하는 방법을 살펴보겠습니다. 동시에 다음을 포함하는 스크립트 자체도 살펴보겠습니다. 버튼이 작동하는 데 필요한 jQuery 이벤트.
사이트에서 버튼을 활성화하기 위해 페이지의 HTML 마크업에 태그를 추가할 필요가 없습니다. jQuery 라이브러리를 연결하고 작은 실행 가능한 js를 작성하는 것으로 충분하며 버튼이 작동합니다. style.css 파일을 html 문서에 연결하여 CSS를 이용하여 모양과 애니메이션을 만들어 보겠습니다.
따라서 사이트에 아직 jQuery 라이브러리가 연결되어 있지 않은 경우 Google 콘텐츠 전송 네트워크(CDN)에서 직접 현재 버전을 연결하면 쉽게 수행할 수 있습니다. 이렇게 하려면 닫는 태그 앞에 다음 줄을 작성하면 됩니다.
| < script src= "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" > |
아래, 이 줄 바로 아래에 작은 실행 파일인 js를 배치합니다. 이 js는 특정 지연으로 버튼을 표시하고 주요 기능을 수행하여 사용자를 페이지 상단으로 원활하게 되돌립니다.
| < script>jQuery(문서) . Ready(function ($) ( var //페이지 상단까지의 스크롤 속도 speed = 500 , //html 버튼 레이아웃 $scrollTop = $(" " ) .appendTo("body" ) ; $scrollTop . click(function (e) ( e.preventDefault() ; $( "html:not(:animated),body:not(:animated)" ) . animate(( scrollTop: 0 ) , speed ) ; ) ) ; //버튼 함수의 표시 모드 설정 show_scrollTop() ( ( $(window).scrollTop() > 300 ) ? $scrollTop . fadeIn(600 ) : $scrollTop . fadeOut (600 ) ; ) $(window) .scroll( function () ( show_scrollTop() ; ) ) ; show_scrollTop() ; ) ) ; |
jQuery(document).ready(function($)( var //페이지 상단까지 스크롤 속도 speed = 500, //html 버튼 레이아웃 $scrollTop = $(" ").appendTo("body"); $scrollTop.click(function(e)( e.preventDefault(); $("html:not(:animated),body:not(:animated)").animate(( scrollTop: 0), speed); )); //버튼 함수의 표시 모드 설정 show_scrollTop())( ($(window).scrollTop() > 300) ? $scrollTop.fadeIn(600) : $scrollTop. fadeOut(600) ; ) $(window).scroll(function())( show_scrollTop(); )); show_scrollTop(); ));
말하자면, 이해를 돕기 위해 스크립트에 몇 가지 설명을 추가했습니다. 위에서 쓴 것처럼 이 방법을 사용하면 HTML 페이지 마크업에 태그를 추가할 필요가 없습니다. 스크립트가 이 작업을 완벽하게 수행합니다. 사용자가 페이지를 300px 아래로 스크롤하면 플러그인이 버튼 태그를 작성합니다. 이 경우에는 다음과 같습니다.
| < a href= "#" title= "빨리 맨 위로 돌아가기" class = "scrollTop" >< i class = "fa fa-angle-double-up" > |
페이지 본문에서 모두 닫는 태그 앞의 같은 위치에 있습니다.
버튼을 부드럽게 표시하고 숨기기 위해 600밀리초의 속도로 .fadeIn() 및 .fadeOut() 함수를 사용합니다. 페이지 상단까지의 스크롤 속도는 500밀리초로 설정되어 있습니다.
| < link href= "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel= "stylesheet" type= "text/css" > |
Font Awesome을 연결한 후 이를 HTML 코드에서 사용할 수 있습니다. 또는 js의 경우처럼 특수 클래스, 기본 fa 및 특정 유형의 아이콘에 대한 클래스를 사용하여 사용할 수 있습니다. 이 경우에는 fa-angle-double-up입니다. . 웹사이트에서 특정 아이콘의 클래스를 확인할 수 있습니다.
아이콘 컨테이너의 모양, 배경 크기 및 색상, 위치, 글꼴 색상 및 크기 등은 모두 선택기에 초점을 맞춰 CSS에서 직접 결정됩니다.scrollTop i
| /* 버튼 본체, 위치 및 전환 효과 형성 */ .scrollTop ( /* 기본적으로 숨겨짐 */ display : none ; /* 둥근 모서리 */ -webkit-border-radius: 100% ; -moz-border-radius: 100% ; -ms-border-radius: 100% ; border-radius : 100% ; /* 버튼 위치 고정 */ position : 고정 ; /* 버튼 크기 */ width : 60px ; height : 60px ; /* 버튼 위치 * / 오른쪽: 1rem ; 아래쪽: 1rem ; /* 커서 보기 */ 커서: 포인터 ; /* 두 버튼 상태 간의 전환 효과 */ -webkit-transition: 아래쪽 0.2s 큐빅 베지어(0.42 , 0 , 0.58 , 1 ) ; -moz-transition: 하단 0.2초 3차 베지어(0.42, 0, 0.58, 1) ; -ms-transition: 하단 0.2초 3차 베지어(0.42, 0, 0.58, 1) ; -o-전환: 하단 0.2 s 큐빅 베지어 (0.42 , 0 , 0.58 , 1 ) ; 전환 : 하단 0.2s 큐빅 베지어 (0.42 , 0 , 0.58 , 1 ) ) /* 마우스 오버 시 버튼을 위로 이동 */ .scrollTop : hover ( 하단 : 2rem ) / * 추가 버튼 디자인 요소 */ .scrollTop : 이전 , .scrollTop : 이후 ( content : "" ; 상단: 0; 왼쪽: 0; 배경색 : #766DCC ; 너비: 60px; 높이: 60px; -웹킷-국경-반경: 100% ; -moz-경계-반경: 100% ; -ms-경계-반경: 100% ; 테두리 반경 : 100% ; -webkit-animation-fill-mode: 둘 다; -moz-animation-fill-mode: 둘 다 ; 애니메이션 채우기 모드: 둘 다; 위치: 절대; 불투명도: 0; ) /* 애니메이션의 이름, 유형 및 속도를 정의합니다 llya:before */ .scrollTop : before ( background-color : #736cad ; -webkit-animation: clickMe 1.8s 333ms Infiniteeasy-out; -moz-animation: clickMe 1.8s 333ms Infiniteeasy-out; animation : clickMe 1.8s 333ms Infiniteeasy-out ) /* 애니메이션의 이름, 유형 및 속도 정의 llya:after */ .scrollTop : after ( -webkit-animation: clickMe 1.8s 777ms 무한 완화; - moz-animation: clickMe 1.8s 777ms 무한 완화; 애니메이션: clickMe 1.8s 777ms 무한 완화 ) /* 아이콘 모양 형성 */ .scrollTop i ( 너비: 30px ; 높이: 30px ; 디스플레이: 블록 ; 배경: rgba(28, 144, 243, 0.61); 색상: #fff; 텍스트 정렬: 중앙; 줄 높이: 30px; 글꼴 크기: 1.3rem; 배경 크기: 12px; - webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; border-radius: 100%; 위치: 절대; 왼쪽: 15px; 위쪽: 15px; z-index : 100 ) /* 애니메이션 */ @-webkit-keyframes clickMe ( 0% ( opacity : 0 ; -webkit-transform: scale ( 0 ) ) 5% ( opacity : 1 ) 100% ( opacity : 0 ) ) @-moz-keyframes clickMe ( 0% ( 불투명도 : 0 ; -moz-transform: scale ( 0 ) ) 5% ( 불투명도 : 1 ) 100% ( 불투명도 : 0 ) @keyframes clickMe ( 0% ( 불투명도 : 0 ; -webkit-transform: 규모(0 ) ; -moz-transform: 규모(0 ) ; -ms-transform: 규모(0 ) ; -o-transform: 규모(0 ) ; 변환: 규모(0 ) ) 5% ( 불투명도: 1) 100% (불투명도: 0)) |
/* 버튼 본체, 위치 및 전환 효과 형성 */ .scrollTop ( /* 기본적으로 숨겨짐 */ display: none; /* 둥근 모서리 */ -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; border-radius: 100%; /* 버튼 위치 고정 */ 위치: 고정; /* 버튼 크기 */ width: 60px; height: 60px; /* 버튼 위치 * / 오른쪽: 1rem; 아래쪽: 1rem; /* 커서 보기 */ 커서: 포인터; /* 두 버튼 상태 간의 전환 효과 */ -webkit-transition: 아래쪽 0.2s 큐빅-베지어(0.42, 0, 0.58, 1) ; -moz-전환: 하단 0.2초 3차 베지어(0.42, 0, 0.58, 1); -ms-전환: 하단 0.2초 3차 베지어(0.42, 0, 0.58, 1); -o-전환: 하단 0.2 s 큐빅-베지어(0.42, 0, 0.58, 1); 전환: 하단 0.2s 큐빅-베지어(0.42, 0, 0.58, 1) ) /* 마우스 오버 시 버튼을 위로 이동 */ .scrollTop:hover ( 하단: 2rem ) / * 추가 버튼 디자인 요소 */ .scrollTop:before, .scrollTop:after ( content: ""; top: 0; left: 0; background-color: #766DCC; 너비: 60px; 높이: 60px; -웹킷-경계-반경: 100%; -moz-경계-반경: 100%; -ms-경계-반경: 100%; 테두리 반경: 100%; -webkit-animation-fill-mode: 둘 다; -moz-animation-fill-mode: 둘 다; 애니메이션 채우기 모드: 둘 다; 위치: 절대; 불투명도: 0; ) /* 애니메이션의 이름, 유형 및 속도를 정의합니다 llya:before */ .scrollTop:before ( background-color: #736cad; -webkit-animation: clickMe 1.8s 333ms Infiniteeasy-out; -moz-animation: clickMe 1.8s 333ms 무한이지 아웃; 애니메이션: clickMe 1.8s 333ms 무한이지 아웃 ) /* 애니메이션의 이름, 유형 및 속도 정의 llya:after */ .scrollTop:after ( -webkit-animation: clickMe 1.8s 777ms 무한 완화; - moz-animation: clickMe 1.8s 777ms 무한 완화; 애니메이션: clickMe 1.8s 777ms 무한 완화 ) /* 아이콘 모양 형성 */ .scrollTop i ( 너비: 30px; 높이: 30px; 디스플레이: 블록; 배경: rgba(28, 144, 243, 0.61); 색상: #fff; 텍스트 정렬: 중앙; 줄 높이: 30px; 글꼴 크기: 1.3rem; 배경 크기: 12px; - webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; border-radius: 100%; 위치: 절대; 왼쪽: 15px; 위쪽: 15px; z- index: 100 ) /* animation */ @-webkit-keyframes clickMe ( 0% ( opacity: 0; -webkit-transform: scale(0) ) 5% ( opacity: 1 ) 100% ( opacity: 0 ) ) @- moz-keyframes clickMe ( 0% ( 불투명도 : 0; -moz-transform: scale(0) ) 5% ( 불투명도: 1 ) 100% ( 불투명도: 0 ) ) @keyframes clickMe ( 0% ( 불투명도: 0; -webkit-transform: scale(0); -moz-transform : scale(0); -ms-transform: scale(0); -o-transform: scale(0); 변환: scale(0) ) 5% ( 불투명도: 1 ) 100% ( 불투명도: 0 ) )
애니메이션 자체를 고려하는 것이 남아 있습니다. 애니메이션 효과는 전체 버튼에 적용되지 않고 추가 의사 요소인 after 및:before 에 적용됩니다. CSS 애니메이션을 만들려면 이러한 요소의 스타일에 애니메이션 속성을 추가해야 합니다. 이를 통해 이름을 정의하고, 애니메이션의 가속도와 지속 시간을 조정하고, 애니메이션이 흐르는 방식에 대한 기타 세부 정보를 조정할 수 있습니다. 애니메이션의 모양은 애니메이션 프레임을 구성하는 키 집합인 @keyframes를 사용하여 구성됩니다.
이 예에서 애니메이션 이름은 clickMe , 기간: 1.8s , 지연::before의 경우 333ms, pseudo-element:after의 경우 777ms입니다. 또한 애니메이션 반복 횟수(무한 무한)와 애니메이션 완화 유형(초기 가속)을 결정합니다.
애니메이션의 임시 속성을 설정한 후에는 애니메이션의 모양을 결정하는 작업이 남아 있으며 이는 @keyframes 블록 내에서 수행됩니다. 먼저 애니메이션의 이름을 지정한 다음 중괄호 안에 해당 단계를 설명합니다. 코드 예제에서 불투명도 속성(투명도)의 프레임과 scale 함수를 사용한 변환 요소의 변환(요소의 스케일)이 사용되는 것을 볼 수 있습니다. 애니메이션 단계는 백분율을 사용하여 지정됩니다.
CSS 속성의 애니메이션은 웹킷 브라우저 @-webkit-keyframes 및 Mozilla Firefox 브라우저 @-moz-keyframes에 대해 별도로 설명되어 이러한 웹 브라우저에서 애니메이션이 잘못 표시되는 것을 방지합니다.
그게 다야. 다시 한 번, "맨 위로 가기" 버튼이 어떻게 작동하는지에 대한 실제 예를 살펴보고 필요한 경우 아카이브에 패키지되어 Y.Disk의 클라우드에 게시된 소스를 다운로드하세요.
존경하는 마음을 담아, 앤드류
사이트의 "맨 위로 가기" 버튼은 2010년부터 많은 웹사이트와 블로그에 나타나기 시작했습니다. 이 버튼이 유용하고 사용자가 사용하고 있나요? 그들은 그것을 사용하지만 많이 사용하지는 않습니다. 따라서 이 버튼은 일반적으로 사이트 가장자리 어딘가(가장 자주 오른쪽 하단)에 추가됩니다.
상단 버튼에는 세 가지 구현이 있습니다. 당연히 각각은 몇 가지 미묘함으로 더 나눌 수 있지만 세 가지 기본 아이디어가 있습니다. 우리는 그들 각각을 살펴보고 각각에 대한 평가를 내릴 것입니다.
맨 위로 돌아가기 버튼을 구현하는 방법가장 좋은 방법부터 시작하겠습니다(구현 복잡성은 중간입니다).
1. JavaScript 및 AJAX(JQuery) 기반아래 설명된 예는 이 사이트에서 구현됩니다.
이 방법을 사용하면 다음과 같은 특성을 지닌 훌륭한 버튼을 얻을 수 있습니다.
- 버튼을 누르면 페이지 상단으로 부드럽게 전환됩니다.
- 버튼은 투명해집니다.
- 버튼이 표시될 때 높이를 픽셀 단위로 설정할 수 있습니다.
지침에 따라 모든 작업을 수행하면 버튼 생성에 문제가 없습니다. 따라서 단계별 지침은 다음과 같습니다.
A. js 파일 생성
메모장을 열고(Notepad++를 권장합니다) 아래 코드를 붙여넣고 .js 확장명(예: gototop.js)으로 저장합니다.
B. 스타일 설정
스타일 파일에 다음 코드를 추가합니다(스타일 파일은 확장자가 .css인 파일입니다). 대부분의 경우 이름은 main.css 또는 style.css입니다.
top.png 대신 이미지의 전체 주소 또는 상대 주소를 입력해야 합니다. 0px 0px 및 -56px 0px 대신 오프셋을 입력해야 합니다. 또는 오프셋을 사용하지 말고 클릭하면 다른 이미지를 사용하면 됩니다.
C. 사이트에 스크립트 연결
위의 예에서는 AJAX 기술을 사용했으므로 jquery 라이브러리를 포함해야 합니다. 첫 번째 단락에서 생성한 gototop.js 파일도 포함해야 합니다.
그리고 사이트 맨 아래(body 태그 앞)에 다음 줄을 추가합니다.
이에 필요한 모든 파일을 gototop.rar 아카이브에 수집했습니다.
2. AJAX가 없는 버튼이 방법의 구현은 매우 간단합니다. 아니, 이보다 더 간단할 수는 없습니다. 게다가 이 메서드를 두 개의 하위 메서드로 나누기도 합니다.
2.1. 링크 앵커 사용사이트 상단에 일부 요소에 대한 ID를 작성합니다. 이것이 내용의 시작이기 때문에 제목으로 쓰는 것이 논리적일 것입니다. 그리고 아래에 앵커에 대한 링크를 배치할 수 있습니다. 코드는 다음과 같습니다.
... 기사 제목...이 방법의 단점은 다음과 같습니다.
- 사용자가 이미 맨 위에 있더라도 맨 위로 돌아가기 버튼은 항상 표시됩니다.
- 앵커 등록이 필요합니다. 항상 편리하지는 않을 수도 있습니다.
- 상단으로의 전환이 급격함(부드러운 움직임이 없음)
한 가지 장점이 있습니다. 스크립트를 사용할 필요가 없습니다.
2.2. 자바스크립트 사용JavaScript 방법은 이전 방법과 매우 유사합니다. 동일한 버튼이지만 이번에는 모든 페이지에 앵커를 추가할 필요가 없습니다. 코드는 다음과 같습니다.
...스타일은 예제 2.1과 동일하게 작성할 수 있습니다.
나는 방법 1을 사용하는 것이 이 시대에 매우 중요한 사용자에게 더 즐거운 시각적 효과를 주기 때문에 여전히 더 좋다고 생각합니다.
이 게시물에서는 "Top" 버튼을 만들 것입니다. 그 핵심은 사이트를 아래로 스크롤할 때 표시되고 이를 클릭하면 사용자가 현재 페이지의 상단으로 이동한다는 것입니다. 많은 것을 설명할 가치가 없다고 생각합니다. 우리 모두 많은 사이트에서 유사한 "맨 위로 가기" 버튼을 본 적이 있습니다.
"맨 위로 돌아가기" 버튼 생성 계획1. 이 버튼에 대한 html 구조를 만들어 보겠습니다.
2. 스타일을 지정해 보겠습니다. 보이지 않게 만들고 사이트 페이지 가장자리를 기준으로 오른쪽에 배치해 보겠습니다.
3. 스크롤 후 버튼을 표시하고 사용자의 "맨 위로 가기" 버튼 자체 클릭을 처리하는 스크립트를 작성해 보겠습니다.
이제 상단에 버튼을 생성하기 위한 실행 계획으로 모든 것이 명확해졌습니다. 구현을 시작해 보겠습니다. :)
1. "맨 위로 가기" 버튼에 대한 html 구조를 만들어 보겠습니다.닫는 태그 앞에 버튼 코드를 배치하세요.
2. "맨 위로 가기" 버튼 스타일저는 오른쪽 하단에 고정된 위치의 버튼을 만들기로 결정했습니다. 아이콘에 고정된 크기, 배경색 및 둥근 모서리를 지정했습니다.
또한 호버 이벤트의 스타일을 조정하고 전환 속성을 사용하여 부드러운 전환을 만들었습니다.
/* 맨 위로 돌아가기 버튼 */ #back-to-top( 위치:고정; z-index: 999; 디스플레이: 없음; 하단:70px; 오른쪽:15px; 커서:포인터; ) #맨 위로 i( 너비: 50px; 높이: 50px; 디스플레이:블록; 색상: #fff; 배경: #26ADE4; 텍스트 정렬:센터; 글꼴 크기: 16px; 줄 높이: 50px; 테두리 반경: 5px; -webkit-transition : .3s 모두; -moz-transition: .3s 모두; -ms-transition: .3s 모두; -o-transition: .3s 모두; 전환: .3s 모두; ) #맨 위로 돌아가기 i:hover(배경 :#333;)
3. "맨 위로 가기" 버튼에 대한 스크립트먼저 몇 가지 변수를 선언해 보겠습니다. 첫 번째 제한은 화면 높이의 1/3 값을 포함하며 "맨 위로 가기" 버튼이 표시되는 조건으로 사용됩니다.
두 번째 backToTop은 jQuery가 선택한 버튼을 여러 번 액세스하지 않도록 저장합니다.
Var 제한 = $(window).height()/3, $backToTop = $("#back-to-top");
버튼이 나타나고 사라지는 조건을 작성해 보겠습니다. 우리의 경우 조건은 사용자가 화면의 1/3을 스크롤했는지 여부를 확인하는 것입니다.
스크롤을 했다면 "Back to Top" 버튼이 나타나며, 그렇지 않거나 맨 위로 돌아가면 사라집니다.
$(window).scroll(function () ( if ($(this).scrollTop() > Limit) ( $backToTop.fadeIn(); ) else ( $backToTop.fadeOut(); ) ));
마지막 터치는 클릭 이벤트를 "맨 위로 가기" 버튼에 바인딩하는 것입니다. 버튼을 클릭하면 현재 페이지의 시작 부분으로 이동해야 합니다. 우리는 몇 줄의 코드로 이 작업을 수행할 것입니다:
// 클릭 시 본문을 0px로 스크롤합니다. $backToTop.click(function () ( $("body,html").animate(( scrollTop: 0 ), 1500); return false; ));
전체 코드는 다음과 같습니다
Var 제한 = $(window).height()/3, $backToTop = $("#back-to-top"); $(window).scroll(function () ( if ($(this).scrollTop() > 제한) ( $backToTop.fadeIn(); ) else ( $backToTop.fadeOut(); ) )); // 클릭 시 본문을 0px로 스크롤합니다. $backToTop.click(function () ( $("body,html").animate(( scrollTop: 0 ), 1500); return false; ));
결론이로써 우리는 "맨 위로 가기" 버튼 생성 작업을 마쳤습니다. 이는 이 게시물의 CSS 부분을 변경하여 다양화할 수 있는 옵션 중 하나일 뿐입니다.
데모 기사에서는 이 게시물에 설명된 CSS 효과를 사용했습니다.
