즐거운 연말 되세요 (간단한 css 공부 하나 ㅎㅎ)

§

다사다난한 한해가 가고 며칠후면 2017년이 시작됩니다. 새해에는 또 어떤 퐌타스틱한 일들이 벌어질지, 어떤 괴로움이 여러분들을 기다리고 있을지 모르지만, 항상 living in the moment, 지금 이 순간에 몰입해 사시면 행복해지실거에요.

저라고 항상 좋은일만 있겠습니까? 괴롭기도 하고, 눈이 떠지지 않을 정도로 피곤한 상태에서도 손가락 끝이 아려올정로도 css 쳐내야 할때도 있고, 멘붕오는 일도 많았지만, 다 지나고 나면 아무일도 아니더라구요. 오늘 어떤일이 있어도 내일은 다시 해가 뜹니다.

새해에도 행복하세요.

간략하게나마 css multiple background animation 에 대해 커버해보겠습니다.

http://hackya.com/lab/css/let_it_snow/

일단 이 animation 의 잘못된 점.

몇년전에 작성했던거라 지금다시 보니 각 눈의 이미지의 위치를 background-position 으로 잡았더라구요. 이런식으로.

background-position: 500px 5000px;

이게 좋은 방법이 아닌 이유는, 아래 코드에서 보시다시피 frame 에 따라 이미지의 위치를 이동시키고 있기 때문입니다.

@keyframes snow2 {
    0% {
        background-position: 0 0;
    }
    12.5% {
        background-position: 500px 5000px;
    }
    25% {
        background-position: 0 10000px;
    }
    50% {
        background-position: -1500px 20000px;
    }
    75% {
        background-position: -1000px 30000px;
    }
    100% {
        background-position: 0 40000px;
    }
}

이렇게 animation 을 구동시키면 브라우져가 각 프레임을 매번 새로 그려내야 하기 때문에 특히 모바일 브라우져에서 시간이 조금 지나면 버벅거리게 됩니다.

이런경우 이미지 위치를 background-position 으로 잡기 보다는 transform 의 translate 을 사용해서 위치를 잡는것이 브라우져의 performance 에 좋습니다.

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

이걸 저보고 지금 다시 짜라고 하면,


@keyframes snow {
	0% {
		transform: translate(0,0);
	}
	100% { 
		transform: translate(10%,250%);
	}
}

이런식으로 짤것 같습니다.

아, percentage 대신에 from 과 to 를 쓸수도 있습니다.

이런식으로.


@keyframes snow {
        from {
		transform: translate(0,0);
	}
	to { 
		transform: translate(10%,250%);
	}
}

이런 animation 이 실제 사용되는 경우가 별로 없을 것 같지만, 그러니까 실용성이 전혀 없을 것 같지만, 그렇지 않습니다. 화장품 사이트에 물방울이 아래서 위로 올라오는 animation 을 예전에 작업한 적이 있는데, 잠만요.. 지금 찾아보겠습니다.

네 이런식의 animation 은 실용성/사용빈도가 꽤 높습니다.

좋은 연말 되세요. 저는 내년에 다시 뵙겠습니다. ㅎㅎㅎ


허어얼.. 제가 짜놓은 animation 이 뭐가 잘못된건지 얘기를 하다가 정작 이게 어떻게 구연되는건지 설명을 안드렸네요.

1. background-image 는 같은 element 에 중복지정할 수 있습니다.

2. 중복지정한 각 background-image 에 다른 속도나 성격의 animation 을 지정한 것 뿐 입니다. 그리고 z-index 를 줘서 어떤 눈은 건물들 뒤로 숨어버리게 하고.

3. 눈이 내리는 모습을 현실적으로 보여주기 위해 blur 효과를 줬는데 css filter 는 IE 에서 작동하지 않습니다. css filter 는 polyfil 없냐구요? 있긴 있는데요,

https://github.com/Schepp/CSS-Filters-Polyfill

