CSS&JS/👀Study from Copying

[CSS/JS] js의 animate로 is-soft의 카드형 투시 슬라이더 구현하기

arancia_ 2025. 6. 13. 10:41

 

 

이즈소프트 대표 홈페이지 | 20년 이상 업력 광학 솔루션 전문 기업

㈜이즈소프트는 광학 솔루션 전문 기업으로, 첨단 기술을 바탕으로 정밀측정, 공간정보, 광학계측, 자동차안전, 자동화 시스템 솔루션을 제공합니다.

is-soft.co.kr

카피할 예제 : https://is-soft.co.kr/

구현한 샘플 :

CODE PEN

See the Pen issoft 페이지 카피 by Oh Ikmyeong (@dpffpself) on CodePen.



HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>(dev)issoft 카피피</title>
    <!-- COMMON(GGD) -->
    <link href="https://www.gg.go.kr/site/gg/common/css/board_hongbo_font.css" rel="stylesheet" type="text/css" />
    <link href="https://www.gg.go.kr/site/gg/common/css/board_hongbo3.css" rel="stylesheet" type="text/css" />
    <!-- LIB -->
    <link rel="stylesheet" href="https://www.gg.go.kr/site/gg/common/assets/vendor/jquery/jquery-ui-1.12.1/jquery-ui.min.css">
    <script src="https://www.gg.go.kr/site/gg/common/assets/vendor/jquery/jquery-1.12.4.min.js"></script>
    <script src="https://www.gg.go.kr/site/gg/common/assets/vendor/jquery/jquery-ui-1.12.1/jquery-ui.min.js"></script>
    <!-- CUSTOM -->
    <link rel="stylesheet" href="./../css/style.css" />
    <script src="./../js/main.js" type="module"></script>
</head>
 
<body style="background:#353535; padding:0 15px;">
    <div class="board_hongbo3_wrap">
    </div><!-- wrap -->
</body>
 
</html>
cs

data.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
[
    {
        "title" : "01",
        "content" : "test 01"
    },
    {
        "title" : "02",
        "content" : "hello 02"
    },
    {
        "title" : "03",
        "content" : "world 03"
    },
    {
        "title" : "04",
        "content" : "example 04"
    },
    {
        "title" : "05",
        "content" : "bye 05"
    }
]
cs

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
@charset "utf-8";
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
img {
    vertical-align: middle;
}
.slide {
    outline: 3px dotted black;
    --_wid-card: 300px;
    --_hei: 350px;
    position: relative;
    width: 100%;
    max-width: calc(var(--_wid-card) * 2.5);
    height: var(--_hei);
    margin: 40px 0 40px auto;
}
.slide-item {
    overflow: visible;
    position: absolute;
    top: 0;
    left: 0;
    width: var(--_wid-card);
    height: var(--_hei);
    color: #000;
    perspective: 1200px;
    transform-style: preserve-3d;
}
/* .slide-item:not(.on) {
    left: var(--_wid-card);
    transform: translateX(calc(var(--_idx) * 12%))
} */
/* 카드 */
.slide-item-card {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: relative;
    width: var(--_wid-card);
    height: var(--_hei);
    padding: 20px;
    background: #fafafc;
    border: 2px solid black;
    border-radius: 12px;
    text-align: left;
    color: #000;
    transition:background .2s linear, color .2s linear, transform .2s linear;
}
.slide-item.on .slide-item-card {
    background: #000;
    color: yellow;
}
.slide-item:not(.on) .slide-item-card {
    transform: rotateY(-30deg);
}
/* 내용물 */
.slide-item-card-title {
    font-weight: 800;
    font-size: clamp(16px, 10vw, 50px);
}
/* ================= */
.pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: relative;
    margin-bottom: 40px;
}
.pager-info {
    position: relative;
}
.pager-info-curr {
    font-weight: bold;
}
.pager-info-all {
    position: relative;
}
.pager-info-all::before {
    content: "/";
    margin: 0 .5em;
}
cs

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
const $wrap = document.querySelector(".board_hongbo3_wrap");
 
