[jQuery] 순서대로 떠오르는 카드형 ui (each문 활용)

html

<div class="contents">
        <ul>
            <li>
                <a href="#n">
                    <strong>AL Algorithms</strong><br><br>
                    <span>Understanding users and environments with human-level intelligence</span>
                </a>
            </li>
            <li>
                <a href="#n">
                    <strong>AL Algorithms</strong><br><br>
                    <span>Understanding users and environments with human-level intelligence</span>
                </a>
            </li>
            <li>
                <a href="#n">
                    <strong>AL Algorithms</strong><br><br>
                    <span>Understanding users and environments with human-level intelligence</span>
                </a>
            </li>
            <li>
                <a href="#n">
                    <strong>AL Algorithms</strong><br><br>
                    <span>Understanding users and environments with human-level intelligence</span>
                </a>
            </li>
            <li>
                <a href="#n">
                    <strong>AL Algorithms</strong><br><br>
                    <span>Understanding users and environments with human-level intelligence</span>
                </a>
            </li>
            <li>
                <a href="#n">
                    <strong>AL Algorithms</strong><br><br>
                    <span>Understanding users and environments with human-level intelligence</span>
                </a>
            </li>
            <li>
                <a href="#n">
                    <strong>AL Algorithms</strong><br><br>
                    <span>Understanding users and environments with human-level intelligence</span>
                </a>
            </li>
            <li>
                <a href="#n">
                    <strong>AL Algorithms</strong><br><br>
                    <span>Understanding users and environments with human-level intelligence</span>
                </a>
            </li>
            <li>
                <a href="#n">
                    <strong>AL Algorithms</strong><br><br>
                    <span>Understanding users and environments with human-level intelligence</span>
                </a>
            </li>
        </ul>
    </div>

 

css

 *{margin: 0;padding: 0;box-sizing:border-box;}
 body{background-color: #e5e5e5;}
 .contents{max-width: 1300px;margin: 0 auto;padding-top: 100px;}

ul{list-style: none;}
ul:after{display: block;content: '';clear: both;}
ul li{float: left;position: relative;margin-left: 20px;margin-top: 20px;width: calc((100% - 41px)/3);background-color: #fff;opacity: 0;transition: .3s;animation: avoid .5s forwards ease-out;}
ul li:nth-child(3n+1){margin-left: 0;}
ul li:nth-child(-n+3){margin-top: 0;}
ul li a{display: block;padding: 30px;text-decoration: none;color: #000;}

ul li strong:before, ul li strong:after, ul li span:before, ul li span:after{display: block;content: '';position: absolute;background-color: #1428a0;transition: .3s;}
ul li strong:before{top: 0;right: 0;width: 0;height: 3px;}
ul li strong:after{bottom: 0;left: 0;width: 0;height: 3px;}
ul li span:before{top: 0;left: 0;width: 3px;height: 0;}
ul li span:after{bottom: 0;right: 0;width: 3px;height: 0;}

ul li:hover{-webkit-box-shadow: 10px 11px 20px #a8a8a8;box-shadow: 10px 11px 20px #a8a8a8;}
ul li:hover strong:before{width: 100%;}
ul li:hover strong:after{width: 100%;}
ul li:hover span:before{height: 100%;}
ul li:hover span:after{height: 100%;}

@keyframes avoid{
0%{opacity: 0;transform: translateY(40px);}
100%{opacity: 1;transform: translateY(0);}
}

 

jQuery

$(document).ready(function
    var total = $('ul li').length;

    $('ul li').each(function (index, item){
        var cnt = $(this).index()
        cnt2 = cnt * 0.2;
        $(item).css('animation-delay', cnt2 + 's');
    })
})

 

레퍼런스

https://www.sait.samsung.co.kr/saithome/main/main.do