웹 페이지를 아래로 스크롤 할 때 어떻게 그림을 변경합니까?

이 페이지에서 정말 멋진 효과를 발견했습니다. 스크롤하려면 2/3 아래로 스크롤하십시오. 아래로 스크롤하면 변경되는 연필 모양의 이미지 (다른 각도에서 여러 이미지가 표시됨)를 스크롤하면 스크롤됩니다. 링크는 여기에 https://www.fiftythree.com/pencil 웹 페이지를 아래로 스크롤 할 때 어떻게 그림을 변경합니까?

어쨌든, 아무도 내 사이트에서 그걸 구현할 수있는 방법을 말해 줄 수 있습니까? 또는 효과를 볼 수 있도록 효과의 이름.

매우 감사드립니다.

출처

2016-08-10 noob2014

직접 해봤습니까? 아무도 당신을위한 해결책을 찾지 못할 것입니다. –

안녕하세요. 마이크. 나는 포인터를 찾는 것부터 시작 해야할지조차 모른다. 이것은 무엇이라고 불 립니 까? 정확한 용어로 내가 뭘 찾고 있는지 모르면 찾아보기가 어렵습니다. – noob2014

정확한 용어가 없습니다. 사진을 회전하는 방법에 대해 알아보십시오. 그런 다음 사용자가 스크롤 할 때 무언가를 변경하는 방법을 배웁니다. 두 가지를 결합하면 해결할 수 있습니다. –

세 단계 :

스크롤 이벤트를 수신합니다.
현재 스크롤 위치를 가져옵니다.
해당 위치를 기반으로 이미지 소스를 설정하십시오.

var imageEl = document.getElementById('fake-image'); 
 

 
function getSrc(scrollPos) { 
 
    if (scrollPos < 200) return 'image one.jpg'; 
 
    if (scrollPos < 300) return 'image two.jpg'; 
 
    if (scrollPos < 400) return 'image three.jpg'; 
 
    if (scrollPos < 500) return 'image four.jpg'; 
 
    if (scrollPos < 600) return 'image five.jpg'; 
 
    return 'image six.jpg'; 
 
    } 
 

 
window.addEventListener('scroll', function() { 
 
    imageEl.textContent = getSrc(window.scrollY); 
 
});

#fake-image { 
 
    background: aliceblue; 
 
    height: 5000px; 
 
    padding-top: 50%; 
 
    font-size: 30px; 
 
}

<div id="fake-image"> 
 
    Fake image 
 
</div>

당신은 아마 이미지를 사전로드하거나, 다른 대답이 말했듯이, 사용의 표시/숨기기를하고 여러 이미지를 갖고 싶어합니다.

출처

2016-08-10 22:51:48

이것은 여전히 대단합니다. OP는 완전한 해결책을 기대해서는 안되지만 문제를 해결하는 방법에 대한 일반적인 아이디어가 있어야합니다. –

scroll 이벤트를 청취하면됩니다. 이 이벤트가

는
당신의 논리에 따라 대상 DIV의 위치 (이미지 래퍼)를 계산 트리거 할 때

은, 내부의 사진을 변경/또는 아무것도하지 ..

출처

2016-08-10 22:50:30 webdeb

크롬에서 이미지를 마우스 오른쪽 버튼으로 클릭하고 "요소 검사"라고 말하면 컨테이너 내부에 모든 이미지가 숨겨져 있음을 알 수 있습니다 (기본값은 첫 번째 이미지 제외).

아래로 스크롤하면 스크롤 이벤트와 스크롤 막대 위치의 값을 수신하는 기능이 있습니다.

위의 값에 따라 해당 이미지에 "활성"클래스 (연결된 포털에서 표시/숨기기를 의미)를 설정할 수 있습니다.

TL/DR : onscroll 이벤트를 수신하여 여러 개의 이미지가 있고 스크롤 위치에 따라 이미지를 표시하거나 숨 깁니다.

출처

2016-08-10 22:57:15

웹 페이지를 아래로 스크롤 할 때 어떻게 그림을 변경합니까?

답변

관련 문제