Portfolio

[Ideas]

한 마디 vs 배운 점

네컷 만화 → 만화를 그릴 거면 네 컷 정도로 조금만 그리는 것이 좋을 것 같다.

뒷 모습을 어떻게 효과적으로 표현할지

뒷 모습을 마주하게 된 과정 정도 표현하는 것도 좋을 듯

뒷 모습 그림을 엽서로 표현 → 편지지 열어보는 과정 → 편지 열면 결과 나오게

[ToDo]

이미지 커지게 하기 코드 분석


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Hover Effect</title>
    <style>
        body {
            display: flex;
            justify-content: space-around; /* 이미지를 왼쪽과 오른쪽에 배치 */
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        img {
            transition: transform 0.2s;
        }
        .left img:hover {
            transform: scale(2.1); -> 이미지 크기 확대하는 부분
            transform-origin: left; -> 이 부분을 조정하면 이미지가 확대 되는 듯
        }
        .right img:hover {
            transform: scale(2.1);
            transform-origin: right;
        }
    </style>
</head>
<body>
    <div class="left">
        <img src="https://via.placeholder.com/300" alt="Placeholder Image Left">
    </div>
    <div class="right">
        <img src="https://via.placeholder.com/300" alt="Placeholder Image Right">
    </div>
</body>
</html>

이미지가 기울어진 상태에서의 확대?

→ 그냥 다른 액션을 취하지 않으면 정상적으로 확대 되는 것 같다!


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Hover Effect</title>
    <style>
        body {
            display: flex;
            justify-content: space-around; /* 이미지를 왼쪽과 오른쪽에 배치 */
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        img {
            transition: transform 0.2s;
            transform: rotate(20deg); /* 이미지를 20도 기울임 */
        }
        .left img:hover {
            transform: scale(4.1); /* 기울인 상태에서 확대 */
            transform-origin: left;
        }
        .right img:hover {
            transform: scale(4.1); /* 기울인 상태에서 확대 */
            transform-origin: right;
        }
    </style>
</head>
<body>
    <div class="left">
        <img src="https://via.placeholder.com/300" alt="Placeholder Image Left">
    </div>
    <div class="right">
        <img src="https://via.placeholder.com/300" alt="Placeholder Image Right">
    </div>
</body>
</html>

sliding + 이미지 커지게


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Auto Scrolling Images with Hover Effect</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 200vh; /* 스크롤을 위해 페이지 높이 설정 */
        }
        #image-container {
            position: relative;
            width: 100%;
            height: 100%;
        }
        .image {
            position: absolute;
            transition: transform 0.2s;
        }
        .image1 {
            transform: rotate(20deg);
            transform-origin: left center; /* 확대 중심을 왼쪽 중앙으로 설정 */
        }
        .image1:hover {
            transform: scale(2.5);
        }
        .image2 {
            transform: rotate(-20deg);
            transform-origin: right center; /* 확대 중심을 오른쪽 중앙으로 설정 */
        }
        .image2:hover {
            transform: scale(2.5);
        }
        .picture {
        }
    </style>
</head>
<body>
    <button id="startButton" style="position: fixed; top: 20px; left: 20px; z-index: 1000;">Start</button>
    <div id="image-container">
        <img src="images/image1.png" class="image image1" style="left: 50px; top: 800px; width: 18%; height: 10%;">
        <img src="images/image2.png" class="image image2" style="right: 50px; top: 1200px; width: 18%; height: 10%;">
        <img src="images/picture1.png" class="image picture" style="left: 200px; top: 1500px; width:90%; height: 50%;">
        <img src="images/image3.png" class="image image2" style="right: 50px; top: 1800px; width: 18%; height: 10%;">
    </div>

    <script>
        document.getElementById('startButton').addEventListener('click', () => {
            let scrollY = 0;

            function smoothScroll() {
                window.scrollTo(0, scrollY);
                scrollY += 2; // 스크롤 속도 조절
                if (scrollY < document.body.scrollHeight - window.innerHeight) {
                    requestAnimationFrame(smoothScroll);
                }
            }

            requestAnimationFrame(smoothScroll);
        });
    </script>
