박지연의 코딩이야기

https://codepen.io/qwer273/pen/bGNOJBY

스크롤시 내릴 때에는 헤더가 사라지고 올릴 때는 생기는 헤더입니다.

https://codepen.io/qwer273/pen/gOxpWaj

로딩이 늦어질 때 미리 뜨는 로딩페이지입니다 :)

홈페이지 HTML a태그로 링크 삽입 시 보통 링크가 없을 때는

<a href="#">사이트1</a> #을 통해서 많이 나타냅니다.

이러한 경우 a태그 클릭 시 자동으로 맨위로 이동하게 됩니다. 

이것을 방지하기 위해서는 아래 제이쿼리 코드를 넣어주게 되면

클릭 시 위로 올라가는 것을 방지할 수 있습니다.

//첫번째방법
// $("a").click(function() {
//     if ($(this).attr("href") == "#") {
//         return false;
//     }
// });

//두번째방법
$("a").click(function(e){
    e.preventDefault();
});

https://codepen.io/qwer273/pen/GRMrNZj

오늘은 팝업창에 대해서 배워보겠습니다.

팝업창은 광고용으로 많이 쓰이기때문에 알아두면 좋아요

먼저 팝업창을 만들기 위해서 필요한 것은 html , css , js 입니다.

저는 버튼을 누르면 튀어나오는 팝업창을 만들어볼거예요

만드는 순서

1. 먼저 누르는 버튼을 만들어준다.

2. 튀어나오는 팝업창과 뒤에 어두운 검정배경을 만들어준다.

3. 튀어나와야하는 팝업창과 검정배경을 display: none;하여 안보이도록 한다.

4. js를 활용하여 버튼을 누르면 팝업창이 뜨도록 설정한다. 

** 자바스크립트 코드(괄호안에 요소만 바꾸어서 사용하시면 됩니다.)

//버튼을 클릭하면 팝업창과 검정배경이 dispaly:block이 되어나타난다.

$('button').click(function(){
    $('.popup-1,.popup-bg').css('display','block');
    $('html').addClass('no-scroll');
});

// btn-close를 누르면 팝업창과 검정배경이 다시 display:none;이 된다.

$('.popup-1 > .head > .btn-close').click(function(){
    $('.popup-1,.popup-bg').css('display','none');
    $('html').removeClass('no-scroll');
});

See the Pen 팝업창 by 박지연 (@qwer273) on CodePen.

안녕하세요 오늘은 애니메이션에 대해서 배워보겠습니다.

오늘은 오른쪽에서 갑자기 글자가 밀고들어오는 움직이는 애니메이션을 만들어볼게요

먼저 animation 속성에 대해서 알아보겠습니다.

애니메이션을 적용하는 방법은 먼저[ @keyframes: 지정한 이름] 를 활용해서 효과를 먼저 만들어주면 됩니다.

저는 옆에서 밀고 들어오는 애니메이션을 적용하기 위해서  animation을 이름으로 해서

magin-left 와 width로 설정해보겠습니다.

@keyframes animation{
    0%{
        margin-left:100%;
        width:300%;
    }
    100%{
        font-size: 300%;
        margin-left:0;
        width:100%;
    }

}

0% ~ 100% 는 내가 설정해놓은 애니메이션 시간이 만약 3초라면 3초가 되기까지를 퍼센트로 나타낸다고 보면됩니다.

만약 50%에서 width:100%로 설정했다면 1.5초 지점에서 width:100%효과를 나타내줘 라는 뜻입니다.

See the Pen 글자밀고나오기 에니메이션 by 박지연 (@qwer273) on CodePen.

이제 애니메이션을 만들었다면 적용하고 싶은 태그에다가 적용시켜줘야합니다.

css로 스타일을 애니메이션으로 적용을 시켜주면 되는데 그러기 위해서 애니메이션 스타일을 지정해주는

css속성에는 무엇이 있는지 알아보겠습니다.

먼저 지정하기위해서 animation:지정된 이름 설정시간 ; 을 사용하여 지정해주면 적용이 되는 것을 볼 수 있습니다.

2s는 2초로 애니메이션을 실행하라는 뜻입니다.

See the Pen 글자밀고나오기 에니메이션 by 박지연 (@qwer273) on CodePen.

그런데 너무 매끄럽지않게 실행됩니다. 그래서 반대로도 실행되어 매끄럽게 왔다갔다 할 수 있게 

애니메이션이 끝났을 때 반대방향으로 이동하도록  animation-direction 속성을 alternate로 지정해보겠습니다.

See the Pen 글자밀고나오기 에니메이션 by 박지연 (@qwer273) on CodePen.

이번에는 한번만 실행되기때문에 여러번 실행되도록 animation-iteration-count: 숫자 or infinite(무한)을

지정하여 적용해보겠습니다.

See the Pen 글자밀고나오기 에니메이션 by 박지연 (@qwer273) on CodePen.

이밖에도 더 다양한 에니메이션 속성들이 있어서 다양한 에니메이션 지정이 가능합니다.

정말 간단하지않나요??

여기까지 에니메이션 효과를 알아보았습니다.

See the Pen 비비엔느 메인사이트 최종완성 by 박지연 (@qwer273) on CodePen.

상단박스의 코드펜로고를 클릭하시면 더 자세히 보실 수 있습니다.