Shuffle.js test

Developer
Stuart Allen
Size
16,393 Kb
Views
20,240
  1. Shuffle.js test Previews
  2. Shuffle.js test HTML Codes
  3. Shuffle.js test CSS Codes
  4. Shuffle.js test JS Codes

How do I make an shuffle.js test?

What is a shuffle.js test? How do you make a shuffle.js test? This script and codes were developed by Stuart Allen on 29 November 2022, Tuesday.

Shuffle.js test Previews
IQ Test

Shuffle.js test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Shuffle.js test</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="container"> <div class="filter-options filter-options--compound row"> <div class="col-6@sm"> <div class="filter-group filter-group--compound js-colors"> <h5 class="filter-group__label filter-group__label--compound">Colors</h5> <button class="btn btn--go" data-value="green"><span class="visuallyhidden">Green</span></button> <button class="btn btn--primary" data-value="blue"><span class="visuallyhidden">Blue</span></button> <button class="btn btn--danger" data-value="red"><span class="visuallyhidden">Red</span></button> <button class="btn btn--warning" data-value="orange"><span class="visuallyhidden">Orange</span></button> </div> </div> <div class="col-6@sm"> <div class="filter-group filter-group--compound js-shapes"> <h5 class="filter-group__label filter-group__label--compound">Shapes</h5> <span class="ib"> <input type="checkbox" value="circle" id="cb-circle"> <label for="cb-circle">Circle</label> </span> <span class="ib"> <input type="checkbox" value="diamond" id="cb-diamond"> <label for="cb-diamond">Diamond</label> </span> <span class="ib"> <input type="checkbox" value="square" id="cb-square"> <label for="cb-square">Square</label> </span> <span class="ib"> <input type="checkbox" value="triangle" id="cb-triangle"> <label for="cb-triangle">Triangle</label> </span> </div> </div> </div> <div class="row"> <div class="shape-shuffle-container js-shuffle shuffle" style="height: 883px; transition: height 250ms cubic-bezier(0.165, 0.84, 0.44, 1);"> <div class="col-3@xs col-3@sm shape shape--circle shape--blue shuffle-item shuffle-item--visible" data-shape="circle" data-color="blue"> <div class="aspect"> <div class="aspect__inner"> <div class="shape__space">blue circle</div> </div> </div> </div> <div class="col-3@xs col-3@sm shape shape--diamond shape--red shuffle-item shuffle-item--visible" data-shape="diamond" data-color="red"> <div class="aspect"> <div class="aspect__inner"> <div class="shape__space">red diamond</div> </div> </div> </div> <div class="col-3@xs col-3@sm shape shape--triangle shape--green shuffle-item shuffle-item--visible" data-shape="triangle" data-color="green"> <div class="aspect"> <div class="aspect__inner"> <div class="shape__space">green triangle</div> </div> </div> </div> <div class="col-3@xs col-3@sm shape shape--triangle shape--orange shuffle-item shuffle-item--visible" data-shape="triangle" data-color="orange"> <div class="aspect"> <div class="aspect__inner"> <div class="shape__space">orange triangle</div> </div> </div> </div> <div class="col-3@xs col-3@sm shape shape--square shape--red shuffle-item shuffle-item--visible" data-shape="square" data-color="red"> <div class="aspect"> <div class="aspect__inner"> <div class="shape__space">red square</div> </div> </div> </div> <div class="col-3@xs col-3@sm shape shape--diamond shape--green shuffle-item shuffle-item--visible" data-shape="diamond" data-color="green"> <div class="aspect"> <div class="aspect__inner"> <div class="shape__space">green diamond</div> </div> </div> </div> <div class="col-3@xs col-3@sm shape shape--circle shape--red shuffle-item shuffle-item--visible" data-shape="circle" data-color="red"> <div class="aspect"> <div class="aspect__inner"> <div class="shape__space">red circle</div> </div> </div> </div> <div class="col-3@xs col-3@sm shape shape--square shape--green shuffle-item shuffle-item--visible" data-shape="square" data-color="green"> <div class="aspect"> <div class="aspect__inner"> <div class="shape__space">green square</div> </div> </div> </div> <div class="col-3@xs col-3@sm shape shape--circle shape--orange shuffle-item shuffle-item--visible" data-shape="circle" data-color="orange"> <div class="aspect"> <div class="aspect__inner"> <div class="shape__space">orange circle</div> </div> </div> </div> <div class="col-3@xs col-3@sm shape shape--diamond shape--blue shuffle-item shuffle-item--visible" data-shape="diamond" data-color="blue"> <div class="aspect"> <div class="aspect__inner"> <div class="shape__space">blue diamond</div> </div> </div> </div> <div class="col-3@xs col-3@sm shape shape--square shape--orange shuffle-item shuffle-item--visible" data-shape="square" data-color="orange"> <div class="aspect"> <div class="aspect__inner"> <div class="shape__space">orange square</div> </div> </div> </div> <div class="col-3@xs col-3@sm shape shape--square shape--blue shuffle-item shuffle-item--visible" data-shape="square" data-color="blue"> <div class="aspect"> <div class="aspect__inner"> <div class="shape__space">blue square</div> </div> </div> </div> <div class="the-sizer col-1@xs col-1@sm shuffle-item shuffle-item--visible"></div> </div> </div>
</section> <script src='https://cdnjs.cloudflare.com/ajax/libs/Shuffle/4.0.2/shuffle.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Shuffle.js test - Script Codes CSS Codes

