Animated Unlock Tutorial

Developer
Moses Holmström
Size
6,703 Kb
Views
30,360
  1. Animated Unlock Tutorial Previews
  2. Animated Unlock Tutorial HTML Codes
  3. Animated Unlock Tutorial CSS Codes
  4. Animated Unlock Tutorial JS Codes

How do I make an animated unlock tutorial?

What is a animated unlock tutorial? How do you make a animated unlock tutorial? This script and codes were developed by Moses Holmström on 21 August 2022, Sunday.

Animated Unlock Tutorial Previews
IQ Test

Animated Unlock Tutorial - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Unlock Tutorial</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body> <div class="display-text"><h2 id="restart" class="button hide">Show tutorial again</h2></div> <div class="overlay"> <div class="display-text"> <h2 class="guide">Tap corners to unlock kiosk mode.</h2> <h3 class="guide">The unlock password can be changed via <a href="">Roidu Dashboard</a>.</h3> <h2 class="button confirm">OK, got it.</h2> </div> <div class="dot left top">1</div> <div class="dot right top">2</div> <div class="dot right bottom">3</div> <div class="dot left bottom">4</div> <div class="pointer"></div> </div>
</body> <script src="js/index.js"></script>
</body>
</html>

Animated Unlock Tutorial - Script Codes CSS Codes

