Js는 앵커로 부드럽게 스크롤합니다. Scrollissimo – 부드러운 스크롤 애니메이션을 위한 플러그인
최근에는 페이지를 스크롤할 때 재생되는 애니메이션이 점점 인기를 얻고 있습니다. 그러나 대부분의 브라우저는 그러한 애니메이션용으로 설계되지 않았습니다. 마우스를 사용한 페이지 스크롤은 (Firefox에서와 같이) 원활하게 발생하지 않고 단계적으로 이루어집니다. 결과적으로 페이지의 스크롤 애니메이션도 불규칙하게 재생됩니다. 제 생각에는 여기서 문제는 브라우저에 있는 것이 아니라 이러한 애니메이션을 만드는 데 사용되는 플러그인에 있습니다. 왜냐하면 그들은 갑작스런 점프를 허용하는 사람들이기 때문입니다. 나는 모든 애니메이션에 대해 애니메이션이 매끄럽고 사용자가 페이지에서 무슨 일이 일어났는지 이해할 수 있는 최대 재생 속도가 있어야 한다고 믿습니다. 당신이 내 말에 동의한다면 고양이 밑에서 갑자기 움직이지 않고 부드럽게 움직이십시오.
이 기사에서는 스크롤 제어 애니메이션을 생성하기 위한 플러그인인 Scrollissimo에 대해 설명하겠습니다. 가장 가까운 아날로그는 ScrollMagic 플러그인입니다. 공통점은 목적과 애니메이션 엔진으로 Greensock을 선택했다는 점입니다. 어떤 이유로든 아직 익숙하지 않다면 현재 일어나고 있는 모든 일을 완전히 이해하려면 이미 Habré에 게시된 Greensock에 관한 기사를 읽어야 합니다. 예를 들어 .
유사점 외에도 이러한 플러그인에는 차이점도 있습니다. 하지만 저는 특히 가장 중요한 점, 즉 부드러운 애니메이션을 강조하고 싶습니다. 이것이 근거 없는 소리로 들리지 않도록 여기에 증거가 있습니다. ScrollMagic 홈 페이지도 내 말을 확인시켜줍니다.
사용 방법 연결 Scrollissimo를 사용하려면 두 가지 작업을 수행해야 합니다. 먼저 Greensock을 연결합니다. 최소한의 필수 라이브러리(TweenLite, TimelineLite 및 CSS)만 연결할 수 있습니다.
또는 위 항목을 모두 포함하는 하나의 라이브러리를 연결하세요.
둘째, Scrollissimo 자체를 연결합니다. 라이브러리는 저장소에서 사용할 수 있습니다. 그리고 Bower 사용자의 경우 다음 명령으로 설치할 수도 있습니다.
Bower 설치 스크롤리시모
다운로드되었습니다. 이제 연결하세요.
편의를 위해 선택적으로(반드시 그런 것은 아님) jQuery를 포함할 수 있습니다. 기사 후반부에서는 가독성을 높이기 위해 이를 사용하여 코드를 작성하겠습니다.
전체 페이지를 스크롤할 때뿐만 아니라 다른 이벤트뿐만 아니라 대부분의 상황에서 페이지 스크롤 이벤트를 구독해야 하는 경우에도 Scrollissimo를 트리거할 수 있는 가능성을 제공했습니다.
$(window).scroll(function())( Scrollissimo.knock(); ));
이제 스크롤 이벤트가 발생할 때마다 Scrollissimo는 애니메이션의 현재 진행 상황을 계산하고 재생합니다.
참고: 페이지 스크롤 자체를 계산하는 데 플러그인이 필요하지 않은 경우 scrollTop 속성 값을 knock() 메서드에 전달할 수 있습니다. 예를 들어 Scrollissimo.knock(1000)은 스크롤되었음을 플러그인에 알립니다. 페이지 1000픽셀.
참고: 터치 장치를 지원하기 위해 스크롤하는 동안 페이지 정지를 방지하는 터치 어댑터 scrollissimo.touch.js가 있습니다.
그게 다입니다. 이제 직접 애니메이션을 적용할 수 있습니다! Scrollissimo는 트윈(단일 애니메이션)과 타임라인(단일 애니메이션 대기열)에 애니메이션을 적용할 수 있습니다. 쌍둥이부터 시작해보자.
가장 간단한 애니메이션 Divy라는 아름다운 빨간색 div가 있다고 가정해 보겠습니다. 그는 정말로 성장하고 싶어하지만 지금까지는 가로와 세로가 50픽셀밖에 되지 않습니다.
#Divy( 위치: 고정; 위쪽: 0; 왼쪽: 0; 높이: 50px; 너비: 50px; 배경: 빨간색; )
이미 페이지 시작 부분에서 1000픽셀 이후에는 너비가 300픽셀이 되도록 만들어 보겠습니다. 이를 위해 먼저 Greensock을 사용하여 일반 애니메이션을 수행하는 것처럼 해당 트윈을 생성합니다.
Var divyTween = new TweenLite($("#Divy"), 1000, ( 너비: 300 ));
참고: 아시다시피 Greensock의 표준 애니메이션과 유일한 차이점은 애니메이션 지속 시간을 초 단위가 아닌 픽셀(이 경우 1000) 단위로 지정한다는 것입니다.
엄청난! 남은 것은 이 쌍둥이를 Scrollissimo에게 잡아먹히게 하는 것뿐입니다.
Scrollissimo.add(divyTween, 0, 6);
이제 속도를 늦추고 이 줄을 살펴보겠습니다. 첫 번째 인수는 우리가 만든 것과 동일한 트윈입니다. 두 번째 인수는 애니메이션을 시작할 위치입니다. 우리의 경우 이는 페이지의 시작 부분(0픽셀)입니다. 세 번째 주장이 남아 있습니다. 여기에서는 Scrollissimo를 일반 플러그인과 구별하는 주요 기능을 살펴보겠습니다. 세 번째 인수는 최대 애니메이션 재생 속도입니다. 이 속도는 추상적인 무차원 단위로 측정되며 "눈으로" 선택됩니다. “3번째 매개변수를 지정하지 않으면 어떻게 되나요?”라는 질문에 바로 답해드리겠습니다. 최대 속도를 지정하지 않으면 존재하지 않습니다. 이 애니메이션은 일반 플러그인에서 재생되는 것과 동일한 방식으로 재생됩니다.
Var divyTimeline = new TimelineLite(); divyTimeline.to($("#Divy"),1000 ( 너비: 300 )); divyTimeline.to($("#Divy"), 1000, ( 높이: 300 )); Scrollissimo.add(divyTimeline, 0, 6);
결론 이것이 Scrollissimo를 사용하여 스크롤 애니메이션을 성공적으로 생성하는 데 필요한 전부입니다. 아마도 여기서 기사가 끝날 것 같습니다. 결론적으로, 플러그인은 활발하게 개발 중이며 성장하고 개선할 여지가 있다고 말씀드리겠습니다. 따라서 질문, 조언, 기능 요청 등을 기꺼이 받아들이겠습니다.레이아웃, 애니메이션!
안녕, 친애하는 친구!
오늘은 랜딩 페이지를 원하는 요소로 부드럽게 스크롤하는 방법에 대해 알려드리고자 합니다.
부드러운 스크롤(또는 부드러운 스크롤)을 사용하면 랜딩 페이지 방문자가 제안 내용과의 시각적 접촉을 잃지 않고 섹션 간에 이동할 수 있습니다.
에서 예를 볼 수 있습니다. 이 페이지에서는 '배송 주문' 버튼을 클릭하면 부드러운 스크롤이 실행됩니다.
또한 부드러운 스크롤링을 정적 메뉴와 함께 사용하는 것도 관련이 있다는 사실에 주목하고 싶습니다. 이전에 우리는 많은 양의 정보가 포함된 랜딩 페이지 탐색을 크게 단순화하고 전환율을 높일 수 있는 가이드를 게시했습니다.
따라서 하나의 요소에 대해 부드러운 스크롤을 생성하려면 자세한 그림 가이드를 사용하는 것이 좋습니다.
1) LPgenerator 비주얼 편집기에서 랜딩 페이지를 엽니다.
2) 코드를 복사하세요:
jq_144("#block-newID a").click(function(e)( // #block-newID를 클릭한 요소의 ID로 바꿉니다. e.preventDefault(); jq_144("body, html"). animate(( scrollTop: jq_144("#block-newID").offset().top ), 1000) // #block-newID를 스크롤되는 요소의 ID로 대체 ));
3) '스크립트' 도구를 사용하여 복사한 코드를 페이지에 붙여넣습니다.
코드 위치 설정: "태그 앞":
4) 버튼의 식별자를 코드에 작성합니다. 클릭하면 스크롤됩니다. 식별자는 작은따옴표 안에 기록됩니다.
5) 오른쪽의 확장 속성에서 요소의 식별자를 볼 수 있습니다.
6) 주목:클릭 시 스크롤을 유발하는 요소가 버튼이 아닌 경우 코드에서 문자 'a'를 제거합니다.
참고: 스크롤한 후 요소는 창 상단 테두리부터 패딩이 0이 됩니다. 즉, 페이지 맨 위에 있게 됩니다.
따라서 방문자를 리드 양식으로 이동하려면 양식의 첫 번째 필드 위에 있는 헤더 또는 요소의 식별자(예: 화살표)를 코드에 지정하는 것이 좋습니다.
주의: 섹션에서는 부드러운 스크롤이 작동하지 않습니다. 따라서 코드에 섹션 식별자를 지정하지 마십시오.
8) 기본적으로 지정된 요소까지의 스크롤 시간은 1000ms = 1초입니다. 스크롤 속도를 느리게 만들 수 있습니다(예: 5000ms = 5초).
코드에 필요한 시간을 입력하세요:
9) 스크립트의 위치를 확인하고 스크립트 이름을 지정하는 것을 잊지 마십시오. 그런 다음 변경 사항을 저장하고 비주얼 편집기에 랜딩 페이지를 저장합니다.
안녕하세요 친구. 웹사이트 페이지의 앵커 링크로의 원활한 전환과 같은 주제를 다루고 싶습니다. 웹 사이트에 방대한 텍스트를 작성하고, 올바른 형식을 지정하고, 스크린샷 및 기타 요소를 사용한 다음 앵커까지 부드럽게 스크롤하면 디자인이 더욱 매력적으로 보일 것입니다. 하지만 먼저 그것이 무엇인지, 어떻게 작동하는지 알아 보겠습니다. 이 목록의 항목을 클릭하면 이 페이지의 작업 예를 볼 수 있습니다.
앵커 링크란 무엇입니까? HTML 앵커 링크를 만드는 방법앵커 링크는 하이퍼텍스트 마크업 언어로 만들어집니다. HTML로 앵커를 만드는 것은 전혀 까다롭지 않습니다. 필요한 것은 이 언어에 대한 약간의 지식과 그것이 어떻게 작동하는지 이해하는 것뿐입니다. 별 문제가 없다면 별 어려움 없이 할 수 있습니다. 따라서 HTML 페이지에 앵커를 만들려면 코드에 다음과 같은 내용을 작성해야 합니다.
그리고 이 라벨이 표시된 페이지의 이 위치로 이동하려면 링크에 다음을 작성해야 합니다.
| 페이지의 레이블로 이동 |
페이지의 레이블로 이동
이 접근 방식을 사용하면 한 위치에서 다른 위치로 즉시 점프하여 전환이 수행됩니다.
앵커까지 부드러운 스크롤웹 기술의 발전으로 다양한 효과 등을 추가하여 더욱 아름답고 역동적인 웹사이트 제작이 가능해졌습니다. 그리고 콘텐츠가 아닌 다른 것에 방문자의 관심을 끌 수 있고 사이트 방문에 대한 좋은 인상을 남길 수 있다면 정말 좋습니다. 어느 정도 이는 사이트 소유자의 손에 달려 있습니다. 앵커로의 원활한 전환을 위해 라이브러리를 사용하고 아주 작은 스크립트를 연결하겠습니다.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | < script type= "text/javascript" >$(document) .ready (함수 () ( $("a" ) .click (함수 () ( elementClick = $(this ) .attr ( "href" ) ; 대상 = $(elementClick) .offset () .top ; if ($.browser .safari ) ( $("body" ) .animate ( ( scrollTop: 대상 ) , 1100 ) ; ) else ( $( "html" ) .animate ( ( scrollTop: 대상 ) , 1100 ) ; ) 거짓을 반환 ) ) ; |
$(document).ready(function() ( $("a").click(function () ( elementClick = $(this).attr("href"); 대상 = $(elementClick).offset().top ; if($.browser.safari)( $("body").animate(( scrollTop: 대상 ), 1100); )else( $("html").animate(( scrollTop: 대상 ), 1100); ) 거짓을 반환 ));
이 스크립트를 연결하는 방법에는 세 가지가 있습니다. 첫 번째는 페이지의 head 태그 사이에 삽입하는 것입니다. 두 번째는 별도의 파일에 넣어서 다음과 같이 별도로 연결하는 것입니다.
해당 페이지로 이동하려면 페이지에 라벨을 붙이세요.
둘째, 모든 앵커가 아닌 특정 앵커에 대해서만 부드러운 스크롤이 발생하도록 하려면 스크립트의 세 번째 줄을 다음과 같이 변경해야 합니다.
페이지의 레이블로 이동
제가 언급하고 싶었던 또 다른 차이점은 단순한 HTML 앵커와 달리 jQuery 앵커는 탐색할 때 브라우저의 주소 표시줄에 앵커에 대한 링크를 쓰지 않는다는 것입니다. 제가 말하는 내용을 이해하실 수 있도록 브라우저의 주소 표시줄에 앵커 링크가 어떻게 표시되는지 예를 들어 보겠습니다.
| #닻 |
좋은 오후에요. 오늘은 앵커까지 부드러운 스크롤과 같은 흥미로운 효과에 대해 말씀드리고 싶습니다. 예를 들어, 클릭하면 해당 요소로 부드럽게 스크롤되는 페이지 상단의 메뉴가 될 수 있습니다.
다른 랜딩 페이지에서도 비슷한 효과를 본 적이 있을 것입니다. 오늘은 이를 구현하는 방법을 배우겠습니다.
자바스크립트를 사용하여 앵커로 부드럽게 스크롤프로젝트 중 하나에서 작업은 메뉴 항목 중 하나를 클릭할 때 특정 요소로 부드럽게 스크롤하여 유사한 효과를 구현하는 것이었습니다.
jquery 라이브러리를 프로젝트에 연결하고 부드러운 스크롤을 담당하는 스크립트에 대한 경로를 지정하는 것부터 시작해 보겠습니다.
우리는 이것을 다루었습니다. 이제 스크롤이 발생할 라벨과 앵커를 넣어야 합니다.
건설 및 청소 작업을 위한 전문 장비 임대 프로젝트에 포함된 메뉴의 예를 말씀드리겠습니다. 소스 코드는 다음과 같습니다.
- 청소 장비
- 건설장비
- 재고
보시다시피 모든 것이 표준이며 트릭이 없습니다. 메뉴에 해당하는 블록이 이후 랜딩 페이지에 생성되었습니다. 특별한 서비스를 공개했습니다. 이러한 블록으로 원활하게 전환하는 것이 필요했습니다.
사이트에서 원하는 위치로 이동하려면 원하는 블록의 식별자에 대한 링크를 추가하는 것으로 충분합니다. 그걸하자.
- 청소 장비
- 건설장비
- 재고
이제 해당 블록에 "cleaning", "building", "actions" 식별자를 설정해야 합니다. 나에게는 다음과 같이 보였습니다.
name="cleaning" 속성에 주의하세요. 아이디와 일치해야 합니다. 스크립트 자체는 다음과 같습니다.
$(function () ( $("a.scrollto").click(function () ( let elementClick = $(this).attr("href") let Destination = $(elementClick).offset().top; $ ("html:not(:animated),body:not(:animated)").animate(( scrollTop: 목적지 ), 1100 ));
저처럼 여러 요소에 대한 스크롤을 구현해야 한다면 비슷한 방식으로 식별자를 입력하기만 하면 됩니다! 매우 편리하고 구현하기 쉬운 방법이 최고라고 말하는 것은 아니지만 작동합니다. 누구든지 이를 단순화하거나 단축하거나 어떻게든 개선할 수 있다면 매우 감사하겠습니다. 나로서는 이 효과가 많은 사람들에게 유용할 수 있다.
기사 시작 부분에 스크립트의 이름과 경로를 다음과 같이 표시했습니다.
즉, 사이트 루트에 js라는 폴더를 만들고 그 안에 perehod.js라는 파일을 넣어야 합니다. 그런 다음 스크립트 코드 자체를 삽입하십시오. 만일의 경우에 대비해 저입니다. 누군가가 이해하지 못한다면 어떨까요?
오늘은 그게 전부입니다. 이제 앵커까지 부드러운 페이지 스크롤과 같은 멋진 효과를 구현하는 방법을 알았습니다. 모두들 안녕!
추신: 새 기사에 대한 아이디어를 얻기 위해 소셜 네트워크를 통한 요청에 응답한 분들께 감사드립니다. 왜 비공개 메시지로 글을 쓰기로 결정했는지 모르겠습니다. 댓글에 남겨 두는 것이 더 낫기 때문에 다른 사람들이 더 용기 있는 사람이 이미 작성한 것을 보면 리뷰를 작성하는 것이 더 쉬울 것입니다.
이 방법에는 단점이 있습니다. 기사에서 애니메이션을 만드는 데 사용한 wow.js에서는 제대로 작동하지 않습니다. 일부 애니메이션이 재생되지 않고 그 자리에 빈 공간이 있습니다. 이 문제를 해결하는 방법을 아시는 분은 댓글이나 게시판에 적어주세요.
안녕하세요, 친애하는 친구 여러분. 아시다시피 거의 모든 브라우저에서 웹사이트 스크롤이 매우 선명하고 아름답지 않습니다. 그리고 물론, 나는 내 사이트의 스크롤을 더 부드럽게 만들고 싶습니다. 물론 이것은 너무 무리하지 않고도 할 수 있습니다. 이는 간단한 jQuery 플러그인과 몇 가지 CSS 규칙을 사용하여 수행됩니다. 이 모든 것이 어떻게 작동하는지 확인하려면 아래 데모를 살펴보는 것이 좋습니다.
Ι이제 우리 사이트에 부드러운 스크롤링을 추가해 보겠습니다.
HTML먼저 JQuery 라이브러리를 연결해야 합니다. 이미 첨부한 경우에는 이 단계를 건너뛰세요.
그런 다음 부드러운 스크롤을 담당하는 JQuery 플러그인 자체를 연결해야 하며, 이와 함께 사이트의 스크롤 막대 자체를 변경하는 별도의 CSS 규칙도 있습니다. 스크롤 막대에 대해서는 다음 강의에서 더 자세히 설명하겠지만 지금은 부드러운 스크롤만 다루겠습니다. 규칙과 플러그인은 다음과 같습니다.
모두. 이제 우리는 이미 첫 번째이자 중요한 단계를 밟았습니다. 이제 사이트의 CSS 스타일에 간단한 규칙 하나를 추가해야 합니다.
CSS html, 본문( 높이: 100%; )이는 페이지 너비가 늘어나고 높이의 100%임을 플러그인에 알리는 데 필요합니다. CSS에 이 규칙을 추가해야 합니다. 그렇지 않으면 스크롤이 작동하지 않습니다.
스크립트
이제 데모 예제를 자세히 살펴볼 것을 제안합니다. 그리고 HTML부터 시작하겠습니다.
데모의 HTML 사이트의 부드러운 스크롤 콘텐츠 안녕하세요. 사이트의 부드러운 페이지 스크롤을 보여주는 텍스트입니다. 정말 나쁘지 않은 것 같죠? :) 이 텍스트는 반복됩니다. (function($)( $(window).load(function())( $("body").mCustomScrollbar(( theme:"dark-thin" )); )); ))(jQuery);보시다시피 여기서는 위에서 설명한 모든 삽입된 스크립트 및 CSS 파일과 함께 완전히 표준 HTML5 마크업을 사용했습니다. 여기서는 설명할 것이 없다고 생각하는데, 이해가 안 되는 부분이 있으면 댓글로 꼭 물어보세요.
이제 CSS 규칙을 살펴보겠습니다.
데모 @import url(http://fonts.googleapis.com/css?family=Bad+Script&subset=latin,cyrillic)의 CSS; @import url(http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic); body( 배경색: #fff; 색상: #555; 글꼴 크기: 14px; 글꼴 계열: "잘못된 스크립트", 필기체; 여백: 0; 패딩: 0; 최소 너비: 480px; ) html, body( 높이: 100%; ) h2( 글꼴 크기: 80px; 텍스트 정렬: 센터; 글꼴 계열: "랍스터", 필기체; 글꼴 무게: 700; 글꼴 스타일: 기울임꼴; 색상: #444; ) hr( 높이: 0; 테두리 바닥: 1px 솔리드 #eee; 여백 바닥: 50px; .cont( 글꼴 크기: 30px; 여백: 0 자동 ; 패딩 상단: 20px; 너비: 50%; .text( 패딩 상단 : 15px; 하단 패딩: 20px)CSS 규칙도 매우 간단하고 그 수가 많지 않으며, 데모를 시각적으로 아름답게 보이도록 여기에 Google 글꼴을 첨부한 것도 볼 수 있습니다.