[CSS] 화면보호기처럼 돌아다니는 글래스모피즘 구현

---

일단 구현에 의의를 두고…. 이걸 적어도 되는지 의문이긴 한데

빠르게 구현하고자 하는 사람들을 위해 기록해봅니다.

아래와 같은 것을 구현 해 볼 것인데… 우선 여기서 쓰는 marquee 태그는 아주 생소하다고 생각이 들 수 있습니다.

그만큼 이젠 안쓴다는 뜻임ㅎ

 

제대로 쓰고 싶으면 자바스크립트를 써보아요~

---

간단하니, 코드에 주석으로 설명을 대신하겠습니다.

 

import styled from "styled-components";

const GlassIndex = () => {
    return (
        <GlassWrap>
            <TypoWrap>
<!— 텍스트는 그냥 원하는 만큼 만들어주세요. 2개 이상 만드실거면 h1대신 다른 태그를 사용해주세요. —>
                <h1>GLASSMORPHISM</h1>
            </TypoWrap>
<!—  Circle이 돌아다닐 영역. 이곳의 background는 transparent인데, 위의 타이포를 통과하는 느낌을 주기 위해 처리했습니다. —>
            <GlassContainer behavior="alternate" direction="down" width="100%" height="100%">
                <marquee behavior="alternate" direction="left" width="100%" height="100%">
                    <Circle />
                </marquee>
            </GlassContainer>
        </GlassWrap>
    );
};

export default GlassIndex;

const GlassWrap = styled.div`
  position: relative;
  width: 600px;
  height: 100vh;
  background: linear-gradient(to right, #4568dc, #b06ab3);
  h1 {
      color: #fff;
      font-size: 80px;
  }
`

const TypoWrap = styled.div`
  display: flex;
  flex-direction: column;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
`

const GlassContainer = styled.marquee`
  position: absolute;
  z-index: 8;
  width: 600px;
  height: 100vh;
  margin: 0 auto;
  background: transparent;
`

const Circle = styled.div`
  z-index: 999;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
`

---

언제 글이 사라질지 모르겠음...

그냥 참고만 해주세요ㅠㅎ