HTML, CSS, JS 활용 - 24 ~26 강

24강 - 스크롤트리거로 탑바 배경색이 섹션의 배경색에 맞게 자동변환

• gsap
  • https://unpkg.co/gsap@3/dist/gsap.min.js
  • https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js
  • gsap.registerPlugin(ScrollTrigger);

[html]

<!-- 제이쿼리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<!-- gsap -->
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>

<header class="top-bar">
  헤더입니다.
</header>

<!-- section*10.section.section-${섹션 $} -->
<section class="section section-1">섹션 1</section>
<section class="section section-2">섹션 2</section>
<section class="section section-3">섹션 3</section>
<section class="section section-4 dark">섹션 4</section>
<section class="section section-5">섹션 5</section>
<section class="section section-6 dark">섹션 6</section>
<section class="section section-7">섹션 7</section>
<section class="section section-8 dark">섹션 8</section>
<section class="section section-9">섹션 9</section>
<section class="section section-10 dark">섹션 10</section>

 

[css]

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;  
  height: 50px;
  border: 2px solid currentcolor;
}

.top-bar.dark {
  color: white;
}

.section {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4rem;
  font-weight: bold;
}

.section.dark {
  background-color: black;
  color: white;
}

 

[js]

// scrollTrigger 플로그인 등록
gsap.registerPlugin(ScrollTrigger);

// 각 section.dark 요소마다 ScrollTigger 인스턴스를 생성
$(".section.dark").each(function (index, node) {
  ScrollTrigger.create({
    trigger: node, // 트리거 요소 설정
    start: "top top+=50", // 트리거 요소의 top이 뷰포트 top에서 50px 아래에 닿을 때 시작
    end: "bottom top", // 트리거 요소의 bottom이 뷰포트 top에 닿을 때 종료
    scrub: true, // 스크롤과 애니메이션을 동기화
    onEnter: () => $(".top-bar").addClass("dark"), // 들어올 때 .top-bar에 'dark'클래스 추가
    onLeave: () => $(".top-bar").removeClass("dark"), // 나갈 때 .top-bar에 'dark'클래스 제거
    onEnterBack: () => $(".top-bar").addClass("dark"), // 다시 들어올 때 .top-bar에 'dark'클래스 추가
    onLeaveBack: () => $(".top-bar").removeClass("dark") // 다시 나갈 때 .top-bar에 'dark'클래스 제거    
  });
});

동영상

• 2603, HTML, CSS, JS 활용, 스크롤트리거로 탑바 배경색이 섹션의 배경색에 맞게 자동변환

25강 - mix-blend-mode로 탑바 배경색이 섹션의 배경색에 맞게 자동변환

• MDN - mix-blend-mode
• CODEPEN

[html]

<header class="top_bar">
    헤더입니다.
</header>

<!-- section*10.section.section-${섹션 $} -->
<section class="section section-1">섹션 1</section>
<section class="section section-2">섹션 2</section>
<section class="section section-3 dark">섹션 3</section>
<section class="section section-4">섹션 4</section>
<section class="section section-5 dark">섹션 5</section>
<section class="section section-6">섹션 6</section>
<section class="section section-7">섹션 7</section>
<section class="section section-8 dark">섹션 8</section>
<section class="section section-9">섹션 9</section>
<section class="section section-10 dark">섹션 10</section>

[css]

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.top_bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    color: white; /* 필수 */
    border: 2px solid currentcolor;
    z-index: 100;
    mix-blend-mode: difference;
}

