Untitled

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ParticleSlider - Now available</title>
    <meta name="author" content="zaku.eu & andreasstorm.com" />
    <meta name="description" content="World's first canvas ParticleSlider. Easy to customize - interactive - responsive." />
    <meta name="keywords" content="Canvas,Slider,Particleslider,Particle,Slideshow,Canvasslider" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <link type="text/css" rel="stylesheet" href="/css/style.css" />
    <script type="text/javascript" src="http://use.typekit.net/lcv3krk.js"></script>
    <script type="text/javascript">try { Typekit.load(); } catch (e) { }</script>
    <script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-29865051-1']);
        _gaq.push(['_setDomainName', 'particleslider.com']);
        _gaq.push(['_trackPageview']);

        (function () {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
    </script>

</head>
<body class="home">
    <a href="https://nextparticle.nextco.de" style="
        display: block;
top: 0;
width: 100%;
background: #00f;
color: #fff;
            text-decoration: none;
            padding: 10px;
            text-align: center;
            font-weight: bold;
    s">
        Brandnew: NextParticle
    </a>
    <header>
        <div>
            <a href="/">ParticleSlider</a>
            <nav>
                <a href="/contact">Contact</a>
                <a href="/buy">Buy</a>
                <a href="/documentation/api">API Documentation</a>
            </nav>
            <div class="clear"></div>
        </div>
    </header>
    <section class="clipboard">
    <div class="sub-section">
        <br />
        <h1>Settings</h1>
        <h3>Play around with the slider</h3>
    </div>
    <div class="sub-section">
        <h3>Particle settings</h3>
        <br />
        <table cellspacing="0" cellpadding="0">
            <tr>
                <td>
                    <input type="radio" value="false" name="monochrome" id="colored" checked="checked" />
                    <label for="colored">colored</label>
                </td>
                <td>
                    <input type="radio" value="true" name="monochrome" id="monochrome" />
                    <label for="monochrome">monochrome</label>
                </td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    <input type="number" min="0" max="5" value="0" id="gap" />
                    <label for="gap">gap</label>
                </td>
                <td>
                    <input type="number" min="1" max="5" value="1" id="size" />
                    <label for="size">size</label>
                </td>
            </tr>
        </table>
    </div>
    <div class="sub-section">
        <h3>Gravity settings</h3>
        <br />
        <table cellspacing="0" cellpadding="0">
            <tr>
                <td>
                    <input type="radio" value="true" name="restless" id="restless" checked="checked" />
                    <label for="restless">on</label>
                </td>
                <td>
                    <input type="radio" value="false" name="restless" id="restful" />
                    <label for="restful">off</label>
                </td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    <label for="mouse-force">Mouse force</label>
                </td>
                <td>
                    <input type="number" min="100" max="15000" step="100" value="10000" id="mouse-force" />
                </td>
            </tr>
        </table>
    </div>
    <div class="sub-section">
        <h3>Slideshow settings</h3>
        <br />
        <table cellspacing="0" cellpadding="0">
            <tr>
                <td colspan="2">
                    <h2>Autoplay</h2>
                </td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    <input type="radio" value="true" name="autoplay" id="autoplay-on" checked="checked" />
                    <label for="autoplay-on">on</label>
                </td>
                <td>
                    <input type="radio" value="false" name="autoplay" id="autoplay-off" />
                    <label for="autoplay-off">off</label>
                </td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    <label for="slide-delay">slide delay</label>
                </td>
                <td>
                    <input type="number" min="2" max="15" value="10" id="slide-delay" />
                </td>
            </tr>
        </table>
    </div>
    <h3>Paging settings</h3>
    <br />
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td>
                <input type="radio" value="true" name="paging" id="show-paging" checked="checked" />
                <label for="show-paging">show</label>
            </td>
            <td>
                <input type="radio" value="false" name="paging" id="hide-paging" />
                <label for="hide-paging">hide</label>
            </td>
        </tr>
        <tr>
            <td colspan="2">&nbsp;
            </td>
        </tr>
        <tr>
            <td>
                <input class="color" id="color" value="abcdef">
                <label for="color">color</label>
            </td>
            <td>
                <input class="color" id="hover-color" value="2E5582">
                <label for="hover-color">hover-color</label>
            </td>
        </tr>
    </table>
</section>
<div class="home">
    <section>
        <div class="book">
            <div id="particle-slider">
                <div class="controls">
                    <div class="left" data-src="img/left.gif"></div>
                    <div class="right" data-src="img/right.gif"></div>
                </div>
                <div class="slides">
                    <div class="slide">
                        ParticleSlider V0.9 - now available
                    </div>
                    <div class="slide">
                        <a href="http://zaku.eu">zaku.eu - Tamino Martinius</a>
                    </div>
                    <div class="slide">
                        <a href="http://andreasstorm.com">Andreas Storm</a>
                    </div>
                </div>
                <canvas class="draw"></canvas>
            </div>
        </div>
        <h1>World's first canvas ParticleSlider</h1>
    </section>
</div>
<div class="home-spacer"></div>
<section>
    <div class="sub-section">
        <ul class="features">
            <li>
                <div style="background-image: url('/img/features/customizable.png');">
                    <h2>Customizable</h2>
                    <span>The ParticleSlider has many settings, and is easy adjustable to fit in your corporate identity.</span>
                </div>
            </li>
            <li>
                <div style="background-image: url('/img/features/colouration.png');">
                    <h2>Colouration</h2>
                    <span>Choose between colored & monochrome particles. Use transparent pixels to mask particles for monochrome images.</span>
                </div>
            </li>
            <li>
                <div style="background-image: url('/img/features/compatibility.png');">
                    <h2>Compatibility</h2>
                    <span>Supports all modern Browsers (Chrome, FF 4+, Safari, Opera, IE 10+).</span>
                </div>
            </li>
            <li>
                <div style="background-image: url('/img/features/interactive.png');">
                    <h2>Interactive</h2>
                    <span>Play around with your mouse, or touch with your Fingers. See unique transitions & effects</span>
                </div>
            </li>
            <li>
                <div style="background-image: url('/img/features/documentation.png');">
                    <h2>Documentation</h2>
                    <span>ParticleSlider comes with well documented source, and full API Reference. Many samples also included.</span>
                </div>
            </li>
            <li>
                <div style="background-image: url('/img/features/responsive.png');">
                    <h2>Responsive</h2>
                    <span>Change the size of the browser and see the reaction of the ParticleSliders.</span>
                </div>
            </li>
            <li>
                <div style="background-image: url('/img/features/imageFormats.png');">
                    <h2>Image formats</h2>
                    <span>All common image-formats and transparency is supported. Use .png of .gif with transparent Pixels to improve performance.</span>
                </div>
            </li>
            <li>
                <div style="background-image: url('/img/features/autoplay.png');">
                    <h2>Autoplay</h2>
                    <span>Slides can stay, or change after a adjustable delay.</span>
                </div>
            </li>
            <li>
                <div style="background-image: url('/img/features/updates.png');">
                    <h2>Updates</h2>
                    <span>ParticleSlider is still in development. Many new features are planed as free updates.</span>
                </div>
            </li>
            <li>
                <div style="background-image: url('/img/features/buy.png');">
                    <h2>Buy ParticleSlider</h2>
                    <span>Find out more about our <a href="/buy">prices</a>, or take a look at our <a href="/legal/license">license</a> terms.</span>
                </div>
            </li>
        </ul>
        <div class="clear"></div>
    </div>
    <h3>
        <img src="/img/help.png" style="width: 1.75em; height: 1.75em; vertical-align: -0.55em; -moz-filter: grayscale(0.5); -webkit-filter: grayscale(0.5); -o-filter: grayscale(0.5); filter: grayscale(0.5); margin-right: 0.5em;" />
        Please see the <a href="/documentation/reference">API Reference</a> for more information
    </h3>
</section>
<script src="/js/particleslider/current/particleslider.js"></script>
<script type="text/javascript">
    var imgPaths = ['img/logo.gif', 'img/logo_zaku.gif', 'img/logo_as.gif'];
    var imgs = [];
    var imgsSmall = [];
    for (var i = 0, ii = imgPaths.length; i < ii; i++) {
        var img = new Image();
        var imgSmall = new Image();
        img.src = imgPaths[i];
        imgSmall.src = imgPaths[i].replace(/\.gif/, '_small.gif');
        imgs.push(img);
        imgsSmall.push(imgSmall);
    }
    var psinist = new ParticleSlider({
        width: 800,
        height: 503,
        color: '#abcdef',
        hoverColor: '#2E5582',
        imgs: (document.body.clientWidth <= 950) ? imgsSmall : imgs,
        onSizeChange: function (ps, width, height) {
            ps.imgs = (document.body.clientWidth <= 950) ? imgsSmall : imgs;
            ps.init(true);
        }
    });
</script>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript" src="/js/views/home/index.min.js"></script>
<script type="text/javascript" src="/js/lib/jscolor/jscolor.min.js"></script>

    <div class="clear"></div>

    <div style="text-align:center;">
        <div id="twitter"
            data-src="https://platform.twitter.com/widgets/tweet_button.html?url=http://particleslider.com&text=World&#39;s first canvas ParticleSlider - responsive, customizable, interactive&via=TaminoMartinius"
            data-style="border: none; overflow: hidden; width: 82px; height: 21px;"
            style="display:inline-block;">
        </div>
        <div id="facebook"
            data-src="//www.facebook.com/plugins/like.php?href=http%3a%2f%2fparticleslider.com&amp;send=false&amp;layout=button_count&amp;width=85&amp;show_faces=false&amp;font=verdana&amp;colorscheme=light&amp;action=like&amp;height=21"
            data-style="float: left; border: none; overflow: hidden; width: 115px; height: 21px;"
            style="display:inline-block;">
        </div>
    </div>
    <br />
    <script type="text/ecmascript">
        var socialNetworks = ['twitter', 'facebook'];
        for (var i = 0, ii = socialNetworks.length; i < ii; i++){
            var $elem = document.getElementById(socialNetworks[i]);
            var elem = document.createElement('iframe');
            elem.setAttribute('allowtransparency', 'true');
            elem.setAttribute('frameborder', '0');
            elem.setAttribute('scrolling', 'no');
            elem.setAttribute('src', $elem.getAttribute('data-src'));
            elem.setAttribute('style', $elem.getAttribute('data-style'));
            $elem.appendChild(elem);
        }
        //for (var key in $twitter) {
        //  document.write('<br/>' + key + ' = ' + $twitter[key]);
        //}
        //'<iframe allowtransparency="true" frameborder="0" scrolling="no" src="' + inst.attr("data-src") + '" style="' + styleInst + '"></iframe>'
    </script>
    <footer>
        <span class="copyright">
            &copy; 2017
            <a href="http://zaku.eu" target="_blank">zaku.eu</a>
            &amp;
            <a href="http://andreasstorm.com" target="_blank">andreasstorm.com</a></span>
        <span class="links">
            <a href="/legal">legal</a>
            -
            <a href="/legal/license">license</a>
        </span>
    </footer>
</body>
</html>