<![CDATA[
<p><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>집자바스크립트 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>JavaScript를 사용하여 페이지 스크롤 시 이미지 확대/축소 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>~에 의해점쟁이-2023년 11월 8일0 코멘트 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>집자바스크립트 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>JavaScript를 사용하여 페이지 스크롤 시 이미지 확대/축소 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>~에 의해점쟁이-2023년 11월 8일0 코멘트 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>자바스크립트를 사용하여 페이지 스크롤 시 이미지 확대/축소 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>자바스크립트를 사용하여 페이지 스크롤 시 이미지 확대/축소는 사용자의 웹페이지 스크롤 동작에 따라 이미지의 크기나 배율이 변경되는 웹 디자인 기술입니다. HTML CSS와 약간의 js로 구축된 이 대화형 기능은 사용자 참여를 높이고 동적 사용자 경험을 만들 수 있습니다. 오늘은 페이지 스크롤의 이미지 확대/축소 효과라는 간단한 스니펫을 공유하겠습니다. 자세한 내용은 아래 비디오 튜토리얼에 나와 있습니다. 동영상을 보시고 동영상이 마음에 드신다면 저희 채널을 구독하세요. </b></span><br><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>비디오 튜토리얼: </b></span><br><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>영상을 보셨기를 바랍니다. 웹사이트 방문자가 웹사이트에서 아래 또는 위로 스크롤하면 방문자가 아래 또는 위로 스크롤할 때 배너 이미지가 확대 또는 축소됩니다. 이 효과를 제공하는 주요 목적은 이미지에 더 많은 세부 정보를 표시하거나 시각적 효과를 제공하는 것입니다. 게다가 이 효과는 스토리텔링, 특정 요소 강조, 웹 사이트에 시각적 감각 추가 등에 사용될 수도 있습니다. </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>이 스니펫에서 확대될 이미지는 'Zoom'이라는 div로 가져왔습니다. 이 경우 웹사이트 배너 이미지라고도 할 수 있습니다. 이 div 아래에는 'main-text'라는 또 다른 div가 있습니다. 여기에는 일부 단락 텍스트와 헤더 텍스트가 포함되어 있습니다. CSS에서는 본문 요소의 여백과 패딩이 먼저 0으로 재설정됩니다. 이는 다양한 브라우저에서 일관된 레이아웃을 보장하기 위해 수행됩니다. div 요소에 너비 100%, 높이 700픽셀을 지정한 후 오버플로 속성이 숨김으로 설정됩니다. 이렇게 하면 콘텐츠가 넘쳐나는 것을 방지할 수 있습니다. 위치 속성은 상대 속성으로 설정됩니다. 이후. 이미지의 위치 속성은 절대값으로 설정됩니다. 이렇게 하면 이미지 요소가 div 요소 내에 배치될 수 있습니다. 그런 다음 텍스트에 특정 글꼴, 크기 및 줄 높이가 지정됩니다. 마지막으로 창의 현재 스크롤 위치에서 이미지 너비를 조정하는 자바스크립트 코드를 제공했습니다. </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>당신은 또한 좋아할 것입니다: </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>모달 팝업이 포함된 Bootstrap 5 이미지 갤러리 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>Materialise를 사용한 3D 추천 회전목마  </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>자바스크립트를 사용하여 페이지 스크롤에서 이미지 확대/축소 [ 소스 코드 ]: </b></span><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>이 이미지 Zoom on 페이지 스크롤 프로젝트를 생성하려면 HTML 및 CSS 파일을 생성해야 합니다. 외부 CSS 파일을 HTML에 추가합니다. 스니펫에 제공된 JS 코드에 대해 별도의 JS 파일을 생성할 수 있습니다. 우리가 했던 것처럼 HTML 파일 아래에 JS 코드를 넣을 수도 있습니다. 그런 다음 아래 코드 상자에서 코드를 복사하여 프로젝트 파일에 붙여넣습니다. 코드에 문제가 있는 경우 아래 버튼에서 코드를 다운로드하세요. </b></span><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>HTML 추가: </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><!DOCTYPE html> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><html lang="en"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  <!-- divinectorweb.com --> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><head> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta charset="UTF-8"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta name="viewport" content="width=device-width, initial-scale=1.0"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <title>zoom image on scroll</title> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <link href="<a href="https://fonts.googleapis.com/css2?family=Merienda&display=swap" target="_blank" class="ke-link">https://fonts.googleapis.com/css2?family=Merienda&display=swap</a>" rel="stylesheet"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <link href="<a href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" target="_blank" class="ke-link">https://fonts.googleapis.com/css2?family=Roboto&display=swap</a>" rel="stylesheet"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <link rel="stylesheet" href="style.css"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></head> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><body> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>     </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <div class="zoom"><img src="2.jpg"></div> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><div class="main-text"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><h2>Main Text</h2> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis doloremque, placeat tenetur minus, aspernatur dolor dolorum porro cum earum saepe aperiam suscipit ipsam. Explicabo blanditiis rem qui quaerat earum totam iusto necessitatibus, consectetur, alias labore, aliquid id dolorem eveniet officia nihil debitis fugit. Quisquam laborum nam libero ea? Deleniti, accusantium!</p> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis doloremque, placeat tenetur minus, aspernatur dolor dolorum porro cum earum saepe aperiam suscipit ipsam. Explicabo blanditiis rem qui quaerat earum totam iusto necessitatibus, consectetur, alias labore, aliquid id dolorem eveniet officia nihil debitis fugit. Quisquam laborum nam libero ea? Deleniti, accusantium!</p> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis doloremque, placeat tenetur minus, aspernatur dolor dolorum porro cum earum saepe aperiam suscipit ipsam. Explicabo blanditiis rem qui quaerat earum totam iusto necessitatibus, consectetur, alias labore, aliquid id dolorem eveniet officia nihil debitis fugit. Quisquam laborum nam libero ea? Deleniti, accusantium!</p> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis doloremque, placeat tenetur minus, aspernatur dolor dolorum porro cum earum saepe aperiam suscipit ipsam. Explicabo blanditiis rem qui quaerat earum totam iusto necessitatibus, consectetur, alias labore, aliquid id dolorem eveniet officia nihil debitis fugit. Quisquam laborum nam libero ea? Deleniti, accusantium!</p> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></div>   </b></span><br><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" target="_blank" class="ke-link">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js</a>"></script> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <script> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        $(window).scroll(function() { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            var scroll = $(window).scrollTop(); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            $(".zoom img").css({ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                width: (100 + scroll / 5) + "%" </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            }) </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        }) </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </script> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></body> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></html> </b></span><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>복사 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>CSS를 추가하세요: </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>body { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>margin: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>padding: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>div { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>height: 700px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>overflow: hidden; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>position: relative; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>div img { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>position: absolute; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>top: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>left: 50%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>transform: translate(-50%); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.main-text { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>text-align: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.main-text h2 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>font-family: 'Merienda', cursive; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>font-size: 40px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.main-text p { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>font-size: 25px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>font-family: 'Roboto', sans-serif; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>line-height: 35px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>복사 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>페이지 스크롤의 이미지 확대에 대한 오늘의 코드가 제대로 작동하기를 바랍니다. 우리 웹사이트의 나머지 150개 이상의 코드 조각을 얻으려면 우리 홈페이지에서 더 보기 버튼을 클릭하세요. 당사 웹사이트 콘텐츠가 마음에 드신다면 블로그 게시물을 다른 사람들과 공유해 주세요. 웹사이트를 방문해 주셔서 감사합니다. </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>코드 다운로드 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>자바스크립트를 사용하여 페이지 스크롤 시 이미지 확대/축소 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>자바스크립트를 사용하여 페이지 스크롤 시 이미지 확대/축소는 사용자의 웹페이지 스크롤 동작에 따라 이미지의 크기나 배율이 변경되는 웹 디자인 기술입니다. HTML CSS와 약간의 js로 구축된 이 대화형 기능은 사용자 참여를 높이고 동적 사용자 경험을 만들 수 있습니다. 오늘은 페이지 스크롤의 이미지 확대/축소 효과라는 간단한 스니펫을 공유하겠습니다. 자세한 내용은 아래 비디오 튜토리얼에 나와 있습니다. 동영상을 보시고 동영상이 마음에 드신다면 저희 채널을 구독하세요. </b></span><br><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>비디오 튜토리얼: </b></span><br><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>영상을 보셨기를 바랍니다. 웹사이트 방문자가 웹사이트에서 아래 또는 위로 스크롤하면 방문자가 아래 또는 위로 스크롤할 때 배너 이미지가 확대 또는 축소됩니다. 이 효과를 제공하는 주요 목적은 이미지에 더 많은 세부 정보를 표시하거나 시각적 효과를 제공하는 것입니다. 게다가 이 효과는 스토리텔링, 특정 요소 강조, 웹 사이트에 시각적 감각 추가 등에 사용될 수도 있습니다. </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>이 스니펫에서 확대될 이미지는 'Zoom'이라는 div로 가져왔습니다. 이 경우 웹사이트 배너 이미지라고도 할 수 있습니다. 이 div 아래에는 'main-text'라는 또 다른 div가 있습니다. 여기에는 일부 단락 텍스트와 헤더 텍스트가 포함되어 있습니다. CSS에서는 본문 요소의 여백과 패딩이 먼저 0으로 재설정됩니다. 이는 다양한 브라우저에서 일관된 레이아웃을 보장하기 위해 수행됩니다. div 요소에 너비 100%, 높이 700픽셀을 지정한 후 오버플로 속성이 숨김으로 설정됩니다. 이렇게 하면 콘텐츠가 넘쳐나는 것을 방지할 수 있습니다. 위치 속성은 상대 속성으로 설정됩니다. 이후. 이미지의 위치 속성은 절대값으로 설정됩니다. 이렇게 하면 이미지 요소가 div 요소 내에 배치될 수 있습니다. 그런 다음 텍스트에 특정 글꼴, 크기 및 줄 높이가 지정됩니다. 마지막으로 창의 현재 스크롤 위치에서 이미지 너비를 조정하는 자바스크립트 코드를 제공했습니다. </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>당신은 또한 좋아할 것입니다: </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>모달 팝업이 포함된 Bootstrap 5 이미지 갤러리 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>Materialise를 사용한 3D 추천 회전목마  </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>자바스크립트를 사용하여 페이지 스크롤에서 이미지 확대/축소 [ 소스 코드 ]: </b></span><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>이 이미지 Zoom on 페이지 스크롤 프로젝트를 생성하려면 HTML 및 CSS 파일을 생성해야 합니다. 외부 CSS 파일을 HTML에 추가합니다. 스니펫에 제공된 JS 코드에 대해 별도의 JS 파일을 생성할 수 있습니다. 우리가 했던 것처럼 HTML 파일 아래에 JS 코드를 넣을 수도 있습니다. 그런 다음 아래 코드 상자에서 코드를 복사하여 프로젝트 파일에 붙여넣습니다. 코드에 문제가 있는 경우 아래 버튼에서 코드를 다운로드하세요. </b></span><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>HTML 추가: </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><!DOCTYPE html> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><html lang="en"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  <!-- divinectorweb.com --> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><head> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta charset="UTF-8"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta name="viewport" content="width=device-width, initial-scale=1.0"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <title>zoom image on scroll</title> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <link href="<a href="https://fonts.googleapis.com/css2?family=Merienda&display=swap" target="_blank" class="ke-link">https://fonts.googleapis.com/css2?family=Merienda&display=swap</a>" rel="stylesheet"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <link href="<a href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" target="_blank" class="ke-link">https://fonts.googleapis.com/css2?family=Roboto&display=swap</a>" rel="stylesheet"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <link rel="stylesheet" href="style.css"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></head> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><body> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>     </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <div class="zoom"><img src="2.jpg"></div> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><div class="main-text"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><h2>Main Text</h2> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis doloremque, placeat tenetur minus, aspernatur dolor dolorum porro cum earum saepe aperiam suscipit ipsam. Explicabo blanditiis rem qui quaerat earum totam iusto necessitatibus, consectetur, alias labore, aliquid id dolorem eveniet officia nihil debitis fugit. Quisquam laborum nam libero ea? Deleniti, accusantium!</p> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis doloremque, placeat tenetur minus, aspernatur dolor dolorum porro cum earum saepe aperiam suscipit ipsam. Explicabo blanditiis rem qui quaerat earum totam iusto necessitatibus, consectetur, alias labore, aliquid id dolorem eveniet officia nihil debitis fugit. Quisquam laborum nam libero ea? Deleniti, accusantium!</p> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis doloremque, placeat tenetur minus, aspernatur dolor dolorum porro cum earum saepe aperiam suscipit ipsam. Explicabo blanditiis rem qui quaerat earum totam iusto necessitatibus, consectetur, alias labore, aliquid id dolorem eveniet officia nihil debitis fugit. Quisquam laborum nam libero ea? Deleniti, accusantium!</p> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis doloremque, placeat tenetur minus, aspernatur dolor dolorum porro cum earum saepe aperiam suscipit ipsam. Explicabo blanditiis rem qui quaerat earum totam iusto necessitatibus, consectetur, alias labore, aliquid id dolorem eveniet officia nihil debitis fugit. Quisquam laborum nam libero ea? Deleniti, accusantium!</p> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></div>   </b></span><br><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" target="_blank" class="ke-link">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js</a>"></script> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <script> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        $(window).scroll(function() { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            var scroll = $(window).scrollTop(); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            $(".zoom img").css({ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                width: (100 + scroll / 5) + "%" </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            }) </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        }) </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </script> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></body> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></html> </b></span><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>복사 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>CSS를 추가하세요: </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>body { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>margin: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>padding: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>div { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>height: 700px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>overflow: hidden; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>position: relative; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>div img { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>position: absolute; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>top: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>left: 50%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>transform: translate(-50%); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.main-text { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>text-align: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.main-text h2 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>font-family: 'Merienda', cursive; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>font-size: 40px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.main-text p { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>font-size: 25px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>font-family: 'Roboto', sans-serif; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>line-height: 35px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>복사 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>페이지 스크롤의 이미지 확대에 대한 오늘의 코드가 제대로 작동하기를 바랍니다. 우리 웹사이트의 나머지 150개 이상의 코드 조각을 얻으려면 우리 홈페이지에서 더 보기 버튼을 클릭하세요. 당사 웹사이트 콘텐츠가 마음에 드신다면 블로그 게시물을 다른 사람들과 공유해 주세요. 웹사이트를 방문해 주셔서 감사합니다. </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>코드 다운로드</b></span> </p>
<!-- -->
]]>
카페 게시글
♥☞HTML 코드방◈▶
JavaScript를 사용하여 페이지 스크롤 시 이미지 확대/축소
gyun님
추천 0
조회 12
23.12.19 20:14
댓글 1
다음검색
첫댓글 https://me-in-journey.com/entry/HTMLCSS-%EB%93%9C%EB%A1%AD%EB%8B%A4%EC%9A%B4-%EB%A9%94%EB%89%B4-%EB%B0%94-%EB%A7%8C%EB%93%A4%EA%B8%B0-2%EC%B0%A8-%EB%A9%94%EB%89%B4-%EB%A7%8C%EB%93%A4%EA%B8%B0-feat-position