TWICE 페이지

먼저, 로딩 레이어가 사라지는 애니메이션을 좀 손봤습니다.

아무래도 영상이 재생되면서 로딩 레이어가 사라지는데, scale을 변경하는 애니메이션은 브라우저에 부담이 생각보다 커서, 영상 디코딩하느라 바쁠 GPU를 위해 translateX를 사용한 애니메이션으로 변경했습니다.

가사집 페이지의 스크립트도 좀 손봐뒀습니다.

예전엔 가사집에서 가사를 열 때, 해당 가사를 통째로 복사해서 다른 엘리먼트에 붙여 넣어 보여주는 좀 이상한 방식을 사용해서 가사를 표시했는데, 이젠 복사 없이 해당 가사만 펼쳐서 보여주도록 작업했습니다.

댓글 아바타

Gravatar 기본 프로필 이미지를 변경했습니다.

댓글에 본인의 홈페이지를 입력하지 않았고, 입력한 이메일의 Gravatar 아바타가 기본 이미지라면 위 사진을 표시합니다.

add_filter( 'avatar_defaults', 'defaultAvatar' );
function defaultAvatar ($avatar_defaults) {
    $myavatar = 'https://marshall-ku.com/wp-content/uploads/2019/09/feelSpecial_momo.jpg';
    $avatar_defaults[$myavatar= "ggan mo";
    return $avatar_defaults;
}

사용한 코드입니다.

구글링해보니 위 방법 말고도 기본 이미지 변경하는 방법이 꽤 있긴 있더라고요.

최근 댓글의 아바타는 지금까지 gravatar 아바타만 사용했는데, 이젠 사용자가 입력한 홈페이지가 있으면 해당 홈페이지의 파비콘(티스토리면 index.gif)을 표시하도록 변경했습니다.

인덱스 포스트

filter: blur는 정말 가끔이지만 렉이 걸려서 삭제했었는데, backdrop-filter를 걸어두고 opacity만 조절하면 렉이 사라지지 않을까 싶어 다시 한 번 시도해봤습니다.

아직까진 렉이 걸린 적이 한 번도 없지만, filter: blur도 정말 가뭄에 콩 나듯 렉이 걸리던 거라 시간을 좀 더 두고 판단해봐야 하지 싶습니다.

@supports (backdrop-filter: blur(1px)) {
    /* 지원할 때 */
}

@supports not (backdrop-filter: blur(1px)) {
    /* 지원하지 않을 때 */
}

대부분의 CSS 기술은 IE 말곤 제대로 적용돼서 신경 쓰지 않았지만, backdrop-filter는 최신 버전의 firefox에서도 작동하지 않는 기능이라, 위와 같이 지원할 때와 지원하지 않을 때 CSS를 다르게 적용되도록 해뒀습니다.

근데 분명히 MDN을 확인해보면 firefox도 지원한다고 적혀있는데, 이상하네요...

댓글 이모티콘

댓글을 달 때 조금 더 편하게 이모티콘을 넣을 수 있게 수정해보는 중입니다.

제일 오른쪽 버튼을 클릭하시면

위 창이 열립니다.

움짤(비디오긴 하지만)을 클릭하시면 창이 닫히며 댓글 창에 해당 움짤의 링크가 추가됩니다.
추후엔 조금 더 편한 첨부가 가능하도록, 예전처럼 :smile:을 입력하면 특정 이모티콘이 출력되는 것도 다시 작업해볼 예정입니다.


여담으로, 이모티콘 리스트에도 Masonry를 사용했습니다.

블로그엔 모든 이미지 로딩이 끝나면 한 번, 모든 컨텐츠 (글꼴 등)의 로딩이 끝나면 다시 한 번, 총 2번만 레이아웃을 재정렬합니다.

근데 이모티콘 리스트는 로딩 시간이 굉장히 길어서 위 방식을 사용하면 레이아웃이 제대로 잡히기까지 꽤 긴 시간이 소요돼서, 1초마다 한 번씩 레이아웃을 재정렬하고, 모든 이모티콘 로딩이 끝나면 레이아웃 재정렬을 멈추도록 해뒀습니다.

profile

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

(?)

  1. 이것 저것 많이 바뀌고 있는것 같네요 ^^

    댓글입력 클릭하면 주소가 착~~ 붙는 것도 포스팅해주세요 ^^
    이거 은근히 편하네요

    전에 만들어 주신게

    $("img").each(function() {
    $(this).wrap(""),
    $(this).parents("span").append("")
    }),
    $("img").click(function() {
    var a = $(this).parents("span").children("input");
    a.select();
    document.execCommand("copy");
    alert("copied! " + a.attr("value")),
    window.close()
    })

    요렇던데..., 어디를 손봐야 팝업에서 복사된 내용이 본문댓글에 붙을수 있는지...ㅎ

    오늘도 좋은 하루되세요 ^^

    1. https://developer.mozilla.org/ko/docs/Web/API/Window/opener

      적힌대로 윈도우A에서 window.open()으로 윈도우B를 열면, 윈도우B에서 window.opener(window 생략 가능)를 통해 윈도우A로 접근하실 수 있습니다.

    2. 이게 부모창과 자식창 모두 설정을 해야히는건가요?
      둘다해도 안되고 자식창에만 해도 안되고...
      뭐가 문제인지 모르겠네요 ㅠㅠ

    3. 자식창에서 opener를 호출하면 부모창이 호출됩니다.
      짧은 예로, opener.document.documentElement는 부모창의 html 엘리먼트를 리턴합니다.

  2. 주인장님~ 추천 버튼 만들어주셈!

    1. 그냥 기분 내기 용이겠지만 나중에 한 번 해보겠습니다 ㅋㅋㅋ

  3. https://i.imgur.com/sDP9TBr.mp4

    댓글에 기본 프로필 이미지가 변경된것도 이쁘고 홈페이지 파비콘이 나타나니 좋네요 🙂

    그리고 댓글 이모티콘 입력도 모바일에서도 쉽고 편합니다~

    https://i.imgur.com/NKWpLS4.mp4

    1. 사진만 바꿔도 뭔가 생동감 생기는 기분이고 좋더라고요. 🙂

      예전까진 복사 - 붙여 넣기를 해야 이모티콘을 쓸 수 있었는데, 이젠 클릭만 하면 끝이니 훨씬 간단해졌습니다 ㅎㅎ
      이제 이모티콘으로 쓸만한 움짤들 찾아서 업로드만 해두면 되는데...귀찮단 핑계로 계속 미루는 중입니다. 😂

      https://i.imgur.com/dMyYUgd.mp4