css filter 는 그냥 뽀샵에서 효과를 미리줘서 이미지를 만드시는게 속편합니다.

지금까지 제가 무슨소리를 한건지 전혀 이해되지 않으시면 아래 페이지를 우클릭해서 (save as) 다운받아 보시면 잘 이해되실 겁니다. css 코드가 이해가 안되시면 그냥 눈을 부릅뜨고 계속 쳐다보고 계세요. 그럼 이해되기 시작합니다. ㅋㅋㅋ (농담 아니라는.)

http://hackya.com/lab/css/let_it_snow/

다중 배경 이미지 에니메이션 효과 기법은 아래 글에도 자세한 설명이 되어 있습니다.

https://davidwalsh.name/multiple-background-css-animations

p.s. 경우에 따라서는 이런 animation 을 css 보다 자스 (javascript) 로 짜시는게 오히려 브라우져 메모리에 더 유리합니다. (믿기시지 않겠지만 사실입니다.) 특히 canvas 로 짜면 css 보다 더 가볍게 구동되는 놀라운 결과를 자주 보게 됩니다. canvas 배우시라는.

Rest in Peace 조지 마이클이 크리스마스날 사망했네요. 헐…

Last Christmas I gave you my heart – 작년 크리스마스에 내 심장을 주었어 라는 노래가사 처럼 심장 failure (심부전증) 으로 사망했다고 합니다.

hackya 는

Attorney, front-end developer, digital media artist, WordPress enthusiast, & a father of 4 wonderful children.

Tags: , ,

카테고리: ,

Ω

