jQuery

【jQuery】シンプルでモダンなウィザードプラグインWizzy

September 22, 2018
Wizzy

Wizzyはシンプルでモダンなウィザードプラグイン。洗練されたUI、クールなアニメーション、多くの機能とオプションを備えています。

CSS

<link href="dist/css/jquery.wizzy.css" rel="stylesheet">

HTML

            <div class="wz-wrapper wizzy">
                <div class="wz-inner">
                    <div class="wz-header">
                        <nav>
                            <a href="#">Basic</a>
                            <a href="#">Normal</a>
                            <a href="#">Advanced</a>
                            <a href="#">Finish</a>
                        </nav>
                    </div>
                    <div class="wz-body">
                        <div class="wz-step">
                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
                        </div>
                        <div class="wz-step">
                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
                        </div>
                        <div class="wz-step">
                            <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
                        </div>
                        <div class="wz-step">
                            <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.</p>
                        </div>
                    </div>
                    <div class="wz-navigator"></div>
                </div>
            </div>

JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="dist/js/jquery.wizzy.js"></script>
<script src="assets/js/script.js"></script>