어느 아마추어가 손으로 jQuery로 웹사이트에 자주 있는 기능을 만든 분투기입니다.
따뜻한 눈으로 지켜 주시면 기쁩니다.

만들 때 묶는

미지의 기술을 배우는 연습도 겸해, 사용할 수 있는 메소드를 스스로 판단해, 조립할 수 있게 되는 것을 목표로서, 이번은 묶음을 마련해 작성하고 있습니다.

・ jQuery의 공식 참조 만
· 검색을 할 때는 "메소드 이름 jQuery"라는 검색 단어 만 사용할 수 있습니다.
"tab 만들기 jQuery"라는 쓰는 방법은 코드 자체가 나오기 때문에 NG
・명명 규칙은 「FLOCSS＋BEM」을 개변하여 사용.

페이지 TOP 아이콘 움직임

처음에는 이러한 페이지 TOP 아이콘의 애니메이션을 작성해 갑니다.


· 페이지를 스크롤하면 아래에서 다람쥐가 절반 나온다.
・마우스 커서를 hover하면 전신이 나온다
· 클릭하면 페이지의 TOP으로
· TOP으로 돌아가면 다람쥐가 사라집니다.

이러한 사양입니다.

사용할 코드

HTML

사용할 HTML은 다음과 같습니다.

<div class="container">
    <div class="c-pageTop">
        <a href="#" class="c-pageTop__link">
            <img src="img/jquery001/squirre.png" alt="PageTOP" class="c-pageTop__img">
        </a>
    </div>
</div>

CSS

페이지를 스크롤할 수 있도록 높이만 설정을 설정합니다.
그 외, 아이콘의 최초의 위치 등 기본적인 스타일을 설정하고 있습니다.

.container{
    height: 3000px;
}

.c-pageTop {
    position: fixed;
    bottom: -130px;
    right: 5px;
    transition: all 600ms ease;
}

.c-pageTop .c-pageTop__img {
    cursor: pointer;
}

.c-pageTop .c-pageTop__link:hover {
    opacity: 1;
}

만들어 보자!

사용할 수있는 방법을 고려하십시오

만드는 방법이 모두 검토가 되지 않았기 때문에, 우선은 레퍼런스를 오로지 읽고, 사용할 수 있는 것 같은 메소드를 찾아 보았습니다.

초보에서 사용할 수 있다고 생각한 것은
· scroll()
· click ()
이었다.

hover하면 아래에서 뇨키와 나오는 움직임을 재현할 수 있는 방법은 발견되지 않았습니다. fadeIn()도 show()도 다르다.

찾고 있으면 animate()라고 하는, 스타일을 요소에 대어 주는 메소드가 있는 것을 깨달았습니다. 만약 이것으로, 요소의 위치를 ​​하고 있는 프로퍼티를 대고 가면 움직이는 것은! ?

실패

빨리 scroll(), click(), animate()를 사용하여 작성해 보았습니다.



스크롤하면 위로 계속 올라가고 마침내 페이지에서 사라지는 페이지 TOP 아이콘의 완성입니다.
무엇을 생각했는지, animate()로 지정하는 프로퍼티를 position: absolute; bottom: +50px; 라고 써 버린 것이 원인입니다. 오로지 아래에 50px 추가됩니다.
폭소였습니다.

CSS로 변경 후의 위치를 ​​지정, jQuery로 클래스를 바꾸기

분명히 메소드로 이동하는 것보다 CSS에서 변경 후 위치를 잡고 jQuery에서 클래스를 바꿔 이동하는 방법이 있다는 것을 알았습니다.

사용하는 방법은
· addClass()
· removeClass ()
를 사용합니다.

CSS

새롭게 변경 후의 위치를 ​​지정하는 CSS를 추가했습니다.

.harf{
    bottom: -50px; 
    transition: all 600ms ease;
}

.harf:hover{
    bottom: 5px;
}

JS

페이지의 스크롤 위치에서 조건 분기해, 클래스를 바꾸도록(듯이) 했습니다.

$(function() {
    var harfOfPage = $(window).innerHeight() / 2;
    $(window).scroll(function() {
        if($(window).scrollTop() > harfOfPage){
            $(".c-pageTop").addClass('harf');
        }else{
            $(".c-pageTop").removeClass("harf");
        }
    });
});

완성

이 방법으로이 움직임을 재현 할 수있었습니다!


도중, 실패도 있었습니다만 무사히 움직이는 페이지 TOP 아이콘을 작성할 수 있었습니다!
클래스를 바꿔서 애니메이션을 만드는 것은 기본의 기본이라는 것.
앞으로도 사용해 갈 수 있을 것 같습니다.

개선점이 많은 코드입니다만, 우선은 진흙으로 움직이는 것을 작성해 보았습니다.
고마워요!