12 Comments

  • Estoque says:

    multiple background image 처음 알았을때 되게 신기했는데 IE는 지원안한다는거 알고 멘붕했던게 생각 나네요

    찾아보니 11버전 부터는 지원하고 있습니다. (빠르기도 해라 -_-)

    • Matthew says:

      그래서 저도 몇년전에 저렇게 만들어 놓고 써먹지도 못하고 있다가 이제 가장 하위 IE 버전 대응을 IE11 까지만 해줘도 되는 상황이 되어서 요즘에야 조금씩 쓰려고 하는데, 이제는 canvas 로 구현하면 메모리 측면에서 더 효율적인 animation 이 만들어 지는 경우가 많다는… . ㅠㅠㅠ

      multiple background image 보다 더 불행한 css 는 단연 preserve-3d 죠. ㅠㅠㅠㅠ

      레이아웃 전체를 3d 로 만들어 놓고 결국 써먹지도 못하고 다 버릴게 될듯.. IE 11 에서 지원을 안하거든요. work-around 이 존재하긴 하는데, IE11 에서 3D 가 작동되게 하려면 css 가 너무 복잡해져버려서 거의 사용 불가능 하게 됩니다.

  • codei says:

    아. 캔버스에는 그런거 없을까요?
    하나의 레이어를 위에 올려 놓고 영상처럼 플레이 시키는 거죠. 투명도 조절을 하고 밑에는 그림을 하나 깔아 놓고 말이죠.
    영상 플레이가 안되더라도 레이어를 위에 올려 놓고 투명도 조절이 가능 할까? 라는 의문이 생기고 있습니다.

    • Matthew says:

      canvas 두개의 곂쳐서 구현해도 되고, 아니면 canvas 위에 positon: absolute 으로 비 canvas layer 하나를 곂쳐놓고 css 효과를 줘도 되죠. (두개의 canvas 를 다시 또 하나의 canvas 로 감싸기도/합치기도 합니다.)

      canvas 는 플래시 라고 생각하시면 되요. 차이점이라면 플래시는 매우 독립적이었고 canvas 는 브라우져내의 다른 element 들과 더 긴밀한(?) interaction 이 가능하다는 점 입니다.

  • 캐나다 says:

    안녕하세요 애더럴이 한번 먹어보고 싶고 재가 주의력 결핍이 좀 있는 것 같은데 효과가 있을지 테스트해 보고 싶습니다. 전 캐나다에 있는데 함 받아볼 수 있을지여 ㅠㅠ
    저도 여러 영양제에 관심이 많고
    레이 커즈와일이 추천한 150개 영양제 중
    40여가지를 먹고 있고 B12 나이아신 p5p 알파gpc등도 먹고 있는데 영 시원찮고 속터집니다 휴
    전 미국 시민권자고.. 그런데 마약류 처방약물을 사적으로 받았다가 마약법 위반으로 잡히거나 하는 일은 없겠죠?.. 근데 의사한테 가는 건 정신과 기록 남는 게 싫어서 좀 가기 싫네여..

    • Matthew says:

      저는 콜로라도에 살고 있고, 콜로라도에 오시면 인편으로 건내 드릴 수 는 있습니다.

      애더럴을 처방 받는다고 정신과 기록이 남는 다는 얘기는 무슨 얘기인지 잘 모르겠습니다.

      저는 제 주치의에게 처방을 받고 있고 정신과 방문도 해본적이 없습니다.

      요즘은 애더럴 보다 modafinil 이 더 각광받고 있습니다.

      (물론 저는 개인적으로 사용해본 적이 없습니다.)

      modafinil 역시 원래 처방전이 필요하지만, 온라인으로 구입 가능한듯 합니다.

      http://nymag.com/news/intelligencer/modafinil-2013-4/ (댓글 보시면 구매처가 많이 나와 있네요)

      집중력 저하는 건강과 큰 관련이 있습니다. 체내 비타민 B-12 나 비타민 D 가 부족하면 집중력 과 기억력이 많이 저하 됩니다.

      B-12 는 복용해서 체내 흡수되는 양이 거의 없어서 주사를 맞으셔야 합니다. 일단 신체검사부터 받으셔야 겠죠.

      집중력 저하와 기억력 저하로 고생하신다면, 몸에 다른 문제는 없는지 건강검진 꼭 받아 보세요.

      Life hacking 을 하시려면, 건강한 식생활, 규칙적인 수면, 주기적인 운동이 동반되어야 합니다. 또, 올바른 work ethic 을 갖도록 많은 노력을 하셔야 합니다. 그냥 약하나로 내 인생의 모든게 바뀔거라 생각하시면 큰 오산 입니다.

  • joe says:

    항상 구경만 하고 갔는데 연초도 되고 해서 댓글 남깁니다. 좋은 정보 잘 보고있습니다. 제가 초보라 드릴게 없어서 이렇게 댓글로나마 인사를 드리고 갑니다.

  • Happist says:

    조금 늦었지만 새해 복 많이 받으시기 바랍니다.
    여행 다녀오고 이것 저것 저것 정리하다보니 늦어버리고 말았네요.
    지난 해 많은 관심을 보여주시고 도와주셔서 함상 감사하게 생각하고 있습니다.
    그리고 여기서도 좋은 정보 특히 다른게 생각하는 법을 배우고 갑니다.

  • korbuddy.com says:

    메튜님 새해 복 많이 받으세요!
    (본문과 관련 없는 댓글 죄송합니다 ㅠ)
    개인적인 사정으로 4달정도 블로그를 떠났었어요. ㅠㅠ
    오랫만에 접속했는데 아직도 링크를 유지해주셔서 감동 ㅠㅠ
    앞으로 자주 들릴께요!
    항상 건강하시고 행복한 하루 되시기를 바랍니다!

    • Matthew says:

      네, 일이 바쁘면 블로그에 신경쓸 겨를이 없죠. 일단 밥먹고 사는게 우선이라, 저도 몇달씩 제 홈피를 방치해야 했던 적이 있습니다.

      오랫만에 연락주셔서 무척 반갑습니다.

      Korbuddy 님도 새해 복 많이 받으세요!!

Leave a Reply

Your email address will not be published. Required fields are marked *