SK the Careers

liimΒ·2023λ…„ 3μ›” 27일
1

πŸ–₯ SK the Careers 클둠코딩 / μ μ‘ν˜• PC


πŸ“’ Check Point

  1. FullPage Scroll
  2. swiper μŠ¬λΌμ΄λ“œ μŠ€νƒ€μΌ
  3. toggle
  4. 마우슀 μ• λ‹ˆλ©”μ΄μ…˜


1. FullPage Scroll

πŸ‘‰ νŽ˜μ΄μ§€ λ‹¨μœ„λ‘œ 슀크둀 μž‘λ™λ˜λŠ” ν”ŒλŸ¬κ·ΈμΈ

ν•œ 번쯀 κ΅¬ν˜„ν•΄ 보고 μ‹Άλ˜ κΈ°λŠ₯. μ •ν™•ν•œ 이름을 λͺ°λΌμ„œ one page, scroll page μ΄λŸ°μ‹μœΌλ‘œ ꡬ글링 ν–ˆλŠ”λ° full page μ˜€λ‹€ πŸ˜…

πŸ”— https://alvarotrigo.com/fullPage/ko
λ‹€μš΄λ‘œλ“œ ν›„ dist ν΄λ”μ—μ„œ css와 js 파일 κ°€μ Έμ˜€κΈ°

<link rel="stylesheet" href="./assets/css/fullpage.min.css">
<script src="./assets/js/fullpage.min.js"></script>

πŸ‘‰ νŽ˜μ΄μ§€ ꡬ성

슀크둀 될 νŽ˜μ΄μ§€λ₯Ό section으둜 ꡬ성

<div class="section" id="section0">
	<!-- 메인, 직무검색 폼 νŽ˜μ΄μ§€ -->
</div>
<div class="section" id="section1">
	<!-- 멀버 μŠ¬λΌμ΄λ“œ νŽ˜μ΄μ§€ -->
</div>
<div class="section" id="section2">
	<!-- μ±„μš© 정보 ν† κΈ€ νŽ˜μ΄μ§€ -->
</div>
<footer class="section" id="section3">
	<!-- ν‘Έν„° λ‚΄μš© -->
</footer>

πŸ‘‰ 첫 νŽ˜μ΄μ§€μ—μ„œμ˜ 슀크둀

첫 νŽ˜μ΄μ§€μ—μ„œλŠ” section0 νŽ˜μ΄μ§€ λ‚΄μ—μ„œ 슀크둀이 1번 이뀄져야 ν•œλ‹€.
μ‚¬μ΄νŠΈ 접속 ν›„ μŠ€ν¬λ‘€μ„ 내리면 section1 νŽ˜μ΄μ§€κ°€ μ•„λ‹Œ 직무검색 폼이 λ‚˜μ™€μ•Όν•¨μœΌλ‘œ μŠ€ν¬λ‘€μ„ 1번 막아 폼이 λ‚˜μ˜¨ λ‹€μŒ 슀크둀 차단을 ν’€μ–΄ section1 νŽ˜μ΄μ§€κ°€ λ‚˜μ˜€λ„λ‘ setAllowScrolling을 ν™œμš©ν•˜μ˜€λ‹€.

const fullPage = new fullpage('#fullpage', {
	verticalCentered: true,

  	afterLoad: function (anchorLink, index) {

        // μ²«νŽ˜μ΄μ§€μ—λ§Œ firstλΌλŠ”κ±Έ 쀌
        if (index.index === 0) {
        	$('body').addClass('first')
        }else{
        	$('body').removeClass('first')
        }
	}
});


// 기초 μ„ΈνŒ… - 슀크둀 막기
fullPage.setAllowScrolling(false);

