Tutorial-Module

Developer
Kev Rousseau
Size
6,953 Kb
Views
24,288
  1. Tutorial-Module Previews
  2. Tutorial-Module HTML Codes
  3. Tutorial-Module CSS Codes
  4. Tutorial-Module JS Codes

How do I make an tutorial-module?

What is a tutorial-module? How do you make a tutorial-module? This script and codes were developed by Kev Rousseau on 25 November 2022, Friday.

Tutorial-Module Previews
IQ Test

Tutorial-Module - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tutorial-Module</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Tutorial-Module - Script Codes CSS Codes

body { margin: 0;
}
.tutorials { position: fixed; width: 100%; height: 100%; top: 0; background-color: rgba(0, 0, 0, 0.8) !important; z-index: 1002 !important;
}
.tutorials > [class^='tutorial-'] { -moz-transform: translateX(-1000%); -ms-transform: translateX(-1000%); -o-transform: translateX(-1000%); -ms-transform: translateX(-1000%); -webkit-transform: translateX(-1000%); transform: translateX(-1000%);
}
.tutorials > [class^='tutorial-'].slide-in, .tutorials > [class^='tutorial-'].slide-out { animation-timing-function: cubic-bezier(0.62, 0.28, 0.31, 0.62);
}
.tutorials > [class^='tutorial-'].tutorial-mouse.slide-in { -webkit-animation: slideInFromRight 1s forwards; -moz-animation: slideInFromRight 1s forwards; -ms-animation: slideInFromRight 1s forwards; -o-animation: slideInFromRight 1s forwards; animation: slideInFromRight 1s forwards;
}
.tutorials > [class^='tutorial-'].tutorial-mouse.slide-out { -webkit-animation: slideOutRight 0.5s forwards; -moz-animation: slideOutRight 0.5s forwards; -ms-animation: slideOutRight 0.5s forwards; -o-animation: slideOutRight 0.5s forwards; animation: slideOutRight 0.5s forwards;
}
.tutorials > [class^='tutorial-'].tutorial-arrows.slide-in { -webkit-animation: slideInFromLeft 1s forwards; -moz-animation: slideInFromLeft 1s forwards; -ms-animation: slideInFromLeft 1s forwards; -o-animation: slideInFromLeft 1s forwards; animation: slideInFromLeft 1s forwards;
}
.tutorials > [class^='tutorial-'].tutorial-arrows.slide-out { -webkit-animation: slideOutLeft 0.5s forwards; -moz-animation: slideOutLeft 0.5s forwards; -ms-animation: slideOutLeft 0.5s forwards; -o-animation: slideOutLeft 0.5s forwards; animation: slideOutLeft 0.5s forwards;
}
.tutorials .btn { background-color: #13b4e5; color: #222; -moz-transition: all 0.15s ease; -ms-transition: all 0.15s ease; -o-transition: all 0.15s ease; -webkit-transition: all 0.15s ease; transition: all 0.15s ease;
}
.tutorials .btn:hover { cursor: pointer; background-color: #222; color: #13b4e5; -moz-transition: all 0.15s ease; -ms-transition: all 0.15s ease; -o-transition: all 0.15s ease; -webkit-transition: all 0.15s ease; transition: all 0.15s ease;
}
.tutorials .confirm, .tutorials .skip-tutorial { position: absolute; left: 50%; min-width: 90px; height: 40px; text-transform: uppercase; font-weight: bold; border: none; border-radius: 0; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
.tutorials .confirm { bottom: 25%;
}
.tutorials .skip-tutorial { top: 0; background-color: #222; color: #13b4e5;
}
.tutorials .skip-tutorial:hover { background-color: #13b4e5; color: #222;
}
.tutorials .tutorial-mouse { position: absolute; right: 20%; top: 30%; background-color: #171717; border-radius: 100%; width: 18em; height: 18em;
}
.tutorials .tutorial-mouse .mouse { position: absolute; bottom: 40px; top: 20%; left: 50%; z-index: 9000; border-radius: 15px; background-color: #13b4e5; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 50px; height: 80px;
}
.tutorials .tutorial-mouse .mouse .cable-1 { position: absolute; top: -67%; right: -50%; border-bottom: 2px solid #074558; border-radius: 0 0 360px 0; border-right: 2px solid #074558; -moz-transform: translateX(-50%) rotate(0deg); -ms-transform: translateX(-50%) rotate(0deg); -o-transform: translateX(-50%) rotate(0deg); -ms-transform: translateX(-50%) rotate(0deg); -webkit-transform: translateX(-50%) rotate(0deg); transform: translateX(-50%) rotate(0deg); width: 42%; height: 30%;
}
.tutorials .tutorial-mouse .mouse .cable-2 { position: absolute; top: -30%; right: -35%; border-bottom: 2px solid #074558; border-radius: 0 0 0 360px; border-left: 2px solid #074558; -moz-transform: translateX(-50%) rotate(90deg); -ms-transform: translateX(-50%) rotate(90deg); -o-transform: translateX(-50%) rotate(90deg); -ms-transform: translateX(-50%) rotate(90deg); -webkit-transform: translateX(-50%) rotate(90deg); transform: translateX(-50%) rotate(90deg); width: 2em; height: 1.2em;
}
.tutorials .tutorial-mouse .mouse .spacer-h { position: relative; top: 45%; border: 1px solid black; display: block; width: 100%; height: 0px;
}
.tutorials .tutorial-mouse .mouse .spacer-v { position: absolute; top: 0px; left: 50%; z-index: 1; border: 1px solid black; display: block; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 0px; height: 45%;
}
.tutorials .tutorial-mouse .mouse .mouse-wheel { position: relative; z-index: 100; display: block; margin: 6px auto; border-radius: 4px; background-color: black; width: 8px; height: 15px; -webkit-animation: wheel 1s infinite; -moz-animation: wheel 1s infinite; -ms-animation: wheel 1s infinite; -o-animation: wheel 1s infinite; animation: wheel 1s infinite;
}
.tutorials .tutorial-arrows { position: absolute; left: 20%; top: 30%; background-color: #171717; border-radius: 100%; width: 18em; height: 18em;
}
.tutorials .tutorial-arrows .arrows { position: absolute; left: 50%; top: 10%; transform: translateX(-50%);
}
.tutorials .tutorial-arrows .key { width: 30px; height: 35px; margin: 2px; border-width: 3px 7px 10px; border-style: solid; border-radius: 4px; float: left; clear: left; background: #111; border-color: #555 #444 #333; margin-bottom: 10px;
}
.tutorials .tutorial-arrows .key.arrow-up { -webkit-animation: keypress-up 1s infinite; -moz-animation: keypress-up 1s infinite; -ms-animation: keypress-up 1s infinite; -o-animation: keypress-up 1s infinite; animation: keypress-up 1s infinite;
}
.tutorials .tutorial-arrows .key.arrow-down { -webkit-animation: keypress-down 1s infinite; -moz-animation: keypress-down 1s infinite; -ms-animation: keypress-down 1s infinite; -o-animation: keypress-down 1s infinite; animation: keypress-down 1s infinite; animation-delay: .5s;
}
.tutorials .tutorial-arrows .key .keycap { font-size: 28px; line-height: 1; background: #222; color: #13b4e5; background: -webkit-linear-gradient(left, #444, #333, #444); background: -moz-linear-gradient(left, #444, #333, #444); background: -ms-linear-gradient(left, #444, #333, #444); background: -o-linear-gradient(left, #444, #333, #444); background: linear-gradient(left, #444, #333, #444); box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); border-radius: 4px; position: relative; top: 4px; left: 0px; padding: 0 7px;
}
@-webkit-keyframes wheel { 0% { opacity: 1; } 50% { -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); -ms-transform: translateY(10px); -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); }
}
@-moz-keyframes wheel { 0% { opacity: 1; } 50% { -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); -ms-transform: translateY(10px); -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); }
}
@-ms-keyframes wheel { 0% { opacity: 1; } 50% { -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); -ms-transform: translateY(10px); -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); }
}
@-o-keyframes wheel { 0% { opacity: 1; } 50% { -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); -ms-transform: translateY(10px); -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); }
}
@keyframes wheel { 0% { opacity: 1; } 50% { -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); -ms-transform: translateY(10px); -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); }
}
@-webkit-keyframes keypress-up { 0%, 30%, 100% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 10% { -webkit-transform: scale(0.95, 0.95); -moz-transform: scale(0.95, 0.95); -ms-transform: scale(0.95, 0.95); -o-transform: scale(0.95, 0.95); transform: scale(0.95, 0.95); }
}
@-moz-keyframes keypress-up { 0%, 30%, 100% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 10% { -webkit-transform: scale(0.95, 0.95); -moz-transform: scale(0.95, 0.95); -ms-transform: scale(0.95, 0.95); -o-transform: scale(0.95, 0.95); transform: scale(0.95, 0.95); }
}
@-ms-keyframes keypress-up { 0%, 30%, 100% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 10% { -webkit-transform: scale(0.95, 0.95); -moz-transform: scale(0.95, 0.95); -ms-transform: scale(0.95, 0.95); -o-transform: scale(0.95, 0.95); transform: scale(0.95, 0.95); }
}
@-o-keyframes keypress-up { 0%, 30%, 100% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 10% { -webkit-transform: scale(0.95, 0.95); -moz-transform: scale(0.95, 0.95); -ms-transform: scale(0.95, 0.95); -o-transform: scale(0.95, 0.95); transform: scale(0.95, 0.95); }
}
@keyframes keypress-up { 0%, 30%, 100% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 10% { -webkit-transform: scale(0.95, 0.95); -moz-transform: scale(0.95, 0.95); -ms-transform: scale(0.95, 0.95); -o-transform: scale(0.95, 0.95); transform: scale(0.95, 0.95); }
}
@-webkit-keyframes keypress-down { 0%, 30%, 100% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 10% { -webkit-transform: scale(0.95, 0.95); -moz-transform: scale(0.95, 0.95); -ms-transform: scale(0.95, 0.95); -o-transform: scale(0.95, 0.95); transform: scale(0.95, 0.95); }
}
@-moz-keyframes keypress-down { 0%, 30%, 100% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 10% { -webkit-transform: scale(0.95, 0.95); -moz-transform: scale(0.95, 0.95); -ms-transform: scale(0.95, 0.95); -o-transform: scale(0.95, 0.95); transform: scale(0.95, 0.95); }
}
@-ms-keyframes keypress-down { 0%, 30%, 100% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 10% { -webkit-transform: scale(0.95, 0.95); -moz-transform: scale(0.95, 0.95); -ms-transform: scale(0.95, 0.95); -o-transform: scale(0.95, 0.95); transform: scale(0.95, 0.95); }
}
@-o-keyframes keypress-down { 0%, 30%, 100% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 10% { -webkit-transform: scale(0.95, 0.95); -moz-transform: scale(0.95, 0.95); -ms-transform: scale(0.95, 0.95); -o-transform: scale(0.95, 0.95); transform: scale(0.95, 0.95); }
}
@keyframes keypress-down { 0%, 30%, 100% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 10% { -webkit-transform: scale(0.95, 0.95); -moz-transform: scale(0.95, 0.95); -ms-transform: scale(0.95, 0.95); -o-transform: scale(0.95, 0.95); transform: scale(0.95, 0.95); }
}
@-webkit-keyframes slideInFromRight { 0% { opacity: 0; -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); -ms-transform: translateX(100px); -webkit-transform: translateX(100px); transform: translateX(100px); } 100% { opacity: 1; -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); }
}
@-moz-keyframes slideInFromRight { 0% { opacity: 0; -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); -ms-transform: translateX(100px); -webkit-transform: translateX(100px); transform: translateX(100px); } 100% { opacity: 1; -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); }
}
@-ms-keyframes slideInFromRight { 0% { opacity: 0; -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); -ms-transform: translateX(100px); -webkit-transform: translateX(100px); transform: translateX(100px); } 100% { opacity: 1; -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); }
}
@-o-keyframes slideInFromRight { 0% { opacity: 0; -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); -ms-transform: translateX(100px); -webkit-transform: translateX(100px); transform: translateX(100px); } 100% { opacity: 1; -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); }
}
@keyframes slideInFromRight { 0% { opacity: 0; -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); -ms-transform: translateX(100px); -webkit-transform: translateX(100px); transform: translateX(100px); } 100% { opacity: 1; -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); }
}
@-webkit-keyframes slideOutRight { 0% { opacity: 1; -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); -ms-transform: translateX(100px); -webkit-transform: translateX(100px); transform: translateX(100px); }
}
@-moz-keyframes slideOutRight { 0% { opacity: 1; -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); -ms-transform: translateX(100px); -webkit-transform: translateX(100px); transform: translateX(100px); }
}
@-ms-keyframes slideOutRight { 0% { opacity: 1; -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); -ms-transform: translateX(100px); -webkit-transform: translateX(100px); transform: translateX(100px); }
}
@-o-keyframes slideOutRight { 0% { opacity: 1; -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); -ms-transform: translateX(100px); -webkit-transform: translateX(100px); transform: translateX(100px); }
}
@keyframes slideOutRight { 0% { opacity: 1; -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); -ms-transform: translateX(100px); -webkit-transform: translateX(100px); transform: translateX(100px); }
}
@-webkit-keyframes slideInFromLeft { 0% { opacity: 0; -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); } 100% { opacity: 1; -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); -ms-transform: translateX(100px); -webkit-transform: translateX(100px); transform: translateX(100px); }
}
@-moz-keyframes slideInFromLeft { 0% { opacity: 0; -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); } 100% { opacity: 1; -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); -ms-transform: translateX(100px); -webkit-transform: translateX(100px); transform: translateX(100px); }
}
@-ms-keyframes slideInFromLeft { 0% { opacity: 0; -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); } 100% { opacity: 1; -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); -ms-transform: translateX(100px); -webkit-transform: translateX(100px); transform: translateX(100px); }
}
@-o-keyframes slideInFromLeft { 0% { opacity: 0; -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); } 100% { opacity: 1; -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); -ms-transform: translateX(100px); -webkit-transform: translateX(100px); transform: translateX(100px); }
}
@keyframes slideInFromLeft { 0% { opacity: 0; -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); } 100% { opacity: 1; -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); -ms-transform: translateX(100px); -webkit-transform: translateX(100px); transform: translateX(100px); }
}
@-webkit-keyframes slideOutLeft { 0% { opacity: 1; -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); -ms-transform: translateX(100px); -webkit-transform: translateX(100px); transform: translateX(100px); } 100% { opacity: 0; -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); }
}
@-moz-keyframes slideOutLeft { 0% { opacity: 1; -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); -ms-transform: translateX(100px); -webkit-transform: translateX(100px); transform: translateX(100px); } 100% { opacity: 0; -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); }
}
@-ms-keyframes slideOutLeft { 0% { opacity: 1; -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); -ms-transform: translateX(100px); -webkit-transform: translateX(100px); transform: translateX(100px); } 100% { opacity: 0; -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); }
}
@-o-keyframes slideOutLeft { 0% { opacity: 1; -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); -ms-transform: translateX(100px); -webkit-transform: translateX(100px); transform: translateX(100px); } 100% { opacity: 0; -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); }
}
@keyframes slideOutLeft { 0% { opacity: 1; -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); -ms-transform: translateX(100px); -webkit-transform: translateX(100px); transform: translateX(100px); } 100% { opacity: 0; -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); }
}