</body>
</html>

위치 + 크기 상대로 맞추기

내가 해야할 거

: 이미지 개수 확인해서 비율 맞추기 → 마지막에 지지직 넣기


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Auto Scrolling Images and Videos with Hover Effect</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 600vh; /* 스크롤을 위해 페이지 높이 설정 */
            visibility: hidden; /* 페이지 숨기기 */
        }
        #image-container {
            position: relative;
            width: 100%;
            height: 100%;
        }
        .media {
            position: absolute;
            transition: transform 0.4s;  /*이미지 확대되는 속도 */
        }
        .image1 {
            transform: rotate(20deg); /*이미지 각도 설정 */
            transform-origin: left center; /* 확대 중심을 왼쪽 중앙으로 설정 */
            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); /* 그림자 설정 */
        }
        .image1:hover {
            transform: scale(2.0); /*이미지 얼마나 커질지 설정 */
        }
        .image2 {
            transform: rotate(-20deg);
            transform-origin: right center; /* 확대 중심을 오른쪽 중앙으로 설정 */
            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); /* 그림자 설정 */
        }
        .image2:hover {
            transform: scale(2.0);
        }
        .image3 {
            transform: rotate(18deg);
            transform-origin: left center; /* 확대 중심을 왼쪽 중앙으로 설정 */
            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); /* 그림자 설정 */
        }
        .image3:hover {
            transform: scale(2.0);
        }
        .picture {
            transform: rotate(0deg);
            transform-origin: right center; /* 확대 중심을 오른쪽 중앙으로 설정 */
        }
        .video {
            width: 800px;
            height: auto;
            transform-origin: left center;
        }
        .video:hover {
            transform: scale(2);
        }

    </style>
</head>
<body>
    <button id="startButton" style="position: fixed; top: 20px; left: 20px; z-index: 1000;">Start</button>
    <div id="image-container">
        <!--left/right: 왼쪽/오른쪽에서 얼마나 떨어질 지, top: 위에서 얼마나 떨어질 지, -->
        <!--height는 auto로 맞추면 될 것 같다. -->
        <!--left랑 top도 상대적으로 어느정도 맞추면 될 듯 -->
        <img src="images/image1.png" class="media image1" style="left: 20%; top: 200px; width: 20%; height: auto;">
        <img src="images/picture1.png" class="media picture" style="left: 20%; top: 1700px; width:60%; height: auto;">
        <img src="images/image2.png" class="media image2" style="right: 20%; top: 1000px; width: 20%; height: auto;">
        <img src="images/image3.png" class="media image3" style="left: 20%; top: 1450px; width: 20%; height: auto;">
        <video src="videos/video1.mp4" class="media video" style="left: 20%; top: 3300px;"></video>
    </div>

    <script>
        window.onload = function() {
            document.body.style.visibility = 'visible';
        }

        document.getElementById('startButton').addEventListener('click', () => {
            let scrollY = 0;

            function smoothScroll() {
                window.scrollTo(0, scrollY);
                scrollY += 4; // 스크롤 속도 조절 하는 부분
                if (scrollY < document.body.scrollHeight) {
                    requestAnimationFrame(smoothScroll);
                }
            }

            requestAnimationFrame(smoothScroll);
        });

        // 비디오 확대 시 재생, 축소 시 일시 정지 하는 코드
        document.querySelectorAll('.video').forEach(video => {
            video.addEventListener('mouseover', () => {
                video.play();
            });
            video.addEventListener('mouseout', () => {
                video.pause();
                video.currentTime = 0;
            });
        });

    </script>
</body>
</html>

[idea]

fade 되면서 뒷 모습 +

balba.js?

[오늘 배운 디자인]

빠르게 변하는 것의 미학(약간 애니메이션 느낌)… → 산출물 참고

#27. Thinking detail pages!

[Ideas]

[ToDo]

[idea]

[오늘 배운 디자인]