document.addEventListener("DOMContentLoaded", async () => {
    const data = await fetch("./../data/data.json").then(res => res.json());
 
    /* 일단 그리기 */
    const $ul = document.createElement("UL");
    $ul.classList.add("slide");
    $wrap.appendChild($ul);
 
    const $$li = [];
    const $$card = [];
 
    data.forEach((item, idx) => {
        const { title, content } = item;
 
        const $li = document.createElement("LI");
        $li.classList.add("slide-item");
        if (idx === 0) { $li.classList.add("on"); }
        $li.style.setProperty("--_idx", idx);
        $li.style.zIndex = data.length + 1 - idx;
        $li.style.left = idx === 0 ? 0 : "var(--_wid-card)";
        $li.style.transform = `translateX(calc(12% * ${idx}))`;
        $ul.appendChild($li);
        $$li.push($li);
 
        const $card = document.createElement("DIV");
        $card.classList.add("slide-item-card");
        $li.appendChild($card);
        $$card.push($card);
 
        const $title = document.createElement("P");
        $title.classList.add("slide-item-card-title");
        $title.textContent = title;
        $card.appendChild($title);
 
        const $content = document.createElement("P");
        $content.classList.add("slide-item-card-content");
        $content.textContent = content;
        $card.appendChild($content);
    });
 
    /* pager */
    const $pager = document.createElement("SECTION");
    $pager.classList.add("pager");
    $wrap.appendChild($pager);
 
    let curr_idx = 0;
    const last_idx = data.length - 1;
 
    const pagerDOM = {
        btnPrev: null,
        btnNext: null,
        curr: null
    }
 
    for (let i = 0; i < 2; i++) {
        const btnType = i === 0 ? "prev" : "next";
        const $btn = document.createElement("BUTTON");
        $btn.type = "button";
        $btn.classList.add("pager-btn");
        $btn.classList.add(btnType);
        $btn.dataset.action = btnType;
        $btn.textContent = i === 0 ? "이전" : "다음";
        $pager.appendChild($btn);
        pagerDOM[i === 0 ? "btnPrev" : "btnNext"] = $btn;
 
        if (i === 0) {
            const $info = document.createElement("DIV");
            $info.classList.add("pager-info");
            $pager.appendChild($info);
 
            const $curr = document.createElement("SPAN");
            $curr.classList.add("pager-info-curr");
            $curr.textContent = 1;
            $info.appendChild($curr);
            pagerDOM.curr = $curr;
 
            const $all = document.createElement("SPAN");
            $all.classList.add("pager-info-all");
            $all.textContent = last_idx + 1;
            $info.appendChild($all);
        }
    }//for
 
    /* ================================= */
 
    /* 버튼 액션 */
    pagerDOM.btnNext.addEventListener("click", () => {
        /*  */
        pagerDOM.btnNext.disabled = true;
 
        /* idx 정리 */
        curr_idx++;
        if (curr_idx > last_idx) {
            curr_idx = 0;
        }
 
        /* pager */
        pagerDOM.curr.textContent = curr_idx + 1;
 
        /* 0. 현재 on인거 찾기 */
        const $on = $$li.shift();
 
        /* 1. on된걸 왼쪽으로 빼고, 클래스 제거 */
        $on.classList.remove("on");
        const onAni = $on.animate([
            {
                transform: "translateX(-100%)",
                opacity: 0
            }
        ], {
            duration: 500,
            fill: "both",
            easing: "linear"
        })
 
        /* 끝나면.. */
        onAni.addEventListener("finish", () => {
            /* 2. on된걸 맨 뒤로 추가 */
            $$li.push($on);
            $ul.appendChild($on);
            $on.animate([
                {
                    left: "var(--_wid-card)",
                    transform: `translateX(calc(12% * ${last_idx}))`,
                    opacity: 1
                }
            ], {
                duration: 100,
                fill: "forwards",
                easing: "steps(1,end)"
            });
 
            /* z-index */
            $on.style.zIndex = 0;
        }, { once: true });
 
        /* 3. 그 다음꺼 on 시킴 */
        const $next = $$li[0];
        $next.classList.add("on");
        const nextAni = $next.animate([
            {
                left: 0,
                transform: "translateX(0)"
            }
        ], {
            duration: 500,
            fill: "both",
            easing: "linear"
        });
 
        /* z-index */
        $next.style.zIndex = last_idx + 1;
 
        /* 4. 중간 형제들*/
        const $$sib = $$li.slice(1, last_idx);
        $$sib.forEach(($sib, idx) => {
            $sib.classList.remove("on");
            $sib.animate([
                {
                    left: "var(--_wid-card)",
                    transform: `translateX(calc(12% * ${idx + 1}))`
                }
            ], {
                duration: 500,
                fill: "both",
                easing: "linear"
            });
            $sib.style.zIndex = last_idx - idx;
        });
 
        /* 최종 다시 버튼 클릭 가능 */
        nextAni.addEventListener("finish",()=>{
            pagerDOM.btnNext.disabled = false;
        },{once:true});
    });
 
    /* ================================= */
    
    pagerDOM.btnPrev.addEventListener("click", () => {
        /*  */
        pagerDOM.btnPrev.disabled = true;
 
        /* idx 정리 */
        curr_idx--;
        if (curr_idx < 0) {
            curr_idx = last_idx;
        }
 
        /* pager */
        pagerDOM.curr.textContent = curr_idx + 1;
 
        /* 0. 현재 on인거 찾기 */
        const $on = $$li[0];
 
        /* 1. on 클래스 제거 및, 가장 마지막꺼 제외 오른쪽으로 밀기 */
        $on.classList.remove("on");
        const $$sib = $$li.slice(0, last_idx);
        $$sib.forEach(($sib, idx) => {
            $sib.classList.remove("on");
            $sib.animate([
                {
                    left: "var(--_wid-card)",
                    transform: `translateX(calc(12% * ${idx + 1}))`
                }
            ], {
                duration: 500,
                fill: "both",
                easing: "linear"
            });
 
            /* z-index */
            $sib.style.zIndex = last_idx - idx;
        });
 
        /* 2. 맨 마지막꺼 .on 붙이기*/
        const $last = $$li.pop();
        $$li.unshift($last);
        /* 3. 맨 마지막꺼 왼쪽으로 붙였다가, 화면으로 들어오게끔 */
        const lastAni = $last.animate([
            {
                opacity: 1
            },
            {
                transform: "translateX(100%)",
                opacity: 0
            },
            {
                left: 0,
                transform: "translateX(-50%)",
                opacity: 0
            },
            {
                left: 0,
                transform: "translateX(0%)",
                opacity: 1
            }
        ], {
            duration: 600,
            fill: "both",
            easing: "linear"
            // easing: "steps(1,end)"
        });
 
        lastAni.addEventListener("finish", () => {
            $last.classList.add("on");
            $last.style.zIndex = last_idx + 1;
            /* 최종 다시 버튼 클릭 가능 */
            pagerDOM.btnPrev.disabled = false;
        }, { once: true });
    });
});
cs

'CSS&JS > 👀Study from Copying' 카테고리의 다른 글

[CSS/JS] 반응형 사이트 제작시 모바일에서 자주 발생하던 이슈와 해결법 메모  (2) 2025.08.04
[JS] vanilla JS로 Serialize 구현하기  (0) 2025.06.16
[CSS,JS] 현대카드 애플페이 홈페이지 원리 카피  (0) 2025.05.20
[CSS,JS] Digital Fatigue 홈페이지 기능 카피  (0) 2025.04.29
[CSS+JS] requestAnimationFrame 으로 로딩 효과 구현하기  (0) 2025.04.10

'CSS&JS/👀Study from Copying'의 다른글

  • 현재글[CSS/JS] js의 animate로 is-soft의 카드형 투시 슬라이더 구현하기

관련글

티스토리툴바