@charset "UTF-8";
/* Animated unlock tutorial * * ======================== * * Many people are too busy to read * * instructions, but we didn't want * * anyone to lock themselves out of * * their device accidentally. * * This animated overlay guide will * * try to address that problem. * * * * Author: Moses Holmström * * Copyright: Roidu Ltd © 2015 * * * * All rights reserved to the full * * extent of the law. */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline;
}
html { line-height: 1;
}
ol, ul { list-style: none;
}
table { border-collapse: collapse; border-spacing: 0;
}
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle;
}
q, blockquote { quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none;
}
a img { border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block;
}
html { font-size: 125%; line-height: 1.75em;
}
* { -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none;
}
html { font-family: "Helvetica Neue LT", Helvetica, Roboto, Arial, sans-serif; color: white; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}
body { background-image: url("http://i.imgur.com/dJ10eCj.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; width: 100%; height: 100%; text-align: left;
}
a { color: #00b7e1;
}
a:hover { color: #2fd8ff;
}
a:active { color: white;
}
h2 { font-size: 27px; font-size: 1.333rem; line-height: 35px; line-height: 1.75rem; margin-top: 0px; margin-top: 0rem; padding-top: 0px; padding-top: 0rem; padding-bottom: 0px; padding-bottom: 0rem; margin-bottom: 18px; margin-bottom: 0.875rem; font-weight: bold;
}
h3 { font-size: 16px; font-size: 0.813rem; line-height: 35px; line-height: 1.75rem; margin-top: 18px; margin-top: 0.875rem; padding-top: 0px; padding-top: 0rem; padding-bottom: 0px; padding-bottom: 0rem; margin-bottom: 18px; margin-bottom: 0.875rem; font-weight: light;
}
.button { background-color: rgba(0, 0, 0, 0.813); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 10px; box-sizing: border-box; cursor: pointer; display: block; font-weight: lighter; padding: 0.25em 1.5em; margin: 0 -0.5em; text-align: center; position: relative;
}
.button:hover, .button:focus, .button:active { border-color: white; background-color: black;
}
.confirm { -moz-transition: background-color 0.3s ease-out; -o-transition: background-color 0.3s ease-out; -webkit-transition: background-color 0.3s ease-out; transition: background-color 0.3s ease-out; border: none; font-weight: normal; background-color: rgba(255, 255, 255, 0.5); color: black;
}
.confirm:hover, .confirm:focus, .confirm:active { background-color: white;
}
.display-text { cursor: default; text-align: left; top: 8em; top: 33vh; width: 60%; left: 20%; position: relative;
}
.overlay { -moz-transition: opacity 0.75s ease-out; -o-transition: opacity 0.75s ease-out; -webkit-transition: opacity 0.75s ease-out; transition: opacity 0.75s ease-out; background-color: rgba(0, 0, 0, 0.8); position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}
.overlay .confirm { left: 0;
}
.overlay .dot { text-shadow: 0 0 2px black; cursor: default; background-color: rgba(255, 255, 255, 0.33); border: 0.1em solid rgba(255, 255, 255, 0.33); border-radius: 100%; font-size: 200%; height: 2em; opacity: 0; position: absolute; text-align: center; line-height: 2em; width: 2em;
}
.overlay .dot.top { top: 1em;
}
.overlay .dot.left { left: 1em;
}
.overlay .dot.right { right: 1em;
}
.overlay .dot.bottom { bottom: 1em;
}
.overlay .dot.top.left { border-top-left-radius: 20%;
}
.overlay .dot.top.right { border-top-right-radius: 20%;
}
.overlay .dot.bottom.left { border-bottom-left-radius: 20%;
}
.overlay .dot.bottom.right { border-bottom-right-radius: 20%;
}
.overlay .dot.tap { -moz-animation: tap 2.5s ease-out 1 0.5s; -webkit-animation: tap 2.5s ease-out 1 0.5s; animation: tap 2.5s ease-out 1 0.5s;
}
.overlay .pointer { width: 8em; height: 8em; position: absolute; background-image: url("http://i.imgur.com/g4WufHQ.png"); background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0;
}
.overlay .pointer.tl { -moz-animation: point-top-left 0.75s ease-out 0.25s; -webkit-animation: point-top-left 0.75s ease-out 0.25s; animation: point-top-left 0.75s ease-out 0.25s; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); top: 2.75em; left: 3.75em;
}
.overlay .pointer.tr { -moz-animation: point-top-right 0.75s ease-out 0.25s; -webkit-animation: point-top-right 0.75s ease-out 0.25s; animation: point-top-right 0.75s ease-out 0.25s; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 3.75em; right: 2.75em;
}
.overlay .pointer.br { -moz-animation: point-bottom-right 0.75s ease-out 0.25s; -webkit-animation: point-bottom-right 0.75s ease-out 0.25s; animation: point-bottom-right 0.75s ease-out 0.25s; -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); bottom: 2.75em; right: 3.75em;
}
.overlay .pointer.bl { -moz-animation: point-bottom-left 0.75s ease-out 0.25s; -webkit-animation: point-bottom-left 0.75s ease-out 0.25s; animation: point-bottom-left 0.75s ease-out 0.25s; -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transform: rotate(-135deg); bottom: 3.75em; left: 2.75em;
}
.hide { -moz-transition: opacity 0.375s ease-out; -o-transition: opacity 0.375s ease-out; -webkit-transition: opacity 0.375s ease-out; transition: opacity 0.375s ease-out; opacity: 0; pointer-events: none;
}
/* Media queries */
@media (max-width: 768px) { html { font-size: 17px; font-size: 0.87rem; line-height: 35px; line-height: 1.75rem; } .display-text { top: 10rem; top: 33vh; width: 66.67%; left: 16.67%; } .overlay .pointer { width: 6em; height: 6em; }
}
@media (max-width: 360px) { html { font-size: 15px; font-size: 0.75rem; line-height: 35px; line-height: 1.75rem; } .display-text { top: 12rem; top: 33vh; width: 80%; left: 10%; } .overlay .pointer { width: 5em; height: 5em; }
}
/* Animations */
@-moz-keyframes tap { 0% { opacity: 0; background-color: rgba(255, 255, 255, 0); /*@include box-shadow(0 0 0 -0.25em rgba($fg,0)); */ } 7% { opacity: 1; background-color: rgba(255, 255, 255, 0.67); border-color: black; /*@include box-shadow(0 0 0 0.25em $fg); */ } 75% { opacity: 1; } 100% { opacity: 0; background-color: rgba(255, 255, 255, 0); /*@include box-shadow(0 0 0 -0.25em rgba($fg,0)); */ }
}
@-webkit-keyframes tap { 0% { opacity: 0; background-color: rgba(255, 255, 255, 0); /*@include box-shadow(0 0 0 -0.25em rgba($fg,0)); */ } 7% { opacity: 1; background-color: rgba(255, 255, 255, 0.67); border-color: black; /*@include box-shadow(0 0 0 0.25em $fg); */ } 75% { opacity: 1; } 100% { opacity: 0; background-color: rgba(255, 255, 255, 0); /*@include box-shadow(0 0 0 -0.25em rgba($fg,0)); */ }
}
@keyframes tap { 0% { opacity: 0; background-color: rgba(255, 255, 255, 0); /*@include box-shadow(0 0 0 -0.25em rgba($fg,0)); */ } 7% { opacity: 1; background-color: rgba(255, 255, 255, 0.67); border-color: black; /*@include box-shadow(0 0 0 0.25em $fg); */ } 75% { opacity: 1; } 100% { opacity: 0; background-color: rgba(255, 255, 255, 0); /*@include box-shadow(0 0 0 -0.25em rgba($fg,0)); */ }
}
@-moz-keyframes point-top-left { 0% { opacity: 0; -moz-transform: translate(2em, 2em) rotate(-45deg); transform: translate(2em, 2em) rotate(-45deg); } 33% { opacity: 1; } 50% { opacity: 1; -moz-transform: translate(0, 0) rotate(-45deg); transform: translate(0, 0) rotate(-45deg); } 66% { opacity: 1; } 100% { opacity: 0; -moz-transform: translate(2em, 2em) rotate(-45deg); transform: translate(2em, 2em) rotate(-45deg); }
}
@-webkit-keyframes point-top-left { 0% { opacity: 0; -webkit-transform: translate(2em, 2em) rotate(-45deg); transform: translate(2em, 2em) rotate(-45deg); } 33% { opacity: 1; } 50% { opacity: 1; -webkit-transform: translate(0, 0) rotate(-45deg); transform: translate(0, 0) rotate(-45deg); } 66% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate(2em, 2em) rotate(-45deg); transform: translate(2em, 2em) rotate(-45deg); }
}
@keyframes point-top-left { 0% { opacity: 0; -moz-transform: translate(2em, 2em) rotate(-45deg); -ms-transform: translate(2em, 2em) rotate(-45deg); -webkit-transform: translate(2em, 2em) rotate(-45deg); transform: translate(2em, 2em) rotate(-45deg); } 33% { opacity: 1; } 50% { opacity: 1; -moz-transform: translate(0, 0) rotate(-45deg); -ms-transform: translate(0, 0) rotate(-45deg); -webkit-transform: translate(0, 0) rotate(-45deg); transform: translate(0, 0) rotate(-45deg); } 66% { opacity: 1; } 100% { opacity: 0; -moz-transform: translate(2em, 2em) rotate(-45deg); -ms-transform: translate(2em, 2em) rotate(-45deg); -webkit-transform: translate(2em, 2em) rotate(-45deg); transform: translate(2em, 2em) rotate(-45deg); }
}
@-moz-keyframes point-top-right { 0% { opacity: 0; -moz-transform: translate(-2em, 2em) rotate(45deg); transform: translate(-2em, 2em) rotate(45deg); } 33% { opacity: 1; } 50% { opacity: 1; -moz-transform: translate(0, 0) rotate(45deg); transform: translate(0, 0) rotate(45deg); } 66% { opacity: 1; } 100% { opacity: 0; -moz-transform: translate(-2em, 2em) rotate(45deg); transform: translate(-2em, 2em) rotate(45deg); }
}
@-webkit-keyframes point-top-right { 0% { opacity: 0; -webkit-transform: translate(-2em, 2em) rotate(45deg); transform: translate(-2em, 2em) rotate(45deg); } 33% { opacity: 1; } 50% { opacity: 1; -webkit-transform: translate(0, 0) rotate(45deg); transform: translate(0, 0) rotate(45deg); } 66% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate(-2em, 2em) rotate(45deg); transform: translate(-2em, 2em) rotate(45deg); }
}
@keyframes point-top-right { 0% { opacity: 0; -moz-transform: translate(-2em, 2em) rotate(45deg); -ms-transform: translate(-2em, 2em) rotate(45deg); -webkit-transform: translate(-2em, 2em) rotate(45deg); transform: translate(-2em, 2em) rotate(45deg); } 33% { opacity: 1; } 50% { opacity: 1; -moz-transform: translate(0, 0) rotate(45deg); -ms-transform: translate(0, 0) rotate(45deg); -webkit-transform: translate(0, 0) rotate(45deg); transform: translate(0, 0) rotate(45deg); } 66% { opacity: 1; } 100% { opacity: 0; -moz-transform: translate(-2em, 2em) rotate(45deg); -ms-transform: translate(-2em, 2em) rotate(45deg); -webkit-transform: translate(-2em, 2em) rotate(45deg); transform: translate(-2em, 2em) rotate(45deg); }
}
@-moz-keyframes point-bottom-right { 0% { opacity: 0; -moz-transform: translate(-2em, -2em) rotate(135deg); transform: translate(-2em, -2em) rotate(135deg); } 33% { opacity: 1; } 50% { opacity: 1; -moz-transform: translate(0, 0) rotate(135deg); transform: translate(0, 0) rotate(135deg); } 66% { opacity: 1; } 100% { opacity: 0; -moz-transform: translate(-2em, -2em) rotate(135deg); transform: translate(-2em, -2em) rotate(135deg); }
}
@-webkit-keyframes point-bottom-right { 0% { opacity: 0; -webkit-transform: translate(-2em, -2em) rotate(135deg); transform: translate(-2em, -2em) rotate(135deg); } 33% { opacity: 1; } 50% { opacity: 1; -webkit-transform: translate(0, 0) rotate(135deg); transform: translate(0, 0) rotate(135deg); } 66% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate(-2em, -2em) rotate(135deg); transform: translate(-2em, -2em) rotate(135deg); }
}
@keyframes point-bottom-right { 0% { opacity: 0; -moz-transform: translate(-2em, -2em) rotate(135deg); -ms-transform: translate(-2em, -2em) rotate(135deg); -webkit-transform: translate(-2em, -2em) rotate(135deg); transform: translate(-2em, -2em) rotate(135deg); } 33% { opacity: 1; } 50% { opacity: 1; -moz-transform: translate(0, 0) rotate(135deg); -ms-transform: translate(0, 0) rotate(135deg); -webkit-transform: translate(0, 0) rotate(135deg); transform: translate(0, 0) rotate(135deg); } 66% { opacity: 1; } 100% { opacity: 0; -moz-transform: translate(-2em, -2em) rotate(135deg); -ms-transform: translate(-2em, -2em) rotate(135deg); -webkit-transform: translate(-2em, -2em) rotate(135deg); transform: translate(-2em, -2em) rotate(135deg); }
}
@-moz-keyframes point-bottom-left { 0% { opacity: 0; -moz-transform: translate(2em, -2em) rotate(-135deg); transform: translate(2em, -2em) rotate(-135deg); } 33% { opacity: 1; } 50% { opacity: 1; -moz-transform: translate(0, 0) rotate(-135deg); transform: translate(0, 0) rotate(-135deg); } 66% { opacity: 1; } 100% { opacity: 0; -moz-transform: translate(2em, -2em) rotate(-135deg); transform: translate(2em, -2em) rotate(-135deg); }
}
@-webkit-keyframes point-bottom-left { 0% { opacity: 0; -webkit-transform: translate(2em, -2em) rotate(-135deg); transform: translate(2em, -2em) rotate(-135deg); } 33% { opacity: 1; } 50% { opacity: 1; -webkit-transform: translate(0, 0) rotate(-135deg); transform: translate(0, 0) rotate(-135deg); } 66% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate(2em, -2em) rotate(-135deg); transform: translate(2em, -2em) rotate(-135deg); }
}
@keyframes point-bottom-left { 0% { opacity: 0; -moz-transform: translate(2em, -2em) rotate(-135deg); -ms-transform: translate(2em, -2em) rotate(-135deg); -webkit-transform: translate(2em, -2em) rotate(-135deg); transform: translate(2em, -2em) rotate(-135deg); } 33% { opacity: 1; } 50% { opacity: 1; -moz-transform: translate(0, 0) rotate(-135deg); -ms-transform: translate(0, 0) rotate(-135deg); -webkit-transform: translate(0, 0) rotate(-135deg); transform: translate(0, 0) rotate(-135deg); } 66% { opacity: 1; } 100% { opacity: 0; -moz-transform: translate(2em, -2em) rotate(-135deg); -ms-transform: translate(2em, -2em) rotate(-135deg); -webkit-transform: translate(2em, -2em) rotate(-135deg); transform: translate(2em, -2em) rotate(-135deg); }
}

