ν λ²μ―€ ꡬνν΄ λ³΄κ³ μΆλ κΈ°λ₯. μ νν μ΄λ¦μ λͺ°λΌμ 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);
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()
: ν νμ΄μ§ μλλ‘ μ΄λ
.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λ‘ μ¨κΈ°κ³ , μ¬λΌμ΄λ μλμ¬μμ μΌμμ μ§ μμΌ°λ€.
// μΈν¬ λ΄μ© ν κΈ
$('.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');
trigger('click')
μΌλ‘ on ν΄λμ€κ° μλ cont-boxλ κ°μ ν΄λ¦λμ΄ μ΄λ €μλλ‘ νμλ€..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 μμΉλ‘ μμ§μμ΄ λ°λ³΅λλ ν€νλ μμΌλ‘ μ λλ©μ΄μ μ ꡬννμλ€.