TIL/Today I Learned

[Develop] 23.06.16 개발 공부 일지

임성장 2023. 6. 17. 09:48
728x90

요약: 글자 쓰는 플러그인, 아이콘슬라이드, 반응형 이미지 높이 변경, 마우스 스크롤 무빙, 굽네 회원가입 페이지 제작

일시: 23.06.16 09:30 ~ 18:20

장소: 더휴먼컴퓨터아트아카데미, 집

배운 점:

리디자인 굽네 회원가입 페이지 제작

 Jquery

-글자쓰는 플러그인

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
        <script src="./typed.js"></script>
        <style>
            body{background: blue; margin: 100px; }
            .type{color: wheat; font-size: 20px;}
        </style>
    </head>
<body>
    <div class="wrap">
        <div class="type">

        </div>
    </div>
    <script>
        $('.type').typed({
            strings: ['안녕하세요', 'Hello'],
            typeSpeed: 150,
            backDelay: 200,
            loop: true
        })
    </script>
</body>
</html>

- 아이콘슬라이드

$('.iconBtn').each(function(index){
    $(this).on({click:function(){
        $('.iconBtnOn').stop().animate({left: 118*index}, 0, function(){
            $('.iconBtnOn').css({backgroundPosition: -118*index+"px 0px", transition: '0.6s'})
            $('.iconBtn').removeClass('addIconOn')
            $(this).addClass('addIconOn')
        })
    }})
})

- 반응형이미지 높이 변경

$(window).resize(function(){
    let boxWidth = $('img').width();
    let boxHeight = $('img').height();
    console.log("🚀 ~ file: script.js:3 ~ $ ~ boxWidth:", boxWidth)

    if(boxWidth<1920){
        $('#main').height(boxHeight)
    }
})

- 마우스스크롤무빙

const galleryWrap = $('.gallery-wrap')
let offset = galleryWrap.offset().left
console.log("🚀 ~ file: script.js:3 ~ offset:", offset)


galleryWrap.on({mousemove(e){
    if(e.pageX >= 1920){
        return false
    }else{
        $(this).css({left: -e.pageX+offset})
    }
}})
728x90