// 내렸을 λ•Œ 
function down(){ 
    fullPage.setAllowScrolling(false);

    $('.sc-visual').addClass('show'); //νŒμ—… λ“±μž₯
    $('.sc-visual .dim').addClass('on');  //μ–΄λ‘μš΄ bg λ“±μž₯
    $('.sc-visual .text-area').addClass('on');  //메인 ν…μŠ€νŠΈ μ‚­μ œ
    setTimeout(() => {
    	fullPage.setAllowScrolling(true); //0.5μ΄ˆλ’€ 슀크둀 ν’€κΈ°
    }, 500);
 };

// μ˜¬λ Έμ„ λ•Œ
function up(){ 
    fullPage.setAllowScrolling(false);

    $('.sc-visual').removeClass('show'); //νŒμ—… μ‚­μ œ
    $('.sc-visual .dim').removeClass('on');  //μ–΄λ‘μš΄ bg μ‚­μ œ
    $('.sc-visual .text-area').removeClass('on');  //메인 ν…μŠ€νŠΈ λ“±μž₯
    $('.sc-visual video').get(0).play();  //μ •μ§€λœ μ˜μƒ μž¬μƒ
    setTimeout(() => {
    	fullPage.setAllowScrolling(false); //0.5μ΄ˆλ’€ 슀크둀 정지
    }, 500);
};


$(window).bind('wheel', function(event){
  
	// firstλΌλŠ”κ²Œ μžˆμ„ λ•Œ = 첫 νŽ˜μ΄μ§€μ— λ„λ‹¬μ‹œμ—λ§Œ
    if($('body').hasClass('first') && !$('body').hasClass('hidden')){ 
        if (event.originalEvent.wheelDelta < 0) {
          	// 0보닀 μž‘μœΌλ©΄ 내릴 λ•Œ
            console.log(event.originalEvent.wheelDelta+'λ‚΄λ¦΄λ•Œ'); 
            down();
        }else{
          	// 0보닀 크면 올릴 λ•Œ
            console.log(event.originalEvent.wheelDelta+'μ˜¬λ¦΄λ•Œ'); 
            up();
        }
    }
});

첫 νŽ˜μ΄μ§€μ—μ„œλ§Œ wheel μ΄λ²€νŠΈκ°€ μž‘λ™λ˜λ„λ‘ 쑰건 μž‘μ„±!
슀크둀 내렸을 λ•Œμ™€ μ˜¬λ Έμ„ λ•Œ μ‹€ν–‰ν•˜λŠ” up/down ν•¨μˆ˜λ₯Ό λ§Œλ“€μ—ˆλ‹€.

setAllowScrolling

fullpage의 슀크둀 κΈ°λŠ₯을 μ‹€ν–‰/차단 ν•΄μ£ΌλŠ” κΈ°λŠ₯

  • fullPage.setAllowScrolling(false);
    μš°μ„  μŠ€ν¬λ‘€μ„ 막고 μ‹œμž‘
  • 첫(메인) νŽ˜μ΄μ§€μ—μ„œ μŠ€ν¬λ‘€μ„ 내리면 select(νŒμ—…)κ°€ 보여지고 setTimeout 으둜 0.5초 뒀에 슀크둀이 κ°€λŠ₯ν•˜κ²Œ 차단을 ν‘Όλ‹€.
  • λ‹€μ‹œ μŠ€ν¬λ‘€μ„ 올리면 setAllowScrolling(false); 슀크둀 차단, select(νŒμ—…)κ°€ 사라지고
    $('.sc-visual video').get(0).play(); λ°±κ·ΈλΌμš΄λ“œ μ˜μƒμ„ μž¬μž¬μƒμ‹œν‚¨λ‹€.

πŸ‘‰ κ³ μ • νŽ˜μ΄μ§€λ„€μ΄μ…˜

