이미지 배치하기

구글에 "고양이" 를 검색했을때 버튼이 나타나며 이것을 클릭했을때 현재 마우스 클릭위치를 기준으로 고양이 발바닥이 나타나는 이스터에그가 존재한다.

이것을 만들어볼거다...

기초 흐름

1. 사용할 img를 정한다

2. 클릭을 했을때 특정한 구역(box 등)에 나타난다

3. 랜덤하게 회전된 모습으로 출력한다.

 

조건

1. 이미지는 겹쳐지도록 만들어야한다.

2. 사이즈는 200,200으로 잡았다.

3. 구역의 사이즈는 동적페이지로 구성해야한다 (화면이 커져도 작아져도 그에 맞춰지도록)

 

enjoy.jsp

<section name="form-section">
	<form id="fileUploadForm" enctype="multipart/form-data">
		<input type="file" name="file" id="file" onchange="previewImage(this);" />
		<img id="preview" style="max-width: 200px; max-height: 200px;">
		<button type="button" onclick="uploadFile()">Upload</button>
	</form>
</section>

//이미지가 나올 컨테이너
<figure id="img-section"></figure>
<button id="loadImage">버튼을 클릭하세요</button>
<button id="clear">삭제하기</button>

<script> 
let uploadedImageUrl = null;

//업로드 이미지 미리보기
    function previewImage(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();  
            reader.onload = function (e) {
                uploadedImageUrl = e.target.result; // 업로드된 이미지의 URL 저장
                document.getElementById('preview').src = uploadedImageUrl;
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    
//이미지 랜덤 배치하기
    document.getElementById('loadImage').addEventListener('click', function() {
        if (uploadedImageUrl) {
            const imgSection = document.getElementById('img-section');
            const img = document.createElement('img');
            img.src = uploadedImageUrl;

            // 이미지의 크기를 200x200 픽셀로 설정
            img.style.width = '200px';
            img.style.height = '200px';
            img.style.position = 'absolute';
            //양 끝 위치에 배치시 잘릴 우려가 있어 이미지 크기만큼 제외 
            const maxTop = imgSection.clientHeight - 200; 
            const maxLeft = imgSection.clientWidth - 200; 
            img.style.top = Math.floor(Math.random() * maxTop) + 'px';
            img.style.left = Math.floor(Math.random() * maxLeft) + 'px';
            // 이미지에 랜덤한 회전 각도 적용
            const rotationDegree = Math.floor(Math.random() * 360); // 0도에서 359도 사이의 랜덤한 값
            //ES6 이전 버전이라 이렇게 작성
            //ES6 이후는 밑의 주석처리 코드로 작성
            //img.style.transform = `rotate(${rotationDegree}deg)`;
            
            img.style.transform = 'rotate(' + rotationDegree + 'deg)';
            let scale = 0;
            let opacity = 0;
            const scaleStep = 0.05;
            const opacityStep = 0.05;

            function animate() {
                scale += scaleStep;
                opacity += opacityStep;

                if (scale < 1) {
                    img.style.transform = `rotate(${rotationDegree}deg) scale(${scale})`;
                    img.style.opacity = opacity;
                    requestAnimationFrame(animate);
                } else {
                    img.style.transform = `rotate(${rotationDegree}deg) scale(1)`;
                    img.style.opacity = 1;
                }
            }

            requestAnimationFrame(animate);
            imgSection.appendChild(img);
        } else {
            alert('먼저 이미지를 업로드해주세요.');
        }
    });
    
    //삭제 애니메이션
    document.getElementById('clear').addEventListener('click', function() {
    	 var imgSection = document.getElementById('img-section');
 // 높이와 투명도를 0으로 변경
    imgSection.style.height = '0px';
    imgSection.style.opacity = '0';

    // 전환 효과가 완료되면 내용 삭제
    imgSection.addEventListener('transitionend', function() {
        imgSection.innerHTML = ''; 
        imgSection.style.height = ''; 
        imgSection.style.opacity = '1'; 
    }, { once: true }); 
    });
</script>

 

CSS

#img-section {
  width: 100vw;
  height: 100vh; /* 뷰포트 높이의 80%로 설정 */
  justify-content: center; /* 가로 중앙 정렬 */
  align-items: center;
  margin: 10px;
  position: relative; /* 이미지들이 이 요소 내에서 절대 위치를 가짐 */
    overflow: hidden; /* 내부 요소가 밖으로 넘치지 않도록 함 */
  transition: height 0.5s ease, opacity 0.5s ease; /* 높이와 투명도 변화에 대한 전환 효과 적용 */
  
}

 

결과화면