SIR
목록으로

지금 이 코드를 간결하게 바꿀 수 있을까요? 채택완료

광광깔
프로필 보기이 회원 글보기이 회원의 댓글보기
 5년 전 조회 3,103
답변 2
목록

자바스크립트를 공부하면서 적용하고 있는데요..

저한테는 이게 최선인 거 같아서요..

 

Copy 
<ul id="txt-box">

    <li>

        <span id="ani-1">상상만 했던 일이 현실이 됩니다.</span>

    </li>

    <li>

        <span id="ani-2">당신의 삶을 변화시킬 5G</span>

    </li>

    <li>

        <span id="ani-3">줄어든 로딩만큼 상상을 초월하는 놀라운 속도</span>

    </li>

    <li>

        <span id="ani-4">언제 어디서나 당신의 실시간 게임 플레이</span>

    </li>

    <li>

        <span id="ani-5">5G 기술로 달라진 삶의 속도를 체크</span>

    </li>

    <li>

        <span id="ani-6">일상이 스마트해지는 에코시스템</span>

    </li>

</ul>

 

<script>

    window.onload = function () {

        var anitxt1 = document.getElementById('ani-1');

        var anitxt2 = document.getElementById('ani-2');

        var anitxt3 = document.getElementById('ani-3');

        var anitxt4 = document.getElementById('ani-4');

        var anitxt5 = document.getElementById('ani-5');

        var anitxt6 = document.getElementById('ani-6');

        window.setTimeout(function () {

            anitxt1.classList.add('on');

        }, 100);

        window.setTimeout(function () {

            anitxt2.classList.add('on');

        }, 200);

        window.setTimeout(function () {

            anitxt3.classList.add('on');

        }, 300);

        window.setTimeout(function () {

            anitxt4.classList.add('on');

        }, 400);

        window.setTimeout(function () {

            anitxt5.classList.add('on');

        }, 500);

        window.setTimeout(function () {

            anitxt6.classList.add('on');

        }, 600);

    }

</script>

 

#txt-box span 태그에 on 클래스 추가해주는 것인데, 0.1초 간격으로 추가해주는 것입니다.

뭔가 덕지덕지 붙여놓은 것 같아서 .. 이 소스를 간결하게 바꿀 수 있을까요?

부탁드립니다.

 

#자바스크립트 #애니메이션

답변 2개

채택된 답변
+20 포인트

Copy 
<script>
    window.onload = function () {
        <?php for ($i=1; $i < 7; $i++) { ?>
            var anitxt<?php echo $i; ?> = document.getElementById('ani-<?php echo $i; ?>');
            window.setTimeout(function () { anitxt<?php echo $i; ?>.classList.add('on'); }, <?php echo $i * 100; ?>);
        <?php } ?>
    }
</script>

28라인을 8라인으로 줄여봤습니다. ^.^

자바스크립트로 만드셔도 되겠지만 이해하시기 싶게 PHP로 만들어봤습니다.

동일한 방법으로 자바스크립트 만드셔도 같은 효과를 보실수 있을 겁니다.

 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

정말 간결해졌네요!! 참고하여 적용해보겠습니다 감사합니다
@광깔
위쪽 HTML 태그도 같은 방법으로 줄이시면 전체 페이지의 소스가 간결해지실겁니다.
오늘도 즐거운 하루보내세요~!!!

댓글을 작성하려면 로그인이 필요합니다.

@카알주님은 자바스크립트 부분을 덧붙여서 하자면 배열로 처리하셔서 하셔도 될듯합니다.

$i 값을 배열에 넣어서요

Copy 
<?php

$array[1] = "상상만 했던 일이 현실이 됩니다";

$array[2] = "당신의 삶을 변화시킬 5G";

$array[3] = "줄어든 로딩만큼 상상을 초월하는 놀라운 속도";

?>

<ul id="txt-box">

<?php

   for ($i=1; $i < count($array); $i++) {

?>
    <li>
        <span id="ani-<?php echo $i ?>"><?php echo $array[$i] ?></span>
    </li>
<?php  } ?>
</ul>
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고