const fullPage = new fullpage('#fullpage', {
    verticalCentered: true,

    onLeave: function(origin, destination, direction){
        idx = destination.index;

      	// νŽ˜μ΄μ§€ λ„˜λ²„ μΉ΄μš΄νŒ…, bar 차였λ₯΄κ²Œ
        $('.fix-pagination .num-box .curr').html('0'+(idx+1));
        $('.fix-pagination .bar').css({height:25*(idx+1)+'%'});

      	// 2,3번째 νŽ˜μ΄μ§€μ—μ„œλŠ” κ³ μ • λ‚΄λΉ„κ²Œμ΄μ…˜μ΄ κ²€μ • λ²„μ „μœΌλ‘œ λ³΄μ—¬μ§€κ²Œ
        if(idx===1 || idx===2){
        	$('.fix-pagination').addClass('black');
        }else{
        	$('.fix-pagination').removeClass('black');
        }

      	// λ§ˆμ§€λ§‰ νŽ˜μ΄μ§€μ—μ„œλŠ” κ³ μ • λ‚΄λΉ„κ²Œμ΄μ…˜μ΄ 보이지 μ•Šκ²Œ
        if(idx === 3){
        	$('.fix-pagination').addClass('hide');
        }else{
            $('.fix-pagination').removeClass('hide');
        }
    },
});

1) νŽ˜μ΄μ§€ λ„˜λ²„ μΉ΄μš΄νŒ…
html('0'+(idx+1)) = μΈλ±μŠ€λŠ” 0λΆ€ν„° μ‹œμž‘μ΄λ‹ˆ +1을 ν•˜μ—¬ 1,2,3으둜 ν‘œν˜„λ˜κ²Œ ν•΄μ•Όν•œλ‹€.
숫자 ν‘œκΈ° 방식이 <01,02,03>μ΄λ―€λ‘œ 문자인 0을 뢙이기 μœ„ν•΄ '' λ”°μ˜΄ν‘œ μ•ˆμ— 0을 κΈ°μž¬ν•œλ‹€.
❗️('0'+idx+1) μ΄λŸ°μ‹μœΌλ‘œ μž‘μ„±ν•˜λ©΄ 연산이 λ˜μ§€ μ•Šμ•„ <01>이 μ•„λ‹Œ <001> ν˜•μ‹μœΌλ‘œ ν‘œκΈ°λœλ‹€.

2) νŽ˜μ΄μ§€λ³„ μ±„μ›Œμ§€λŠ” bar
css({height:25*(idx+1)+'%'})
bar의 cssλ₯Ό λ³€κ²½ν•œλ‹€. 첫 νŽ˜μ΄μ§€λŠ” 25%, λ‘λ²ˆμ§Έ νŽ˜μ΄μ§€λŠ” 50%, μ„Έλ²ˆμ§Έ νŽ˜μ΄μ§€λŠ” 75% μ±„μ›Œμ§€κ²Œ 수치 계산.

3) νŽ˜μ΄μ§€λ³„ λ””μžμΈ μ „ν™˜
인덱슀 0νŽ˜μ΄μ§€μ—μ„œλŠ” 기본인 white λ””μžμΈμœΌλ‘œ ν‘œν˜„λ˜κ³ 
idx === 1 || idx === 2 : 1νŽ˜μ΄μ§€μ™€ 2νŽ˜μ΄μ§€μ—μ„œλŠ” black λ””μžμΈμœΌλ‘œ ν‘œν˜„,
idx === 3 : 3νŽ˜μ΄μ§€μ—μ„œλŠ” hide둜 보여지지 μ•Šκ²Œ ν•œλ‹€.

πŸ‘‰ νŽ˜μ΄μ§€λ„€μ΄μ…˜ λ²„νŠΌ μž‘λ™

$('.fix-pagination .prev').click(function(){
    fullPage.moveSectionUp();
});
$('.fix-pagination .next').click(function(){
    fullPage.moveSectionDown();
});

moveSectionUp() : ν•œ νŽ˜μ΄μ§€ μœ„λ‘œ 이동
moveSectionDown() : ν•œ νŽ˜μ΄μ§€ μ•„λž˜λ‘œ 이동


2. swiper μŠ¬λΌμ΄λ“œ μŠ€νƒ€μΌ

πŸ‘‰ μŠ¬λΌμ΄λ“œ hover λ””μžμΈ

