728x90
안녕하세요
오늘은 스크롤에 따라 웹페이지지 배경 색깔이 변경되는 기능을 만들어 보겠습니다.
*결과
1. $(window).scroll(function() { }
scoll 함수를 사용하여 화면이 스크롤 될 때 실행되었으면 하는 함수를 괄호 안에 정의합니다.
$(window).scroll(function() { }
2. each 함수
.each()는 선택한 요소가 여러 개일 때 각각에 대하여 반복하여 함수를 실행시킵니다.
$panel.each(function () { }
3. $this.position().top
이 코드는 부모 요소의 상단 값을 기준으로 this 요소가 위치한 상대적 거리값입니다.
if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
}4. removeClass
선택한 요소에서 클래스 값을 제거할 수 있습니다.
5. match
.match()는 정규표현식에 맞는 문자열을 찾아서 배열 객체로 반환합니다.
6. join
join()은 배열의 원소들을 연결하여 하나의 값으로 만듭니다.
$body.removeClass(function (index, css) {
return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
});7. data
data() 함수는 파라미터에 key, value 값을 입력하면 데이터를 저장하고
key만 입력하면 데이터를 읽을 수 있는 함수입니다.
$body.addClass('color-' + $(this).data('color'));8. 전체 코드
<!doctype html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Background Color Change</title>
<style>
/* Setting fade transition and default settings */
body {
color: #000;
background-color: #f4f4f4;
transition: background-color 1s ease;
}
/* panel styles */
.panel {
/* min height incase content is higher than window height */
min-height: 100vh;
display: flex;
justify-content: space-around;
align-items: center;
font-family: sans-serif;
/* outline: 10px solid hotpink; */
/* turn above on to see the edge of panels */
}
/* colours */
.color-violet {
background-color: #7A4EAB;
}
.color-indigo {
background-color: #4332CF;
}
.color-blue {
background-color: #2F8FED;
}
.color-green {
background-color: #4DCF42;
}
.color-yellow {
background-color: #FAEB33;
}
.color-orange {
background-color: #F19031;
}
.color-red {
background-color: #F2293A;
}
/* styling for demo, can ignore */
body {
text-align: center;
font-size: 120%;
line-height: 1.618;
}
h1, h2 {
font-size: 3em;
letter-spacing: -0.05em;
line-height: 1.1;
}
p {
max-width: 30em;
margin-bottom: 1.618em;
}
a {
color: #4332CF;
}
</style>
</head>
<body>
<div class="panel" data-color="white">
<div>
<h1>Magic scrolling colours</h1>
<p>Scroll to animate the background colours of the body as a full height panel becomes visible.</p>
<p>I have tried to comment the code, particurly the JavaScript, as much as possible. I hope it's clear to understand.</p>
<p>If you have any questions my twitter is <a href="https://twitter.com/daveredfern">@daveredfern</a>.</p>
</div>
</div>
<div class="panel" data-color="violet">
<h2>Violet panel</h2>
</div>
<div class="panel" data-color="indigo">
<h2>Indigo panel</h2>
</div>
<div class="panel" data-color="blue">
<h2>Blue panel</h2>
</div>
<div class="panel" data-color="green">
<h2>Green panel</h2>
</div>
<div class="panel" data-color="yellow">
<h2>Yellow panel</h2>
</div>
<div class="panel" data-color="orange">
<h2>Orange panel</h2>
</div>
<div class="panel" data-color="red">
<h2>Red panel</h2>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(window).scroll(function() {
// selectors
var $window = $(window),
$body = $('body'),
$panel = $('.panel');
// Change 33% earlier than scroll position so colour is there when you arrive.
var scroll = $window.scrollTop() + ($window.height() / 3);
$panel.each(function () {
var $this = $(this);
// if position is within range of this panel.
// So position of (position of top of div <= scroll position) && (position of bottom of div > scroll position).
// Remember we set the scroll to 33% earlier in scroll var.
if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
// Remove all classes on body with color-
$body.removeClass(function (index, css) {
return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
});
// Add class of currently active div
$body.addClass('color-' + $(this).data('color'));
}
});
}).scroll();
</script>
</body>
</html>'JavaScript' 카테고리의 다른 글
| [Javascript] 토글버튼으로 웹 배경 바꾸기 (0) | 2022.06.09 |
|---|---|
| [Javascript] 버튼클릭으로 팝업창 만들기 (0) | 2022.06.08 |
| [Javascript] 무지개 터널 효과 만들기 (0) | 2022.05.15 |
| [Javascript] 공기방울 효과 만들기 (0) | 2022.05.02 |
| [Javascript] 알림창 종류알아보기 (Alert , Confirm, Prompt) (0) | 2022.04.30 |
