Chillin.js

< Use arrow keys to navigate >

is about making impress.js more convenient

We all agree on, it's

impress.js

impressive

but ...

Relative positioning is more convenient than absolute positioning
Positioning is sometimes just useless and verbose

Before everything: basic setup

Basic setup: pure impress.js

                <div id="impress">
                    <div id="impress-step-1" class="step" data-x="-1000" data-y="-1500">
                        <!-- What's here doesn't really matter -->
                    </div> <!-- ... -->
                </div>
                <script type="text/javascript" src="lib/impress.js"></script>
                <script type="text/javascript">
                    impress().init();
                </script>

Before everything: basic setup

Basic setup: impress.js + Chillin.js

                    <div id="impress">
                    <div id="impress-step-1" class="step" data-x="-1000" data-y="-1500">
                    <!-- What's here doesn't really matter -->
                    </div> <!-- ... -->
                    </div>
                    <script type="text/javascript" src="lib/impress.js"></script>
                    <script type="text/javascript" src="lib/jquery-1.9.1/jquery.min.js"></script>
                    <script type="text/javascript" src="lib/chillin.js"></script>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            $(document).chillin();
                            impress().init();
                        });
                    </script>

Relative positioning

Close positioning: pure impress.js

                    <div id="impress-step-1" class="step" data-x="-1000" data-y="-1500">
                        <!-- What's here doesn't really matter -->
                    </div>
                    <div id="impress-step-2" class="step" data-x="-1000" data-y="-1200">
                        <!--
                            This content is 300 below the previous one, right ?
                        -->
                    </div>

Close positioning: impress.js + Chillin.js

                    <div id="impress-step-1" class="step">
                        <!-- What's here doesn't really matter either -->
                    </div>
                    <div id="impress-step-2" class="step" data-y="%+300">
                        <!-- Note that when you want to move slides to reorganize
                                everything a such behavior is really helpful ! -->
                    </div>

No positioning

No positioning: pure impress.js (not possible)

                    <div id="impress-step-1" class="step" data-x="-1000" data-y="-1500">
                        <!-- What's here doesn't really matter -->
                    </div>
                    <div id="impress-step-2" class="step" data-x="2000" data-y="2000">
                        <!-- This content is just far away from the first one -->
                    </div>

No positioning: impress.js + Chillin.js

                    <div id="impress-step-1" class="step">
                        <!-- What's here doesn't really matter either -->
                    </div>
                    <div id="impress-step-2" class="step">
                        <!-- If you just don't care ... just say nothing! -->
                    </div>

More about Chillin.js

There are others features: like diving effect, or referring to an old slide for the relative positioning.

For more information, see the README.md on GitHub.

Read the source of the page and the LESS stylesheet to get more informations on the credits and used work.