Slavlee

SnapIt - Wheel - Slavlee

SVG animated wheel with Snap.svg

Snap.It - Wheel - Slavlee is a jQuery Plugin that generates a animated wheel with just a few parameters.

All adjustments are made inside one JSON object.

More Snap.It - Wheel - Slavlee facts:

Basic Wheel

Generate a classic rounded wheel and divide it into sections. Each section opens a lightbox with custom html content. The html content can be located anywhere in the html document, just give Snap.It - Wheel the ID of the container and it will do the rest.

Segment 1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Segment 2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Segment 3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Segment 4

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Basic wheel with default settings

$("#snapit-canvas-basic-wheel").snapitwheel_slavlee({ contents: ["#snapit-canvas-wheel-content-1", "#snapit-canvas-wheel-content-2", "#snapit-canvas-wheel-content-3", "#snapit-canvas-wheel-content-4"] });

Basic Multiline Wheel

Generate a classic rounded wheel and divide it into sections, where each section can have multiline copytext. Each section opens a lightbox with custom html content. The html content can be located anywhere in the html document, just give Snap.It - Wheel the ID of the container and it will do the rest.

Basic wheel with default settings

$("#snapit-canvas-basic-wheel").snapitwheel_slavlee({ pieces: { count: 4, colors: ["#FF0000", "#00FF00", "#0000FF", "#FF00FF"], labels: [ { value: ["Segment 1", "Segment 1a"], color: "#FFFFFF", size: 26 }, { value: "Segment 2", color: "#FFFFFF", size: 26 }, { value: ["Segment 3", "Segment 3a"], color: "#FFFFFF", size: 26 }, { value: "Segment 4", color: "#FFFFFF", size: 26 } ] }, contents: ["#snapit-canvas-wheel-content-1", "#snapit-canvas-wheel-content-2", "#snapit-canvas-wheel-content-3", "#snapit-canvas-wheel-content-4"] });

Animated Wheel

Generate a classic rounded wheel and divide it into sections. Each section will be rotated to the twelve o'clock position and opens a lightbox with custom html content. The html content can be located anywhere in the html document, just give Snap.It - Wheel the ID of the container and it will do the rest.

Animated wheel with default settings

$("#snapit-canvas-wheel-rotation").snapitwheel_slavlee({ pieces: { count: 4, colors: ["#FF0000", "#00FF00", "#0000FF", "#FF00FF"], labels: [ { value: "Segment 1", color: "#FFFFFF", size: 26 }, { value: "Segment 2", color: "#FFFFFF", size: 26 }, { value: "Segment 3", color: "#FFFFFF", size: 26 }, { value: "Segment 4", color: "#FFFFFF", size: 26 } ] }, rotation: { enable: true, speed: 500, type: mina.easein }, contents: ["#snapit-canvas-wheel-content-1", "#snapit-canvas-wheel-content-2", "#snapit-canvas-wheel-content-3", "#snapit-canvas-wheel-content-4"] });

Animated Multiline Wheel

Generate a classic rounded wheel and divide it into sections. The text in these section can have multiple lines as well. Each section will be rotated to the twelve o'clock position and opens a lightbox with custom html content. The html content can be located anywhere in the html document, just give Snap.It - Wheel the ID of the container and it will do the rest.

Animated wheel with default settings

$("#snapit-canvas-wheel-rotation").snapitwheel_slavlee({ pieces: { count: 4, colors: ["#FF0000", "#00FF00", "#0000FF", "#FF00FF"], labels: [ { value: ["Segment 1", "Segment 1a"], color: "#FFFFFF", size: 26 }, { value: "Segment 2", color: "#FFFFFF", size: 26 }, { value: ["Segment 3", "Segment 3a"], color: "#FFFFFF", size: 26 }, { value: "Segment 4", color: "#FFFFFF", size: 26 } ] }, rotation: { enable: true, speed: 500, type: mina.easein }, contents: ["#snapit-canvas-wheel-content-1", "#snapit-canvas-wheel-content-2", "#snapit-canvas-wheel-content-3", "#snapit-canvas-wheel-content-4"] });

Advanced Wheel

Generate a advanced rounded wheel and divide it into sections. The advanced wheel combine all previous wheels and display the text inside the wheel. The labels of the wheel are aligned outside of the segments.

Segment 1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Segment 2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Segment 3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Segment 4

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Animated wheel with default settings

$("#snapit-canvas-wheel-advanced").snapitwheel_slavlee({ type: "advanced", radius: 200, pieces: { count: 4, colors: ["#FF0000", "#00FF00", "#0000FF", "#FF00FF","#FF0000", "#00FF00", "#0000FF", "#FF00FF"], labels: [ { value: "Segment 1", color: "#000000", size: 26 }, { value: "Segment 2", color: "#000000", size: 26 }, { value: "Segment 3", color: "#000000", size: 26 }, { value: "Segment 4", color: "#000000", size: 26 } ] }, contents: ["#snapit-canvas-wheel-content-5", "#snapit-canvas-wheel-content-6", "#snapit-canvas-wheel-content-7", "#snapit-canvas-wheel-content-8"] });

Parameters

This is a complete list of all parameters for the SnapIt - Wheel - Slavlee plugin.

Param Explanation
type String: "basic", "advanced"
Default: basic
radius Integer: size of the wheel Default: 200
color hexdecimal
Default: #FFFFFF
stroke hexdecimal
Default: #000000
pieces JSON Object with following parameter:
Param Explanation
count Integer: amount of pieces the wheel is divided
Default: 4
colors Array: color of each piece
Default: ["#FF0000", "#00FF00", "#0000FF", "#FF00FF"]
labels Array if JSON Objects with following parameter:
Param Explanation
value String: name of the piece
Default: Segment 1 | Segment 2 | Segment 3 | Segment 4
color hexdecimal
Default: #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF
size Integer, font size in pixel
Default: 26 | 26 | 26 | 26
animation JSON Object with following parameter:
Param Explanation
speed Integer: fade speed in milliseconds
Default: 750
type mina easing function
Default: mina.easein
rotation JSON Object with following parameter:
Param Explanation
enable boolean
Default: false
speed Integer: fade speed in milliseconds
Default: 750
type mina easing function
Default: mina.easein
contents array, list of CSS selector to elements that will be showed in a Fancybox 3 lightbox (basic) or inside the wheel (advanced), when clicking on the wheel pieces.
Default:
contentCircle JSON Object with the following parameter:
Param Explanation
color hexdecimal
Default: #FFFFFF
stroke hexdecimal
Default: #FFFFFF
radius Integer
Default: 150
type mina easing function
Default: mina.easein
speed Integer: fade speed in milliseconds
Default: 500
classes JSON Object with the following parameter:
Param Explanation
segment String; css class for the each piece
Default: snapit_slavlee_segment
measure String; css class for the hidden container element for calculation purposes
Default: snapit_slavlee_measure
wheel String; css class for the element that wraps the whole wheel
Default: snapit_slavlee_wheel
label String; css class for the text element
Default: snapit_slavlee_label
content String; css class for the element that wraps the content of the lightbox
Default: snapit_slavlee_content
contentWrapper String; css class for the element that wraps the container element that hold the contents for the lightbox
Default: snapit-canvas-wheel-contents
scrollbar String; css class for the element that wraps the whole thing: wheel and contentWrapper. It is needed to hide the scrollbar.
Default: snapit-canvas-wheel-hideScrollbar

Support

If you need payed support, then you can contact me with the wished time period. I will send you an offer as soon as possible.

If you find any bugs then send a email with the Subject: SnapIt - Wheel - Slavlee Bug Report.