blog.atwork.at

news and know-how about microsoft, technology, cloud and more.

Web-Developer jQuery Rain MultiScreen.js PlugIn

Nach Ostern gibts was Buntes für Web-Developer: jQuery Rain MultiScreen.js. Das ist ein kleines, schlankes jQuery PlugIn, das eine Single Webpage effektvoll und einfach mit Animationen in mehrere Seiten aufteilt und präsentiert.

Auf GitHub kann die letzte Version von Multi-Screen.js von Autor Ian de Vries downgeloadet werden. Mit Multi-Screen.js können Animationen und Timing zwischen den einzelnen Screens eingestellt werden, das Demo zeigt einige mögliche Animationen.

jQuery Rain MultiScreen.js ist einfach in der Verwendung und eignet sich u.a. gut für kleine Websites (Single Page Apps), Anleitungen und Wizards oder auch einfach nur zum animierten Umschalten zwischen Bereichen (<div>-Objekten).

image

Das PlugIn ist klein: multi-screen.min.js ist 27KB groß, das optimierte multi-screen.min.js nur 7KB groß und multi-screen-css nur 1KB. Im HTML <head> müssen nur jQuery und multi-screen.js eingebunden werden und dieses dann nach dem Laden aufgerufen werden.

<link href="../multi-screen-css.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" src="multi-screen.js"></script>
<script type="text/javascript">$(document).ready(function() { MultiScreen.init(); });</script>

Die Verwendung erfolgt dann im <body> pro Screen so:

<div id="screen1" class="ms-container ms-default">
    <p>some content...</p>
</div>

...und wird dann mit Animationen aufgewertet:

image

Eine kleine HTML-Demo Seite mit Links zwischen zwei "Screens" (<div>) sieht dann vollständig sinngemäß etwa so aus:

<body>
    <div id="screen1" class="ms-container ms-default" style="background-color: red; padding: 2em;">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        <!-- animations -->
        <a class="ms-nav-link" data-ms-target="screen2" data-ms-exit-animation-time="700" data-ms-enter-animation-time="300" href="#">previous</a>
        <a class="ms-nav-link" data-ms-target="screen2" href="#">next</a>
    </div>
    <div id="screen2" class="ms-container" style="background-color: green; padding: 2em;">
        <p>Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.</p>
        <!-- specific animations -->
        <a class="ms-nav-link" data-ms-target="screen1" data-ms-animation="fadeleft" data-ms-vertical-distance="0" href="#">previous</a>
        <a class="ms-nav-link" data-ms-target="screen1" data-ms-delay="true" href="#">next</a>
    </div>
</body>

Klein, schlank und effektvoll - ein nettes jQuery PlugIn um Websites aufzuteilen und ansprechend zu animieren,

Viel Spaß beim bunten Basteln!

Loading