.sc-member .swiper-slide .slide-wrap{
    transition: transform 0.4s;
}
.sc-member .swiper-slide:hover .slide-wrap{
    transform: translateY(-40px);
}

마우슀 hover μ‹œ μœ„λ‘œ 40px μ˜¬λΌκ°€κ³ 

.sc-member .swiper-slide .hover{
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background-color: rgba(37, 70, 205, 0.7);
    backdrop-filter: blur(10px);
    z-index: 4;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}
.sc-member .swiper-slide:hover .hover{
    opacity: 1;
    visibility: visible;
}

이미지 μœ„μ— backdrop-filter둜 λΈ”λŸ¬ 처리된 νŒŒλž€μƒ‰ 배경을 μΆ”κ°€ν•˜μ˜€λ‹€.

$('.member-slide .swiper-slide').hover(function(){
    $('.member-slide').children('.info').addClass('hide');
    memberSlide.autoplay.stop()
}, function(){
    $('.member-slide').children('.info').removeClass('hide');
    memberSlide.autoplay.start()
});

κΈ°μ‘΄ ν”„λ‘œν•„ λ‚΄μš©μ΄ 보이지 μ•Šκ²Œ hide둜 숨기고, μŠ¬λΌμ΄λ“œ μžλ™μž¬μƒμ„ μΌμ‹œμ •μ§€ μ‹œμΌ°λ‹€.


3. toggle

πŸ‘‰ λ‹«νžˆκ³  μ—΄λ¦¬λŠ” toggle 슀크립트

// 인포 λ‚΄μš© ν† κΈ€
$('.cont-box .title').click(function(){
    if ($(this).hasClass('on')) {  // 열렸을 λ•Œ
        $(this).removeClass('on');
        $(this).parents('.cont-area').siblings().removeClass('on');
        $('.sub').removeClass('on');

        $(this).parent().siblings('.sub').stop().slideUp()
        $(this).parents('.cont-area').find('.cont-box .title').removeClass('on');
    } else {  // λ‹«ν˜”μ„ λ•Œ
        $(this).addClass('on'); 
        $('.sub').stop().slideUp();
        $(this).parent().siblings('.sub').removeClass('on');

        $(this).parents('.cont-area').siblings().find('.title').removeClass('on');
        $(this).parents('.cont-area').find('.sub').stop().slideDown()
    }
});

$('.cont-box.on .title').trigger('click');
  • on 클래슀 λ³΄μœ μ—¬λΆ€λ‘œ λ‹«νžˆκ³  μ—΄λ¦¬λŠ” toggle을 κ΅¬ν˜„
  • λ§ˆν¬μ—…μ— 처음 cont-boxμ—λ§Œ on 클래슀λ₯Ό λ„£μ–΄, trigger('click')으둜 on ν΄λž˜μŠ€κ°€ μžˆλŠ” cont-boxλŠ” κ°•μ œ ν΄λ¦­λ˜μ–΄ μ—΄λ €μžˆλ„λ‘ ν•˜μ˜€λ‹€.


4. 마우슀 μ• λ‹ˆλ©”μ΄μ…˜

.mouse-icon{
    z-index: 10;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: 20px; height: 28px;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../img/ic-move-mouse.png);
    animation: mouse 1.5s linear infinite;
}
@keyframes mouse {
	0% { bottom: 15px; }
	50% { bottom: 25px; }
    100% { bottom: 15px; }
}

15px μœ„μΉ˜μ—μ„œ 25px μœ„μΉ˜λ‘œ 10px μ˜¬λΌκ°„ λ’€ λ‹€μ‹œ 15px μœ„μΉ˜λ‘œ μ›€μ§μž„μ΄ λ°˜λ³΅λ˜λŠ” ν‚€ν”„λ ˆμž„μœΌλ‘œ μ• λ‹ˆλ©”μ΄μ…˜μ„ κ΅¬ν˜„ν•˜μ˜€λ‹€.

profile
Web Publisher

0개의 λŒ“κΈ€