Animated Unlock Tutorial - Script Codes JS Codes

document.addEventListener("DOMContentLoaded", init);
function init () { console.clear(); window.tapDuration = 1000; // pause between taps window.pauseDuration = 3000; // pause between animation loops window.dotEls = document.querySelectorAll(".dot"); window.pointEl = document.querySelector(".pointer"); window.confirmEl = document.querySelector(".confirm"); window.restartEl = document.getElementById("restart"); window.overlayEl = document.querySelector(".overlay"); confirmEl.addEventListener("click", hideOverlay); restartEl.addEventListener("click", showOverlay); topLeft(); // start animation loop
}
function hideOverlay () { restartEl.classList.remove("hide"); overlayEl.classList.add("hide");
}
function showOverlay () { restartEl.classList.add("hide"); overlayEl.classList.remove("hide");
}
// resets elements between animation cycles
function cleanUp (cb, keepTaps) { /* if the timeout between taps is too small the animation will clip abruptly. Thus we only reset tap elements once the loop has finished. */ if(!keepTaps) { [].forEach.call(dotEls, function(e) { e.classList.remove("tap"); }); } /* Pointer has to be reset every time because of some Android WebView Quirk..*/ pointEl.className = "pointer"; /* this timeout should prevent DOM from "optimizing" out the first dot animation... */ if(typeof cb === "function") setTimeout(cb, 250);
}
function topLeft () { dotEls[0].classList.add("tap"); pointEl.classList.remove("bl"); pointEl.classList.add("tl"); setTimeout(function () { cleanUp(topRight, true); }, tapDuration);
}
function topRight () { dotEls[1].classList.add("tap"); pointEl.classList.remove("tl"); pointEl.classList.add("tr"); setTimeout(function () { cleanUp(bottomRight, true); }, tapDuration);
}
function bottomRight () { dotEls[2].classList.add("tap"); pointEl.classList.remove("tr"); pointEl.classList.add("br"); setTimeout(function () { cleanUp(bottomLeft, true); }, tapDuration);
}
function bottomLeft () { dotEls[3].classList.add("tap"); pointEl.classList.remove("br"); pointEl.classList.add("bl"); setTimeout(function () { cleanUp(topLeft, false); }, pauseDuration);
}
Animated Unlock Tutorial - Script Codes
Animated Unlock Tutorial - Script Codes
Home Page Home
Developer Moses Holmström
Username thykka
Uploaded August 21, 2022
Rating 3.5
Size 6,703 Kb
Views 30,360
Do you need developer help for Animated Unlock Tutorial?

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!

Moses Holmström (thykka) Script Codes
Name
Pagination indicators
I long for quaternions....
Freaky Shadow Effect
Pageful Catalogue
Flickering ANSI logo
Orbit Loader
Brainbow Menu
Tripples
Esmes Vice Anim00ted SVG
Rotary control with value display
Create amazing blog posts 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!