Tutorial-Module - Script Codes JS Codes

var Tutorials = function(options) { var TRANSITION_TIMEOUT = 800; return { initialize: function(options) { this.options = options; /*options: { tutorials: { showCanScroll: { condition: value } }, afterTutorial: func() }*/ this.tutorials = this.options.tutorials; this.checkConditions(); return this; }, checkConditions: function() { if (this.validateConditions()) { this.numTotalDismissed = 0; this.numTutorials = _.keys(this.tutorials).length; this.render(); this.setEvents(); } else { consple.warn( "Tutorial-Controller: No truthy condition has been found. Tutorial will not be shown." ); } }, /** * this checks that at least one condition is truthy * to launch the tutorial */ validateConditions: function() { var conditions = _.pluck(this.options.tutorials, "condition"); return _.some(conditions); }, buildHTML: function() { var tutorialHTML = '<div class="tutorials">'; tutorialHTML += this.showCanScrollHTML(); tutorialHTML += this.showCanArrowsHTML(); if (this.numTutorials > 1) { tutorialHTML += '<button class="btn skip-tutorial">Skip</button>'; } tutorialHTML += "</div>"; return tutorialHTML; }, showCanScrollHTML: function() { var html = ""; if (this.tutorials.showCanScroll.condition) { html += '<div class="tutorial-mouse">'; html += '<span class="mouse">'; html += '<span class="cable-1"></span>'; html += '<span class="cable-2"></span>'; html += '<span class="spacer-h"></span>'; html += '<span class="spacer-v"></span>'; html += '<span class="mouse-wheel"></span>'; html += "</span>"; html += '<button class="btn confirm">Got it</button>'; html += "</div>"; } return html; }, showCanArrowsHTML: function() { var html = ""; if (this.tutorials.showCanArrows.condition) { html += '<div class="tutorial-arrows">'; html += '<span class="arrows">' html += '<span class="arrow-up key">'; html += '<span class="keycap">&uarr;</span>'; html += '</span>'; html += '<span class="arrow-down key">'; html += '<span class="keycap">&darr;</span>'; html += '</span>'; html += '</span>'; html += '<button class="btn confirm">Got it</button>'; html += '</div>'; } return html; }, render: function() { $(this.buildHTML()).hide().appendTo("body").fadeIn(); this.$el = $(".tutorials"); this.showNext(); }, setEvents: function() { var that = this; this.$el.find(".confirm").on("click", function(e) { that.onConfirm(); }); this.$el.find(".skip-tutorial").on("click", function(e) { that.onDismiss(); }); }, showNext: function() { var that = this; //slide out the last tutorial shown and transition the next one this.hideCurrent(); //give it a little bit time to transition between the 2 setTimeout(function() { that.$el.find("> div").eq(that.numTotalDismissed).addClass("slide-in"); }, TRANSITION_TIMEOUT); }, hideCurrent: function() { var that = this; this.$el.find("> div.slide-in").toggleClass("slide-in slide-out"); //give it a little bit time to transition between the 2 setTimeout(function() { that.$el.find("> div.slide-out").removeClass("slide-out"); }, TRANSITION_TIMEOUT); }, onConfirm: function() { this.numTotalDismissed++; //if we've reached the end of the tutorial if (this.numTotalDismissed === this.numTutorials) { this.close(); if (_.isFunction(this.options.afterTutorial)) { this.options.afterTutorial(); } } else { //transition the next tutorial this.showNext(); } }, onDismiss: function() { this.close(); }, close: function() { this.hideCurrent(); this.cleanUp(); }, cleanUp: function() { var that = this; //clean up the classes so that if we need to show the tutorial again, //the state will be as it was when starting. this.$el.fadeOut(function() { //wait until the fadeout is done before removing the classes //as it will hide the elements inside that.$el.find("> div.slide-out").removeClass("slide-out"); that.$el.remove(); }); } }.initialize(options);
};
var tutorials = new Tutorials({ tutorials: { showCanScroll: { condition: true }, showCanArrows: { condition: true } }, afterTutorial: function() {}
});
Tutorial-Module - Script Codes
Tutorial-Module - Script Codes
Home Page Home
Developer Kev Rousseau
Username kevrousso
Uploaded November 25, 2022
Rating 3
Size 6,953 Kb
Views 24,288
Do you need developer help for Tutorial-Module?

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!

Kev Rousseau (kevrousso) Script Codes
Name
Notifications
Find needle in haystack by looping through each item one by one
Menu example 2
Fing needle in haystack by splicing array in half
Square animation on scroll with instant follow
Menu example 1
A Pen by Kev Rousseau
Base Class Proxy
Square animation on scroll with instant follow, fixed banner
Proxy Pattern
Create amazing SEO content 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!