05.13 - html 연습하기

간단한 svg로 그린 선 움직이게 하는 방법

 

stroke-dasharray: 3000px;

stroke-dashoffset: 3000px;

 

$('.smallimg li').mouseenter(function(){
    $(this).addClass('on').siblings().removeClass('on');


    let enText = $(this).find('.en').text()
    $('.bigimg .en').text(enText);

    let koText = $(this).find('.ko').text()
    $('.bigimg .ko').text(koText);

    let imgSrc = $(this).find('img').attr('src');
    $('.bigimg img').attr('src',imgSrc)
})


$(window).scroll(function(){
    let scrT = $(window).scrollTop();
    let winH = $(window).height();

    if(scrT >= winH/2){
    $('.part1line').addClass('merong');
    } else {
        $('.part1line').removeClass('merong')
    }
})

#section1 .part1line {position: absolute;stroke-dashoffset: 3000px; stroke-dasharray: 3000px;}
#section1 .part1line.merong {animation:part1line 4s forwards; stroke-dasharray: 3000px;}
@keyframes part1line {
    0% {stroke-dashoffset: 3000px;}
    100% {stroke-dashoffset: 0px;}

 

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 

 

반복함수

setInterval(_\

 

 

 

 

let part1Rolling = setInterval(function(){},2000)

function() 익명 함수

 

// $('.gnb > li').mouseover(function(){
//     $(this).find('.lnb').css({width:'600px', height:'200px', padding: '60px 100px'});
// }); 
// $('.gnb > li').mouseout(function(){
//     $('.lnb').css({width:'', height:'', padding: ''});
//     $('this').find('.lnb li').css({opacity:''});
// });


let loginHtml = $('.topset .login_box').html()
$('.topset_mobile .login_box').html(loginHtml)

let navHtml = $('.topset nav').html()
$('.topset_mobile nav').html(navHtml)



$('.topset_mobile .gnb > li').click(function(){
    $('.lnb').slideUp();
    $(this).find('.lnb').stop().slideToggle();
})

$('header .hamburger').click(function(){
    $('.topset_mobile').fadeToggle();
    $(this).toggleClass('on')
    $('.topset_monav').toggleClass('on')
})

$('.search_open').click(function(){
    $('.search_wrap').fadeIn(300); 
})

$('.search_close').click(function(){
    $('.search_wrap').fadeOut(300); 
})

$('.word li').click(function(){
    let wordVal = $(this).text();
    $('.search_inner input').val(wordVal+' ').focus().trigger('keyup');
})

$('.search_inner input').keyup(function(){
    let inputText = $(this).val()
    console.log(inputText.length)

    if(inputText.length > 0) {
        $('.material-symbols-outlined').addClass('on');
    } else {
        $('.material-symbols-outlined').removeClass('on');
    }

})

$('.smallimg li').mouseenter(function(){
    clearInterval(part1Rolling);

    let liindex = $(this).index();
    liNum = liindex

    $(this).addClass('on').siblings().removeClass('on');

    let enText = $(this).find('.en').text();
    $('.bigimg .en').text(enText);

    let koText = $(this).find('.ko').text();
    $('.bigimg .ko').text(koText);

    let imgSrc = $(this).find('img').attr('src');
    $('.bigimg img').attr('src', imgSrc);
})

$('.smallimg li').mouseleave(function(){
    part1Rolling = setInterval(autoRolling,2000)
})

$('smallimg li').eq(0).addClass('on')

let part1Rolling = setInterval(autoRolling,2000)
let liNum = 0;

function autoRolling(){
    liNum++

    if(liNum >= 4)
        {liNum = 0}

     $('.smallimg li').eq(liNum).addClass('on').siblings().removeClass('on');

    let enText = $('.smallimg li') .eq(liNum) .find('.en').text();
    $('.bigimg .en').text(enText);

    let koText = $('.smallimg li') .eq(liNum) .find('.ko').text();
    $('.bigimg .ko').text(koText);

    let imgSrc = $('.smallimg li') .eq(liNum) .find('img').attr('src');
    $('.bigimg img').attr('src', imgSrc);
}

$(window).scroll(function(){

    let scrT = $(window).scrollTop();
    let winH = $(window).height();

    if(scrT >= winH/2){
    $('.part1line').addClass('merong');
    } else {
        $('.part1line').removeClass('merong')
    }
})


// console.log('k')

// eq0은 첫번째 eq1은 두번째 eq2은 세번째. 
// 새로핳 잏 


// clearInterval(merong)


// alert ($('.topset_mobile nav') .offset() .top )



// input에서 글자를 칠때 input의 값을 구하고 val()
// 만약에 값의 길이가 0보다 큰 경우 .material-symbols-outlined  .on 클래스를 추가하라. 
// 아닌경우는 .on클래스를 제거해라.