section {
    min-height: 100vh;
    background-color: white; /* 필수 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    font-weight: bold;
}

section.dark {
    background-color: black;
    color: white;
}

[js]

 

동영상

• 2603, HTML, CSS, JS 활용, mix-blend-mode로 탑바 배경색이 섹션의 배경색에 맞게 자동변환

26강 - 커서효과

• CODEPEN - 1부
• CODEPEN - 2부
• CODEPEN - 3부
• CODEPEN - 4부
• CODEPEN - 5부
• CODEPEN - 6부
• CODEPEN - 7부
• CODEPEN - 8부

[html]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="cursor"></div>
<div class="cursor-shadow"></div>

<div class="body-content">
    <button class="cursor-big" onclick="alert('버튼 클릭됨');">버튼</button>
    Lorem ipsum dolor sit amet, consectetur <span class="cursor-big">adipisicing</span> elit. Nisi ipsa velit ea dicta pariatur veritatis voluptate fugiat voluptatum vel minus perspiciatis autem nesciunt assumenda, debitis recusandae dignissimos distinctio illum quos?
    <button class="cursor-big" onclick="alert('버튼 클릭됨');">버튼</button>
    Lorem ipsum dolor sit amet, consectetur <span class="cursor-big">adipisicing</span> elit. Nisi ipsa velit ea dicta pariatur veritatis voluptate fugiat voluptatum vel minus perspiciatis autem nesciunt assumenda, debitis recusandae dignissimos distinctio illum quos?
    <button class="cursor-big" onclick="alert('버튼 클릭됨');">버튼</button>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ipsa velit ea dicta pariatur veritatis voluptate fugiat voluptatum vel minus perspiciatis autem nesciunt assumenda, debitis recusandae dignissimos distinctio illum quos?
    <button class="cursor-big" onclick="alert('버튼 클릭됨');">버튼</button>
    Lorem ipsum dolor sit amet, consectetur <span class="cursor-big">adipisicing</span> elit. Nisi ipsa velit ea dicta pariatur veritatis voluptate fugiat voluptatum vel minus perspiciatis autem nesciunt assumenda, debitis recusandae dignissimos distinctio illum quos?
    <button class="cursor-big" onclick="alert('버튼 클릭됨');">버튼</button>
    Lorem ipsum dolor sit amet, consectetur <span class="cursor-big">adipisicing</span> elit. Nisi ipsa velit ea dicta pariatur veritatis voluptate fugiat voluptatum vel minus perspiciatis autem nesciunt assumenda, debitis recusandae dignissimos distinctio illum quos?
    <button class="cursor-big" onclick="alert('버튼 클릭됨');">버튼</button>
    Lorem ipsum dolor sit amet, consectetur <span class="cursor-big">adipisicing</span> elit. Nisi ipsa velit ea dicta pariatur veritatis voluptate fugiat voluptatum vel minus perspiciatis autem nesciunt assumenda, debitis recusandae dignissimos distinctio illum quos?
    <button class="cursor-big" onclick="alert('버튼 클릭됨');">버튼</button>
    Lorem ipsum dolor sit amet, consectetur <span class="cursor-big">adipisicing</span> elit. Nisi ipsa velit ea dicta pariatur veritatis voluptate fugiat voluptatum vel minus perspiciatis autem nesciunt assumenda, debitis recusandae dignissimos distinctio illum quos?
</div>


<section style="width: 500px; height: 100px; background-color: black;"></section>

[css]

body {
    margin: 0;
}

* {
    cursor: none;
}

.body-content {
    background-color: white;
}

.cursor {
    position: fixed;
    width: 10px;
    height: 10px;
    top: -300px;
    left: -300px;
    border-radius: 50%;
    background-color: white;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 100;
    mix-blend-mode: difference;
}

.cursor-shadow {
    position: fixed;
    width: 20px;
    height: 20px;
    top: -300px;
    left: -300px;
    border-radius: 50%;
    background-color: white;
    pointer-events: none;
    transform: translate(-50%, -50%);
    /* transition: top .3s .1s, left .3s .1s; */
    transition: width .1s, height .1s, top .1s, left .1s;
    z-index: 99;
    mix-blend-mode: difference;
}

.need-to-cursor-big .cursor-shadow {
    width: 50px;
    height: 50px;
}

.cursor-big {
    color: red;
    cursor: pointer;
}

[js]

console.clear();

const $cursor = $('.cursor');
const $cursorShadow = $('.cursor-shadow');

$(window).mousemove(function(e) {    
    $cursor.css({
        top: e.clientY,
        left: e.clientX
    });
    
    $cursorShadow.css({
        top: e.clientY,
        left: e.clientX
    });
});

$('.cursor-big').mouseenter(function() {
    $('html').addClass('need-to-cursor-big');
});

$('.cursor-big').mouseleave(function() {
    $('html').removeClass('need-to-cursor-big');
});

동영상

• 2603, HTML, CSS, JS 활용, 커서효과