다른 명언
728x90
반응형
패럴렉스 효과는 웹사이트의 시각적인 효과를 증대시켜주는 역할을 합니다. 또한 사용자에게 더욱 동적이고 생동감 있는 웹사이트 경험을 제공해줄 수 있습니다. 하지만, 과도하게 사용하면 사용자에게 불편함을 줄 수 있으므로 적절히 활용하는 것이 중요합니다.
패럴랙스 효과를 사용하여 사이트를 제작 하였습니다.
완성된 화면
Skrollr
Skrollr은 자바스크립트 라이브러리 중 하나로, 스크롤 이벤트에 반응하여 웹 페이지 요소의 애니메이션을 제어할 수 있게 해줍니다. 이 라이브러리를 사용하면 스크롤 위치에 따라 웹 페이지의 요소를 동적으로 조작하여 다양한 효과를 구현할 수 있습니다.
Skrollr을 사용하기 위해서는 먼저 skrollr.js 파일을 다운로드하고 웹 페이지에 포함해야 합니다. 그리고 요소에 data- 속성을 사용하여 원하는 애니메이션 효과를 설정할 수 있습니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"></script>
<script type="text/javascript">
let s = skrollr.init();
window.addEventListener("scroll", () => {
let scrollTop = window.pageYOffset || window.scrollY;
document.querySelector(".scrollTop").innerText = parseInt(scrollTop);
});
</script>우선 스크립트로 패럴랙스 효과를 이용하기 쉽도록 도와주는 서버를 불러옵니다.
영역을 좌측상단에 고정하여 기준점을 잡고 스크롤을 했을 때 값이 변경되도록 합니다.
값이 변경되었을 떄 이벤트 효과를 주어 스크롤을 하였을 때 이미지가 움직이게 보이는 효과를 주었습니다.
html코드 입니다.
<body>
<div class="scrollTop"></div>
<section id="section1">
<div class="s1-text1 fixed"
data-0="font-size: 0vw; opacity: 1"
data-1000="font-size: 30vw; opacity: 1"
data-1000="font-size: 30vw; opacity: 1"
data-3000="font-size: 0vw; opacity: 0">
Bonjour</div>
<div class="s1-text2 fixed"
data-2500="font-size: 0vw; transform: translate(-50%, -50%) rotate(0deg)"
data-3000="font-size: 40vw; transform: translate(-50%, -50%) rotate(720deg)"
data-0="opacity: 1"
data-4600="opacity: 0">
Hello</div>
<div class="s1-img1 fixed"
data-3000="width: 200vw; opacity: 1"
data-4500="width: 40vw; opacity: 1"
data-4800="width: 40vw; opacity: 1"
data-6000="width: 200vw; opacity: 0"
>
<div class="s1-img1-1"
data-3800="transform: rotate(0deg)"
data-4500="transform: rotate(360deg)"
>
<div
data-3800="transform: rotate(0deg)"
data-4500="transform: rotate(360deg)"
></div>
<div
data-3800="transform: rotate(0deg)"
data-4500="transform: rotate(360deg)"
></div>
</div>
<div class="s1-img1-2"
data-3800="transform: rotate(0deg)"
data-4500="transform: rotate(360deg)"
>
<div></div>
<div></div>
</div>
<div class="s1-img1-3"
data-3800="transform: rotate(0deg)"
data-4500="transform: rotate(360deg)"
>
<div></div>
<div></div>
</div>
<div class="s1-img1-4"
data-3800="transform: rotate(0deg)"
data-4500="transform: rotate(360deg)"
>
<div></div>
<div></div>
</div>
<div class="s1-img1-5"
data-3800="transform: rotate(0deg)"
data-4500="transform: rotate(360deg)"
>
<div></div>
<div></div>
</div>
<div class="s1-img1-6"
data-3800="transform: rotate(0deg)"
data-4500="transform: rotate(360deg)"
>
<div></div>
<div></div>
</div>
<div class="s1-img1-7"
data-3800="transform: rotate(0deg)"
data-4500="transform: rotate(360deg)"
>
<div></div>
<div></div>
</div>
<div class="s1-img1-8"
data-3800="transform: rotate(0deg)"
data-4500="transform: rotate(360deg)"
>
<div></div>
<div></div>
</div>
<div class="s1-img1-9"
data-3800="transform: rotate(0deg)"
data-4500="transform: rotate(360deg)"
>
<div></div>
<div></div>
</div>
<div class="s1-img1-10"
data-3800="transform: rotate(0deg)"
data-4500="transform: rotate(360deg)"
>
<div></div>
<div></div>
</div>
</div>
<div class="s2-text fixed"
data-5000="width: 200vw; opacity: 0"
data-6500="width: 40vw; opacity: 1"
data-8000="width: 40vw; opacity: 0"
>Success is not the key to happiness. Happiness is the key to success. If you love what you are doing, you will be successful.
<br><br>Albert Schweitzer</div>
<div class="box fixed"
data-7500="width: 20vw; opacity: 0; transform: translate(-50%, -50%) rotate(0deg);"
data-10000="width: 70vw; opacity: 1; transform: translate(-50%, -50%) rotate(360deg);"
data-13000="width: 70vw; opacity: 0; transform: translate(-50%, -50%) rotate(720deg);"
></div>
<div class="s3-text fixed"
data-12500="width: 200vw; opacity: 0"
data-13500="width: 40vw; opacity: 1; transform: translate(-50%, -50%)"
data-14500="width: 500vw; opacity: 1; transform: translate(-50%, -470%)"
>hope you enjoyed my parallax website!</div>
<div class="s3-img fixed"
data-13800="width: 40vw; opacity: 0; transform: translate(-50%, -50%) rotate(0deg); background-image: url(img/academy.jpg)"
data-15500="width: 40vw; opacity: 1; transform: translate(-50%, -50%) rotate(360deg); background-image: url(img/academy.jpg)"
></div>
</section>
</body>div에 클래스를 선언하고 내부에 화면이 위치해 있는 값을 data- 에 주어 영역을 정합니다.
div 박스를 만들어 변하게 만들고 싶은 영역을 속성 data-를 사용해 스타일을 설정합니다.
각 영역에 속성을 주어 스크롤을 할 때 이미지가 변하도록 제작 하였습니다.
728x90