jQuery-MaskifySlider/sample.html at master · magalhini/jQuery-MaskifySlider · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta http-equiv="cleartype" content="on">
        <meta name="viewport" content="width=device-width, initial-scale=1"/>

        <title>Maskify Slider demos</title>
        <meta name="description" content="">
        <link rel="stylesheet" href="css/reset.css" type="text/css"/>
        <link rel="stylesheet" href="css/screen.css" type="text/css"/>
        <link rel="stylesheet" href="css/animation.css" type="text/css"/>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

        <!--[if lt IE 9]>
            <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>
        <div class="page">
        <h1>Maskify Slider 0.2: a jQuery plugin</h1>
        <h2>by Ricardo Magalhães</h2>
        <h3><a href="https://github.com/magalhini/jQuery-MaskifySlider">View on Github</a></h3>

        <h3>What is it?</h3>
        <p class="description">MaskifySlider is an extremely simple plugin which enables you to create an image slider with the effect of an image mask. The plugin will automically offset the images position according to the spacing between their placeholders, giving the impression that it's only one masked image.</p>
        <div class="description">If you don't specify any margin, the placeholders will be close together, creating the effect of a gallery grid. I dig that.</div>

        <div class="widgets-square">
        <h1>With margin between elements</h1>
            <div class="sources">
                <img src="img.jpg" alt="">
                <img src="img2.jpg" alt="">
                <img src="img3.jpg" alt="">
                <img src="img4.jpg" alt="">
            </div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>


        <div class="widgets-no-margin">
        <h1>No margin only creates a virtual grid</h1>
            <div class="sources">
                <img src="img.jpg" alt="">
                <img src="img2.jpg" alt="">
                <img src="img3.jpg" alt="">
                <img src="img4.jpg" alt="">
            </div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>

        <div class="widgets">
        <h1>Border-radius has a few problems with overflow on img. Use wisely!</h1>
            <div class="sources">
                <img src="img.jpg" alt="">
                <img src="img2.jpg" alt="">
                <img src="img3.jpg" alt="">
                <img src="img4.jpg" alt="">
            </div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
    </div>

    <!--<script src="js/script.js" type="text/javascript"></script>-->
    <script src="js/maskify-slider.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function () {

            $('.widgets').Maskify({
                'canvas': '.circle',       // elements in which to show the img
                'marginTop': 200,          // px to offset images from the top
                'slider': true,            // slide the images
                'delay': 7000,             // image transition delay
                'transitionLength': 1000,  // duration of the transition
                'cssTransition' : true   // prefer CSS transitions. false means JS.
            });

            $('.widgets-square').Maskify({
                'canvas': '.circle',       // elements in which to show the img
                'marginTop': 80,          // px to offset images from the top
                'slider': true,            // slide the images
                'delay': 7000,             // image transition delay
                'transitionLength': 1000,  // duration of the transition
                'cssTransition' : true,  // prefer CSS transitions. false means JS.
            });

            $('.widgets-no-margin').Maskify({
                'canvas': '.circle',       // elements in which to show the img
                'marginTop': 100,          // px to offset images from the top
                'slider': true,            // slide the images
                'delay': 4000,             // image transition delay
                'transitionLength': 500,  // duration of the transition
                'cssTransition' : true,
                'percentage': true   // prefer CSS transitions. false means JS.
            });
        });
    </script>
    </body>

</html>