@charset "UTF-8";
/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */
/** * 1. Change the default font family in all browsers (opinionated). * 2. Prevent adjustments of font size after orientation changes in IE and iOS. */
html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */
}
/** * Remove the margin in all browsers (opinionated). */
body { margin: 0;
}
/* HTML5 display definitions ========================================================================== */
/** * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. * 2. Add the correct display in IE. */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary { /* 1 */ display: block;
}
/** * Add the correct display in IE 9-. */
audio,
canvas,
progress,
video { display: inline-block;
}
/** * Add the correct display in iOS 4-7. */
audio:not([controls]) { display: none; height: 0;
}
/** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */
progress { vertical-align: baseline;
}
/** * Add the correct display in IE 10-. * 1. Add the correct display in IE. */
template,
[hidden] { display: none;
}
/* Links ========================================================================== */
/** * Remove the gray background on active links in IE 10. */
a { background-color: transparent;
}
/** * Remove the outline on focused links when they are also active or hovered * in all browsers (opinionated). */
a:active,
a:hover { outline-width: 0;
}
/* Text-level semantics ========================================================================== */
/** * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */
}
/** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */
b,
strong { font-weight: inherit;
}
/** * Add the correct font weight in Chrome, Edge, and Safari. */
b,
strong { font-weight: bolder;
}
/** * Add the correct font style in Android 4.3-. */
dfn { font-style: italic;
}
/** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */
h1 { font-size: 2em; margin: 0.67em 0;
}
/** * Add the correct background and color in IE 9-. */
mark { background-color: #ff0; color: #000;
}
/** * Add the correct font size in all browsers. */
small { font-size: 80%;
}
/** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */
sub,
sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;
}
sub { bottom: -0.25em;
}
sup { top: -0.5em;
}
/* Embedded content ========================================================================== */
/** * Remove the border on images inside links in IE 10-. */
img { border-style: none;
}
/** * Hide the overflow in IE. */
svg:not(:root) { overflow: hidden;
}
/* Grouping content ========================================================================== */
/** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */
code,
kbd,
pre,
samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */
}
/** * Add the correct margin in IE 8. */
figure { margin: 1em 40px;
}
/** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */
hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */
}
/* Forms ========================================================================== */
/** * Change font properties to `inherit` in all browsers (opinionated). */
button,
input,
select,
textarea { font: inherit;
}
/** * Restore the font weight unset by the previous rule. */
optgroup { font-weight: bold;
}
/** * Show the overflow in IE. * 1. Show the overflow in Edge. * 2. Show the overflow in Edge, Firefox, and IE. */
button,
input,
select { /* 2 */ overflow: visible;
}
/** * Remove the margin in Safari. * 1. Remove the margin in Firefox and Safari. */
button,
input,
select,
textarea { /* 1 */ margin: 0;
}
/** * Remove the inheritence of text transform in Edge, Firefox, and IE. * 1. Remove the inheritence of text transform in Firefox. */
button,
select { /* 1 */ text-transform: none;
}
/** * Change the cursor in all browsers (opinionated). */
button,
[type="button"],
[type="reset"],
[type="submit"] { cursor: pointer;
}
/** * Restore the default cursor to disabled elements unset by the previous rule. */
[disabled] { cursor: default;
}
/** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS. */
button,
html [type="button"],
[type="reset"],
[type="submit"] { -webkit-appearance: button; /* 2 */
}
/** * Remove the inner border and padding in Firefox. */
button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0;
}
/** * Restore the focus styles unset by the previous rule. */
button:-moz-focusring,
input:-moz-focusring { outline: 1px dotted ButtonText;
}
/** * Change the border, margin, and padding in all browsers (opinionated). */
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;
}
/** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */
legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */
}
/** * Remove the default vertical scrollbar in IE. */
textarea { overflow: auto;
}
/** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */
[type="checkbox"],
[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */
}
/** * Correct the cursor style of increment and decrement buttons in Chrome. */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button { height: auto;
}
/** * Correct the odd appearance of search inputs in Chrome and Safari. */
[type="search"] { -webkit-appearance: textfield;
}
/** * Remove the inner padding and cancel buttons in Chrome on OS X and * Safari on OS X. */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration { -webkit-appearance: none;
}
*,
*::before,
*::after { box-sizing: border-box;
}
main { overflow: hidden;
}
pre.max-height { max-height: 30em;
}
picture { display: block;
}
img { display: block; max-width: 100%; height: auto;
}
figure { margin: 0;
}
ul ul { padding-left: 1.25em; margin: 0; list-style-type: circle;
}
li { line-height: 1.4;
}
nav > a { display: block; margin: 5px 0;
}
.breathable-list li { line-height: 1.7;
}
.filter__label { margin: 0 0 3px;
}
.filter__search { margin: 5px 0;
}
.sort-options { margin-top: 10px;
}
#be-social h2 { margin-bottom: 32px;
}
body { font-family: sans-serif; color: #5D6D77;
}
a { text-decoration: none;
}
a,
a:visited { color: #3498DB;
}
a:hover { text-decoration: underline;
}
a:active { color: #2ECC71;
}
h2,
h3,
h4,
h5,
h6 { color: #34495E;
}
h1 { margin: 20px 0; font-weight: 300; font-size: 4em; line-height: 1; color: #2ECC71;
}
h2 { position: relative; font-size: 2.5em; margin-bottom: 18px;
}
h2::after { content: ''; position: absolute; bottom: 0.1em; left: 0; z-index: -1; width: 100%; height: 2px; background-color: #2ECC71; -webkit-transform: translateZ(0); transform: translateZ(0);
}
h3 { margin: .6667em 0 0.5em; font-size: 1.5em;
}
h4 { font-size: 1.25em;
}
@media screen and (max-width: 767px) { h1 { font-size: 8vw; margin: 3vw 0; } h2 { font-size: 6vw; margin: 2vw 0; }
}
h1 > a,
h2 > a,
h3 > a { display: none;
}
h1:hover > a,
h2:hover > a,
h3:hover > a { position: absolute; display: block; top: 0; left: -40px; height: 50px; width: 50px; background: url("../img/link.svg") no-repeat; overflow: hidden; text-indent: -999em;
}
.unstyled { list-style-type: none; padding: 0; margin: 0;
}
.light-text-dark-box p { color: #ECF0F1;
}
.light-text-dark-box a { color: #ECF0F1;
}
.light-text-dark-box a:hover { color: white;
}
:not(pre) > code { padding: 0; padding-top: 0.2em; padding-bottom: 0.2em; margin: 0; font-size: 85%; color: get-color(black); background-color: rgba(0, 0, 0, 0.04); border-radius: 3px;
}
:not(pre) > code::before,
:not(pre) > code::after { letter-spacing: -0.2em; content: "\00a0";
}
.container { padding-left: 3.5%; padding-right: 3.5%;
}
.container::before,
.container::after { content: " "; display: table;
}
.container::after { clear: both;
}
.row { margin-left: auto; margin-right: auto;
}
.row::before,
.row::after { content: " "; display: table;
}
.row::after { clear: both;
}
.row .row { margin-left: -8px; margin-right: -8px;
}
.row--centered { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.aspect { position: relative; width: 100%; height: 0; overflow: hidden; padding-bottom: 100%;
}
.aspect--16x9 { padding-bottom: 56.25%;
}
.aspect--9x16 { padding-bottom: 177.77778%;
}
.aspect--4x3 { padding-bottom: 75%;
}
.aspect--3x4 { padding-bottom: 133.33333%;
}
.aspect--3x2 { padding-bottom: 66.66667%;
}
.aspect--3x1 { padding-bottom: 33.33333%;
}
.aspect--2x3 { padding-bottom: 150%;
}
.aspect--2x1 { padding-bottom: 50%;
}
.aspect--1x2 { padding-bottom: 200%;
}
.aspect--1x1 { padding-bottom: 100%;
}
.aspect--none { height: auto; padding-bottom: 0; overflow: visible;
}
.aspect--none > .aspect__inner { position: static;
}
.aspect > div,
.aspect__inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}
.col-1\@xs,
.col-2\@xs,
.col-3\@xs,
.col-4\@xs,
.col-5\@xs,
.col-6\@xs,
.col-7\@xs,
.col-8\@xs,
.col-9\@xs,
.col-10\@xs,
.col-11\@xs,
.col-12\@xs,
.col-1\@sm,
.col-2\@sm,
.col-3\@sm,
.col-4\@sm,
.col-5\@sm,
.col-6\@sm,
.col-7\@sm,
.col-8\@sm,
.col-9\@sm,
.col-10\@sm,
.col-11\@sm,
.col-12\@sm,
.col-1\@md,
.col-2\@md,
.col-3\@md,
.col-4\@md,
.col-5\@md,
.col-6\@md,
.col-7\@md,
.col-8\@md,
.col-9\@md,
.col-10\@md,
.col-11\@md,
.col-12\@md,
.col-1\@lg,
.col-2\@lg,
.col-3\@lg,
.col-4\@lg,
.col-5\@lg,
.col-6\@lg,
.col-7\@lg,
.col-8\@lg,
.col-9\@lg,
.col-10\@lg,
.col-11\@lg,
.col-12\@lg { position: relative; box-sizing: border-box; min-height: 1px; padding-left: 8px; padding-right: 8px;
}
.col-1\@xs,
.col-2\@xs,
.col-3\@xs,
.col-4\@xs,
.col-5\@xs,
.col-6\@xs,
.col-7\@xs,
.col-8\@xs,
.col-9\@xs,
.col-10\@xs,
.col-11\@xs,
.col-12\@xs { float: left;
}
.aspect--16x9\@xs { padding-bottom: 56.25%;
}
.aspect--9x16\@xs { padding-bottom: 177.77778%;
}
.aspect--4x3\@xs { padding-bottom: 75%;
}
.aspect--3x4\@xs { padding-bottom: 133.33333%;
}
.aspect--3x2\@xs { padding-bottom: 66.66667%;
}
.aspect--3x1\@xs { padding-bottom: 33.33333%;
}
.aspect--2x3\@xs { padding-bottom: 150%;
}
.aspect--2x1\@xs { padding-bottom: 50%;
}
.aspect--1x2\@xs { padding-bottom: 200%;
}
.aspect--1x1\@xs { padding-bottom: 100%;
}
.aspect--none\@xs { height: auto; padding-bottom: 0; overflow: visible;
}
.aspect--none\@xs > .aspect__inner { position: static;
}
.col-1\@xs { width: 16.66667%;
}
.col-2\@xs { width: 33.33333%;
}
.col-3\@xs { width: 50%;
}
.col-4\@xs { width: 66.66667%;
}
.col-5\@xs { width: 83.33333%;
}
.col-6\@xs { width: 100%;
}
.col-pull-0\@xs { right: auto;
}
.col-pull-1\@xs { right: 16.66667%;
}
.col-pull-2\@xs { right: 33.33333%;
}
.col-pull-3\@xs { right: 50%;
}
.col-pull-4\@xs { right: 66.66667%;
}
.col-pull-5\@xs { right: 83.33333%;
}
.col-pull-6\@xs { right: 100%;
}
.col-push-0\@xs { left: auto;
}
.col-push-1\@xs { left: 16.66667%;
}
.col-push-2\@xs { left: 33.33333%;
}
.col-push-3\@xs { left: 50%;
}
.col-push-4\@xs { left: 66.66667%;
}
.col-push-5\@xs { left: 83.33333%;
}
.col-push-6\@xs { left: 100%;
}
.col-offset-0\@xs { margin-left: 0%;
}
.col-offset-1\@xs { margin-left: 16.66667%;
}
.col-offset-2\@xs { margin-left: 33.33333%;
}
.col-offset-3\@xs { margin-left: 50%;
}
.col-offset-4\@xs { margin-left: 66.66667%;
}
.col-offset-5\@xs { margin-left: 83.33333%;
}
.col-offset-6\@xs { margin-left: 100%;
}
@media screen and (min-width: 768px) { .col-1\@sm, .col-2\@sm, .col-3\@sm, .col-4\@sm, .col-5\@sm, .col-6\@sm, .col-7\@sm, .col-8\@sm, .col-9\@sm, .col-10\@sm, .col-11\@sm, .col-12\@sm { float: left; } .aspect--16x9\@sm { padding-bottom: 56.25%; } .aspect--9x16\@sm { padding-bottom: 177.77778%; } .aspect--4x3\@sm { padding-bottom: 75%; } .aspect--3x4\@sm { padding-bottom: 133.33333%; } .aspect--3x2\@sm { padding-bottom: 66.66667%; } .aspect--3x1\@sm { padding-bottom: 33.33333%; } .aspect--2x3\@sm { padding-bottom: 150%; } .aspect--2x1\@sm { padding-bottom: 50%; } .aspect--1x2\@sm { padding-bottom: 200%; } .aspect--1x1\@sm { padding-bottom: 100%; } .aspect--none\@sm { height: auto; padding-bottom: 0; overflow: visible; } .aspect--none\@sm > .aspect__inner { position: static; } .col-1\@sm { width: 8.33333%; } .col-2\@sm { width: 16.66667%; } .col-3\@sm { width: 25%; } .col-4\@sm { width: 33.33333%; } .col-5\@sm { width: 41.66667%; } .col-6\@sm { width: 50%; } .col-7\@sm { width: 58.33333%; } .col-8\@sm { width: 66.66667%; } .col-9\@sm { width: 75%; } .col-10\@sm { width: 83.33333%; } .col-11\@sm { width: 91.66667%; } .col-12\@sm { width: 100%; } .col-pull-0\@sm { right: auto; } .col-pull-1\@sm { right: 8.33333%; } .col-pull-2\@sm { right: 16.66667%; } .col-pull-3\@sm { right: 25%; } .col-pull-4\@sm { right: 33.33333%; } .col-pull-5\@sm { right: 41.66667%; } .col-pull-6\@sm { right: 50%; } .col-pull-7\@sm { right: 58.33333%; } .col-pull-8\@sm { right: 66.66667%; } .col-pull-9\@sm { right: 75%; } .col-pull-10\@sm { right: 83.33333%; } .col-pull-11\@sm { right: 91.66667%; } .col-pull-12\@sm { right: 100%; } .col-push-0\@sm { left: auto; } .col-push-1\@sm { left: 8.33333%; } .col-push-2\@sm { left: 16.66667%; } .col-push-3\@sm { left: 25%; } .col-push-4\@sm { left: 33.33333%; } .col-push-5\@sm { left: 41.66667%; } .col-push-6\@sm { left: 50%; } .col-push-7\@sm { left: 58.33333%; } .col-push-8\@sm { left: 66.66667%; } .col-push-9\@sm { left: 75%; } .col-push-10\@sm { left: 83.33333%; } .col-push-11\@sm { left: 91.66667%; } .col-push-12\@sm { left: 100%; } .col-offset-0\@sm { margin-left: 0%; } .col-offset-1\@sm { margin-left: 8.33333%; } .col-offset-2\@sm { margin-left: 16.66667%; } .col-offset-3\@sm { margin-left: 25%; } .col-offset-4\@sm { margin-left: 33.33333%; } .col-offset-5\@sm { margin-left: 41.66667%; } .col-offset-6\@sm { margin-left: 50%; } .col-offset-7\@sm { margin-left: 58.33333%; } .col-offset-8\@sm { margin-left: 66.66667%; } .col-offset-9\@sm { margin-left: 75%; } .col-offset-10\@sm { margin-left: 83.33333%; } .col-offset-11\@sm { margin-left: 91.66667%; } .col-offset-12\@sm { margin-left: 100%; } .container { padding-left: 7%; padding-right: 7%; } .row { max-width: 1200px; }
}
@media screen and (min-width: 1024px) { .col-1\@md, .col-2\@md, .col-3\@md, .col-4\@md, .col-5\@md, .col-6\@md, .col-7\@md, .col-8\@md, .col-9\@md, .col-10\@md, .col-11\@md, .col-12\@md { float: left; } .aspect--16x9\@md { padding-bottom: 56.25%; } .aspect--9x16\@md { padding-bottom: 177.77778%; } .aspect--4x3\@md { padding-bottom: 75%; } .aspect--3x4\@md { padding-bottom: 133.33333%; } .aspect--3x2\@md { padding-bottom: 66.66667%; } .aspect--3x1\@md { padding-bottom: 33.33333%; } .aspect--2x3\@md { padding-bottom: 150%; } .aspect--2x1\@md { padding-bottom: 50%; } .aspect--1x2\@md { padding-bottom: 200%; } .aspect--1x1\@md { padding-bottom: 100%; } .aspect--none\@md { height: auto; padding-bottom: 0; overflow: visible; } .aspect--none\@md > .aspect__inner { position: static; } .col-1\@md { width: 8.33333%; } .col-2\@md { width: 16.66667%; } .col-3\@md { width: 25%; } .col-4\@md { width: 33.33333%; } .col-5\@md { width: 41.66667%; } .col-6\@md { width: 50%; } .col-7\@md { width: 58.33333%; } .col-8\@md { width: 66.66667%; } .col-9\@md { width: 75%; } .col-10\@md { width: 83.33333%; } .col-11\@md { width: 91.66667%; } .col-12\@md { width: 100%; } .col-pull-0\@md { right: auto; } .col-pull-1\@md { right: 8.33333%; } .col-pull-2\@md { right: 16.66667%; } .col-pull-3\@md { right: 25%; } .col-pull-4\@md { right: 33.33333%; } .col-pull-5\@md { right: 41.66667%; } .col-pull-6\@md { right: 50%; } .col-pull-7\@md { right: 58.33333%; } .col-pull-8\@md { right: 66.66667%; } .col-pull-9\@md { right: 75%; } .col-pull-10\@md { right: 83.33333%; } .col-pull-11\@md { right: 91.66667%; } .col-pull-12\@md { right: 100%; } .col-push-0\@md { left: auto; } .col-push-1\@md { left: 8.33333%; } .col-push-2\@md { left: 16.66667%; } .col-push-3\@md { left: 25%; } .col-push-4\@md { left: 33.33333%; } .col-push-5\@md { left: 41.66667%; } .col-push-6\@md { left: 50%; } .col-push-7\@md { left: 58.33333%; } .col-push-8\@md { left: 66.66667%; } .col-push-9\@md { left: 75%; } .col-push-10\@md { left: 83.33333%; } .col-push-11\@md { left: 91.66667%; } .col-push-12\@md { left: 100%; } .col-offset-0\@md { margin-left: 0%; } .col-offset-1\@md { margin-left: 8.33333%; } .col-offset-2\@md { margin-left: 16.66667%; } .col-offset-3\@md { margin-left: 25%; } .col-offset-4\@md { margin-left: 33.33333%; } .col-offset-5\@md { margin-left: 41.66667%; } .col-offset-6\@md { margin-left: 50%; } .col-offset-7\@md { margin-left: 58.33333%; } .col-offset-8\@md { margin-left: 66.66667%; } .col-offset-9\@md { margin-left: 75%; } .col-offset-10\@md { margin-left: 83.33333%; } .col-offset-11\@md { margin-left: 91.66667%; } .col-offset-12\@md { margin-left: 100%; }
}
.code-block { position: relative; overflow: visible; margin-left: calc(-3.5vw - 8px); margin-right: calc(-3.5vw - 8px);
}
.code-block pre { position: relative; z-index: 1; min-height: 56px; padding-top: 1em; padding-bottom: 1em; padding-left: calc(3.5vw + 8px); padding-right: calc(3.5vw + 8px); margin: .5em 0;
}
@media screen and (min-width: 768px) { .code-block { margin-left: calc(-7vw - 8px); margin-right: calc(-7vw - 8px); } .code-block pre { position: relative; z-index: 1; padding-left: calc(7vw + 8px); padding-right: calc(7vw + 8px); }
}
@media (min-width: 1395px) { .code-block { margin-left: calc(((100vw - 1200px) / -2) - 8px); margin-right: calc(((100vw - 1200px) / -2) - 8px); } .code-block pre { padding-left: calc(((100vw - 1200px) / 2) + 8px); padding-right: calc(((100vw - 1200px) / 2) + 8px); }
}
.site-nav .site-nav__title { color: #ECF0F1;
}
.site-nav .site-nav__title--first { margin-top: 0;
}
.site-nav .btn { width: 100%;
}
.site-nav .site-nav__tray { -webkit-transition: .2s; transition: .2s; overflow: hidden; height: 300px; background-color: #34495E;
}
.site-nav .site-nav__tray-inner { padding-top: 30px; padding-bottom: 30px;
}
.site-nav.collapsed .site-nav__tray { height: 0;
}
.site-nav .site-nav__band { position: relative;
}
.site-nav .site-nav__band::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: #34495E;
}
.site-footer { margin-top: 2em; padding: 1em 0; background-color: #34495E;
}
.has-code-block .code-block pre { margin-bottom: 0;
}
.has-code-block + .site-footer { margin-top: 0;
}
.site-footer__credit { margin: 0; text-align: right;
}
@media screen and (max-width: 767px) { .site-nav .btn { margin-bottom: 5px; }
}
.demo-list .figure-wrap { position: relative; z-index: 1;
}
.demo-list .figure-wrap,
.demo-list .figure-wrap img { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition: .1s ease; transition: .1s ease;
}
.demo-list:hover .figure-wrap { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);
}
.demo-list:hover .figure-wrap img { -webkit-filter: grayscale(1); filter: grayscale(1);
}
.demo-list:hover .figure-wrap:hover { z-index: 2; -webkit-transform: scale3d(1.05, 1.05, 1); transform: scale3d(1.05, 1.05, 1);
}
.demo-list:hover .figure-wrap:hover img { -webkit-filter: none; filter: none;
}
.demo-list .figure-wrap:nth-child(4n + 1) { margin-left: 0;
}
.demo-list .figure-wrap > a { display: block;
}
.demo-list .figure-wrap figcaption { margin-top: .5em; margin-bottom: 1em;
}
.demo-link-container::before { content: '➜'; color: #2ECC71; margin-right: 5px;
}
span.demo-link-container::before { margin-left: 5px;
}
@media screen and (max-width: 47.9375em) { .demo-list + .demo-list { margin-top: 1em; } .figure-wrap:nth-child(odd) { margin-left: 0; } .figure-wrap:nth-child(n + 3) { margin-top: 1em; }
}
.search-section { margin-top: 1em; margin-bottom: 1em;
}
input.faq-search { -webkit-appearance: searchfield; box-sizing: border-box; width: 100%; border: 2px solid #95A5A6; border-radius: 4px; padding: 0.5em; font-size: 1.125em; color: #95A5A6; -webkit-transition: .15s; transition: .15s;
}
input.faq-search::-webkit-input-placeholder { color: #95A5A6; -webkit-transition: .15s; transition: .15s;
}
input.faq-search::-moz-placeholder { color: #95A5A6; -webkit-transition: .15s; transition: .15s;
}
input.faq-search:-ms-input-placeholder { color: #95A5A6; -webkit-transition: .15s; transition: .15s;
}
input.faq-search::placeholder { color: #95A5A6; -webkit-transition: .15s; transition: .15s;
}
input.faq-search:hover { outline: 0; color: #5D6D77; border-color: #5D6D77;
}
input.faq-search:hover::-webkit-input-placeholder { color: #5D6D77;
}
input.faq-search:hover::-moz-placeholder { color: #5D6D77;
}
input.faq-search:hover:-ms-input-placeholder { color: #5D6D77;
}
input.faq-search:hover::placeholder { color: #5D6D77;
}
input.faq-search:focus { outline: 0; color: #27AE60; border-color: #27AE60;
}
input.faq-search:focus::-webkit-input-placeholder { color: #27AE60;
}
input.faq-search:focus::-moz-placeholder { color: #27AE60;
}
input.faq-search:focus:-ms-input-placeholder { color: #27AE60;
}
input.faq-search:focus::placeholder { color: #27AE60;
}
.question { margin: 2em 0; overflow: hidden; -webkit-transition: .2s ease-out; transition: .2s ease-out;
}
.question--collapsed { height: 0 !important; margin: 0; border-width: 0;
}
.question--collapsed + .question { margin-top: 0;
}
.question--unanswered { padding-top: 1.25em; border-top: 2px solid #2ECC71;
}
.question__title { margin-top: 0;
}
.question__answer { margin-bottom: 0;
}
.btn-group::before,
.btn-group::after { content: " "; display: table;
}
.btn-group::after { clear: both;
}
.btn-group .btn { float: left; border-radius: 0;
}
.btn-group .btn:first-child { border-radius: 6px 0 0 6px;
}
.btn-group .btn:last-child { border-radius: 0 6px 6px 0;
}
.btn,
button { display: inline-block; padding: .75em .375em; -webkit-appearance: none; text-align: center; color: white; border-radius: .0625em; border: 0; background-color: #34495E; -webkit-transition: .2s ease-out; transition: .2s ease-out;
}
.btn:hover,
button:hover { background-color: #4a6885; text-decoration: none;
}
.btn.active,
.btn:active,
button.active,
button:active { background-color: #2C3E50; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
.btn:active,
button:active { -webkit-transition: none; transition: none;
}
.btn--warning { background-color: #E67E22;
}
.btn--warning:hover { background-color: #ea9347;
}
.btn--warning.active,
.btn--warning:active { background-color: #D35400;
}
.btn--primary { background-color: #3498DB;
}
.btn--primary:hover { background-color: #57aae1;
}
.btn--primary.active,
.btn--primary:active { background-color: #3498DB;
}
.btn--danger { background-color: #E74C3C;
}
.btn--danger:hover { background-color: #eb6d60;
}
.btn--danger.active,
.btn--danger:active { background-color: #E74C3C;
}
.btn--go { background-color: #2ECC71;
}
.btn--go:hover { background-color: #4cd787;
}
.btn--go.active,
.btn--go:active { background-color: #2ECC71;
}
.filter-group .btn { position: relative;
}
.filter-group .btn.active:before,
.filter-group .btn.active:after { content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; opacity: 0; -webkit-transition: .2s; transition: .2s;
}
.filter-group .btn:before { background-color: #2C3E50; border-radius: 50%;
}
.filter-group .btn:after { background-size: 60%; background-position: center center; background-repeat: no-repeat; background-image: url(../img/check.svg);
}
.filter-group .btn.active:before,
.filter-group .btn.active:after { opacity: 1;
}
@media (max-width: 47.9375em) { .btn, button { font-size: .875em; }
}
@media (max-width: 30em) { .btn, button { font-size: .75em; }
}
.text-center { text-align: center;
}
.ib { display: inline-block;
}
@media screen and (max-width: 767px) { .hidden\@xs { display: none; }
}
.hidden { display: none !important; visibility: hidden;
}
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
}
.clearfix,
.clearfix::after { content: " "; display: table; clear: both;
}
.pull-left { float: left;
}
.pull-right { float: right;
}
.full-width { width: 100%;
}
.full-height { height: 100%;
}
.hide-text { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0;
}
.table-center-wrap { display: table; table-layout: fixed;
}
.table-center { display: table-cell; vertical-align: middle;
}
.compound-filter-options { margin-top: 20px; margin-bottom: 40px;
}
.filter-group--compound button { width: 40px; height: 40px; padding: 0;
}
.filter-group--compound label { cursor: pointer;
}
.filter-group--compound .ib + .ib { margin-left: 8px;
}
.filter-group__label--compound { margin: 0 0 5px;
}
.shape-shuffle-container { position: relative; overflow: hidden;
}
.shape { position: relative; margin-left: 0; margin-top: 10px;
}
.shape .shape__space { width: 100%; height: 100%; background-color: black; border-style: solid; border-width: 0; border-color: transparent;
}
.shape--blue .shape__space { background-color: #3498DB; border-bottom-color: #3498DB;
}
.shape--red .shape__space { background-color: #E74C3C; border-bottom-color: #E74C3C;
}
.shape--orange .shape__space { background-color: #F39C12; border-bottom-color: #F39C12;
}
.shape--green .shape__space { background-color: #2ECC71; border-bottom-color: #2ECC71;
}
.shape--circle .shape__space { border-radius: 50%;
}
.shape--diamond .shape__space { -webkit-transform: rotate(45deg) scale(0.70711); transform: rotate(45deg) scale(0.70711);
}
.shape--triangle .shape__space { padding-top: 9px; height: 0; width: 0; border-width: 0 66px 114px 66px; background-color: transparent; margin: auto;
}
@media (min-width: 425px) { .shape--triangle .shape__space { padding-top: 12px; height: 0; width: 0; border-width: 0 90px 156px 90px; }
}
@media (min-width: 600px) { .shape--triangle .shape__space { padding-top: 17.5px; height: 0; width: 0; border-width: 0 131px 227px 131px; }
}
@media (min-width: 768px) { .shape--triangle .shape__space { padding-top: 10px; height: 0; width: 0; border-width: 0 74px 128px 74px; }
}
@media (min-width: 1024px) { .shape--triangle .shape__space { padding-top: 13.5px; height: 0; width: 0; border-width: 0 102px 177px 102px; }
}
@media (min-width: 1200px) { .shape--triangle .shape__space { padding-top: 18px; height: 0; width: 0; border-width: 0 135px 234px 135px; }
}
@media (min-width: 1392px) { .shape--triangle .shape__space { padding-top: 19px; height: 0; width: 0; border-width: 0 142px 246px 142px; }
}

