[Codepen] 튜토리얼 웹 만들기

 

 

웹 사이트 튜토리얼 목업 codepen 입니다~ 

 

 

 

 

 

만약, 위부분에서 li가 아니라 다른곳을 지정 + 자연스럽게 스크롤 하고 싶다면?

다음 스탭 부분을 수정하면서 풀어나가면 됩니다. 

 // 다음 버튼 클릭 이벤트
        $('.nextButton').click(function() {
            var currentStep = $(this).closest('.tuto'); // 현재 단계 요소 선택
            var stepNumber = currentStep.attr('class').match(/tuto(\d+)/)[1]; // 숫자 추출

            var nextStepNumber = parseInt(stepNumber) + 1; // 다음 단계의 숫자 계산
            var nextStep = $('.tuto' + nextStepNumber); // 다음 단계 요소 선택

            currentStep.removeClass('tutorialView'); // 현재 단계의 툴팁 비활성화
            currentStep.find('.tooltip').hide(); // 현재 단계의 툴팁 숨기기
            currentStep.addClass('completed'); // 현재 단계 완료 표시 추가


            var windowHeight = $(window).height();
            var nextStepTop = nextStep.offset().top;

             // 다음 단계로 스크롤 이동
            $('html, body').animate({
                scrollTop: nextStepTop - (windowHeight / 2)
            }, 500, function() {
                nextStep.addClass('tutorialView'); // 다음 단계의 툴팁 활성화
                 nextStep.find('.tooltip').show(); // 다음 단계의 툴팁 보이기
                // 다음 단계로 포커스 주기
                nextStep.focus();
            });
           
        });

 

 

 

 

또한, 어두운 부분이 제대로 안될 경우, 아래 부분의 영역을 지정해줍니다. $("#contents").height();

 

 var maskHeight = $(document).height();

 

 

 

여기에서, input으로 on/off 식으로 해도되고, 해당 부분을 버튼에 넣어서 코드를 수정해도 되고, 바로 실행문을 넣어도 좋습니다! 

아래는 툴팁을 말풍선 css로 하면 더 이쁠 거예요 ㅎㅎ

---

 

[참고]

 

말풍선 사이트 추천 드립니다~ 

https://projects.verou.me/bubbly/

Bubbly — CSS speech bubbles made easy

 

여기는 말풍선에 border를 추가할 경우도 함께 되어있습니다.

https://www.ilikepixels.co.uk/bubbler/

Bubbler - CSS Speech Bubble Generator - i like pixels <3