18 Spell animation

18.1 pell-animation-img-list - default opacity of images is 0, thats why we can't see them

  • Knowledge img 1
  • Skills img 1
  • Code img 1
  • Yourself img 1
.spell-animation-img-list
.spell-animation-img-list
  • Knowledge img 1
  • Skills img 1
  • Code img 1
  • Yourself img 1
<ul class="spell-animation-img-list">
    <li class="spell-animation-img-list__item">
        <figure>
            <img src="https://unsplash.it/220/220?image=20" alt="Knowledge img 1">
        </figure>
    </li>
    <li class="spell-animation-img-list__item">
        <figure>
            <img src="http://placehold.it/420x420" alt="Skills img 1">
        </figure>
    </li>
    <li class="spell-animation-img-list__item">
        <figure>
            <img src="https://unsplash.it/220/220?image=60" alt="Code img 1">
        </figure>
    </li>
    <li class="spell-animation-img-list__item">
        <figure>
            <img src="../static/img/img-spell-1-a.jpg" alt="Yourself img 1">
        </figure>
    </li>
</ul>

18.2 spell-animation-box - spell-animation-box

  • Knowledge img 1
  • Skills img 1
  • Code img 1
  • Yourself img 1

Develop

  • Knowledge img 2
  • Skills img 2
  • Code img 2
  • Yourself img 2
  • Knowledge img 3
  • Skills img 3
  • Code img 3
  • Yourself img 3
.spell-animation-box
.spell-animation-box
  • Knowledge img 1
  • Skills img 1
  • Code img 1
  • Yourself img 1

Develop

  • Knowledge img 2
  • Skills img 2
  • Code img 2
  • Yourself img 2
  • Knowledge img 3
  • Skills img 3
  • Code img 3
  • Yourself img 3
<div class="spell-animation-box js-spell-animation-box sepll_01">
    <div class="spell-animation-box__inner">
        <div class="spell-animation-box__row">
            <ul class="spell-animation-img-list">
                <li class="spell-animation-img-list__item">
                    <figure>
                        <img src="https://unsplash.it/220/220?image=20" alt="Knowledge img 1">
                    </figure>
                </li>
                <li class="spell-animation-img-list__item">
                    <figure>
                        <img src="http://placehold.it/420x420" alt="Skills img 1">
                    </figure>
                </li>
                <li class="spell-animation-img-list__item">
                    <figure>
                        <img src="https://unsplash.it/220/220?image=60" alt="Code img 1">
                    </figure>
                </li>
                <li class="spell-animation-img-list__item">
                    <figure>
                        <img src="../static/img/img-spell-1-a.jpg" alt="Yourself img 1">
                    </figure>
                </li>
            </ul>
        </div>
        <div class="spell-animation-box__row">
            <div class="title-box">
                <div class="title-box__content">
                    <div class="title-box__content__head">
                        <div class="title-decor title-decor--alt">
                            <h2 class="title-decor__head">
                                <span class="title-decor__head__content">
                                    <span class="label">Develop</span>
                                </span>
                                <span class="title-decor__head__actions">
                                    <span class="label" aria-label="knowledge, skills, code, yourself"></span>
                                </span>
                            </h2>
                            <div class="title-decor__ico">
                                <span class="ico ico--dash"></span>
                            </div>
                        </div>
                    </div>
                    <div class="title-box__content__info">
                        <p class="special-subtitle">
                            <span class="label">Develop Yourself <br>My Friend</span>
                        </p>
                    </div>
                </div>
            </div>
            <ul class="spell-animation-img-list">
                <li class="spell-animation-img-list__item">
                    <figure>
                        <img src="https://unsplash.it/220/220?image=24" alt="Knowledge img 2">
                    </figure>
                </li>
                <li class="spell-animation-img-list__item">
                    <figure>
                        <img src="http://placehold.it/420x420" alt="Skills img 2">
                    </figure>
                </li>
                <li class="spell-animation-img-list__item">
                    <figure>
                        <img src="https://unsplash.it/220/220?image=5" alt="Code img 2">
                    </figure>
                </li>
                <li class="spell-animation-img-list__item">
                    <figure>
                        <img src="../static/img/img-spell-1-b.jpg" alt="Yourself img 2">
                    </figure>
                </li>
            </ul>
        </div>
        <div class="spell-animation-box__row">
            <ul class="spell-animation-img-list">
                <li class="spell-animation-img-list__item">
                    <figure>
                        <img src="https://unsplash.it/220/220?image=444" alt="Knowledge img 3">
                    </figure>
                </li>
                <li class="spell-animation-img-list__item">
                    <figure>
                        <img src="http://placehold.it/420x420" alt="Skills img 3">
                    </figure>
                </li>
                <li class="spell-animation-img-list__item">
                    <figure>
                        <img src="https://unsplash.it/220/220?image=341" alt="Code img 3">
                    </figure>
                </li>
                <li class="spell-animation-img-list__item">
                    <figure>
                        <img src="../static/img/img-spell-1-c.jpg" alt="Yourself img 3">
                    </figure>
                </li>
            </ul>
        </div>
    </div>
</div>