Shuffle.js test - Script Codes JS Codes

'use strict';
var Shuffle = window.shuffle;
// ES7 will have Array.prototype.includes.
function arrayIncludes(array, value) { return array.indexOf(value) !== -1;
}
// Convert an array-like object to a real array.
function toArray(thing) { return Array.prototype.slice.call(thing);
}
var Demo = function (element) { this.shapes = toArray(document.querySelectorAll('.js-shapes input')); this.colors = toArray(document.querySelectorAll('.js-colors button')); this.shuffle = new Shuffle(element, { easing: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)', // easeOutQuart sizer: '.the-sizer', }); this.filters = { shapes: [], colors: [], }; this._bindEventListeners();
};
/** * Bind event listeners for when the filters change. */
Demo.prototype._bindEventListeners = function () { this._onShapeChange = this._handleShapeChange.bind(this); this._onColorChange = this._handleColorChange.bind(this); this.shapes.forEach(function (input) { input.addEventListener('change', this._onShapeChange); }, this); this.colors.forEach(function (button) { button.addEventListener('click', this._onColorChange); }, this);
};
/** * Get the values of each checked input. * @return {Array.<string>} */
Demo.prototype._getCurrentShapeFilters = function () { return this.shapes.filter(function (input) { return input.checked; }).map(function (input) { return input.value; });
};
/** * Get the values of each `active` button. * @return {Array.<string>} */
Demo.prototype._getCurrentColorFilters = function () { return this.colors.filter(function (button) { return button.classList.contains('active'); }).map(function (button) { return button.getAttribute('data-value'); });
};
/** * A shape input check state changed, update the current filters and filte.r */
Demo.prototype._handleShapeChange = function () { this.filters.shapes = this._getCurrentShapeFilters(); this.filter();
};
/** * A color button was clicked. Update filters and display. * @param {Event} evt Click event object. */
Demo.prototype._handleColorChange = function (evt) { var button = evt.currentTarget; // Treat these buttons like radio buttons where only 1 can be selected. if (button.classList.contains('active')) { button.classList.remove('active'); } else { this.colors.forEach(function (btn) { btn.classList.remove('active'); }); button.classList.add('active'); } this.filters.colors = this._getCurrentColorFilters(); this.filter();
};
/** * Filter shuffle based on the current state of filters. */
Demo.prototype.filter = function () { if (this.hasActiveFilters()) { this.shuffle.filter(this.itemPassesFilters.bind(this)); } else { this.shuffle.filter(Shuffle.ALL_ITEMS); }
};
/** * If any of the arrays in the `filters` property have a length of more than zero, * that means there is an active filter. * @return {boolean} */
Demo.prototype.hasActiveFilters = function () { return Object.keys(this.filters).some(function (key) { return this.filters[key].length > 0; }, this);
};
/** * Determine whether an element passes the current filters. * @param {Element} element Element to test. * @return {boolean} Whether it satisfies all current filters. */
Demo.prototype.itemPassesFilters = function (element) { var shapes = this.filters.shapes; var colors = this.filters.colors; var shape = element.getAttribute('data-shape'); var color = element.getAttribute('data-color'); // If there are active shape filters and this shape is not in that array. if (shapes.length > 0 && !arrayIncludes(shapes, shape)) { return false; } // If there are active color filters and this color is not in that array. if (colors.length > 0 && !arrayIncludes(colors, color)) { return false; } return true;
};
document.addEventListener('DOMContentLoaded', function () { window.demo = new Demo(document.querySelector('.js-shuffle'));
});
Shuffle.js test - Script Codes
Shuffle.js test - Script Codes
Home Page Home
Developer Stuart Allen
Username rarebush
Uploaded November 29, 2022
Rating 3
Size 16,393 Kb
Views 20,240
Do you need developer help for Shuffle.js test?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Stuart Allen (rarebush) Script Codes
Name
Hub styleguide
Animated leaderboard - image
A Pen by Stuart Allen
WileyPLUS styles
HTML email
Aasld large links
Expanding search
WOL 2 Bootstrap
AAA Header
HUB styles
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!