Pick the lock

Developer

Size

10,025 Kb

Views

34,408

Pick the lock Previews
Pick the lock HTML Codes
Pick the lock CSS Codes
Pick the lock JS Codes

How do I make an pick the lock?

This is the locking mechanism for my homepage. It's just to add a simple layer of interactivity to the user experience and draw the user in and get them engaged with the site. Originally at http://www.davidpuerto.com I am now planning . What is a pick the lock? How do you make a pick the lock? This script and codes were developed by Dapinitial on 11 August 2022, Thursday.

Pick the lock Previews

Pick the lock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pick the lock</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html,
body { background: #1e1e1e; overflow: hidden;
}
body{ background-image: url('https://i.imgsafe.org/6c147abfa3.jpg'); position: relative;
}
/* positioning the SVG center like a boss */
.svg-container { position: relative; min-height: 100vh;
}
.svg-container .svg-content { position: absolute; top: 50%; left: 50%; transform: translate(-25%, -50%); width: 100%; height: auto;
}
/* SVG mayhem, gangstash*t */
svg * { transition: all .187s linear; ;
}
/* lock mechanism css */
.lockMechanism { position: absolute; margin: 0 auto; width: 640px; height: 720px; z-index: 100; animation: fade-in 300ms linear 1s 1 normal forwards; transform: scale(1); transition: all 1s linear 0s; opacity: 0; cursor: pointer;
}
.lockMechanism:before { content: " "; width: 290px; height: 290px; border-radius: 50%; background-color: rgba(0, 0, 0, 1); z-index: 0;
}
.lockMechanism.far { transform: scale(0); cursor: pointer; margin: -100px auto; opacity: 0; transition: all linear 0.2s;
}
.rings { position: relative; z-index: 200;
}
.smoke { background: url(http://www.davidpuerto.com/images/smoke.gif) no-repeat; position: relative; top: -25px; left: -10px; width: 840px; height: 640px; opacity: 1.0; z-index: 300;
}
.outerWheel { position: absolute; top: 30px; left: 80px; width: 453px; height: 453px; z-index: 100;
}
#top-button,
#left-button,
#right-button { cursor: pointer; position: absolute; z-index: 2;
}
#top-button { fill: url(#linearGradient-7);
}
#left-button,
#right-button { fill: url(#linearGradient-4);
}
#light-group { transition: linear 2s all;
}
#light-group > path { transition: fill 2s ease; fill: url(#straight-black);
}
#light-group.activated > path { transition: fill 2s ease; fill: url(#radialGradient-9); position: relative;
}
#light-group.activated > path::before { transition: fill 2s ease; fill: url(#radialGradient-9); filter: url(#activatedGlow);
}
.buzz_wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-25%, -50%); width: 100%; height: auto;
}
.buzz_wrapper span { text-shadow: #fff 0 0 4px, rgba(255, 53, 24, .2) 0 0 20px; position: absolute; -webkit-filter: blur(1px); font-size: 20px; font-family: 'Courier new', fixed; font-weight: bold;
}
.buzz_wrapper span:nth-child(1) { color: #fff; margin-left: -2px; -webkit-filter: blur(2px);
}
.buzz_wrapper span:nth-child(2) { color: green; margin-left: 2px; -webkit-filter: blur(2px);
}
.buzz_wrapper span:nth-child(3) { color: blue; position: 20px 0; -webkit-filter: blur(1px);
}
.buzz_wrapper span:nth-child(4) { color: #fff; -webkit-filter: blur(1px); text-shadow: 0 0 50px rgba(255, 255, 255, 0.4);
}
.buzz_wrapper span:nth-child(5) { color: rgba(255, 255, 255, 0.4); -webkit-filter: blur(15px);
}
.buzz_wrapper span { -webkit-animation: blur 30ms infinite, jerk 50ms infinite; -webkit-user-select: none;
}
@-webkit-keyframes blur { 0% { -webkit-filter: blur(1px); opacity: 0.8; } 50% { -webkit-filter: blur(1px); opacity: 1; } 100% { -webkit-filter: blur(1px); opacity: 0.8; }
}
@-webkit-keyframes jerk { 50% { left: 1px; } 51% { left: 0; }
}
@-webkit-keyframes jerkup { 50% { top: 1px; } 51% { top: 0; }
}
.buzz_wrapper span:nth-child(3) { -webkit-animation: jerkblue 1s infinite;
}
@-webkit-keyframes jerkblue { 0% { left: 0; } 30% { left: 0; } 31% { left: 10px; } 32% { left: 0; } 98% { left: 0; } 100% { left: 10px; }
}
.buzz_wrapper span:nth-child(2) { -webkit-animation: jerkgreen 1s infinite;
}
@-webkit-keyframes jerkgreen { 0% { left: 0; } 30% { left: 0; } 31% { left: -10px; } 32% { left: 0; } 98% { left: 0; } 100% { left: -10px; }
}
.buzz_wrapper .text { -webkit-animation: jerkwhole 5s infinite; position: relative;
}
@-webkit-keyframes jerkwhole { 30% {} 40% { opacity: 1; top: 0; left: 0; -webkit-transform: scale(1, 1); -webkit-transform: skew(0, 0); } 41% { opacity: 0.8; top: 0px; left: -100px; -webkit-transform: scale(1, 1.2); -webkit-transform: skew(50deg, 0); } 42% { opacity: 0.8; top: 0px; left: 100px; -webkit-transform: scale(1, 1.2); -webkit-transform: skew(-80deg, 0); } 43% { opacity: 1; top: 0; left: 0; -webkit-transform: scale(1, 1); -webkit-transform: skew(0, 0); } 65% {}
}
#stage,
#second-inner-bevel { transform-origin: 50% 50%; display: inline-block;
}
.spin,
.reverse-spin { -webkit-animation-name: spin; -webkit-animation-duration: 2000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-name: spin; animation-duration: 2000ms; animation-iteration-count: infinite; -webkit-animation-timing-function: linear;
}
.reverse-spin { -webkit-animation-duration: 500ms; -webkit-animation-direction: reverse; animation-duration: 500ms; animation-direction: reverse;
}
.scale-down { -webkit-animation-name: scaleDown; -webkit-animation-duration: 300ms; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; animation-name: scaleDown; animation-duration: scaleDown; animation-iteration-count: 1; -webkit-animation-timing-function: linear;
}
@keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; }
}
@-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); }
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}
@-webkit-keyframes scaleDown { from { -webkit-transform: scale(1); display: block; } to { -webkit-transform: scale(0); display: none; }
}
@keyframes scaleDown { from { transform: scale(1); display: block; } to { transform: scale(0); display: none; }
}
@media all and (max-width: 250px) { #curved_bg { opacity: 0; } #secondary_content, #primary_content { fill: #195463; }
}
@media all and (max-width: 200px) { #secondary_content { opacity: 0; }
}
@media all and (max-width: 150px) { #inner-circle, #middle-circle { opacity: 0; }
}
#lock-form { z-index: 1;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!-- long ways to go to put it back to my still existent homepage www.davidpuerto.com - this is a site from like 2012 before I started playing around with SVG and I need to practice and explore responsive SVGs -->
<div class="svg-container"> <div id="lock-form"> <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg viewBox="0 0 2000 1024" version="1.1" preserveAspectRatio="xMinYMin meet" class="svg-content"> <!-- portfolio.davidpuerto.com --> <title>Pick the Lock</title> <desc>SpaceLab is a hyperreal thrill machine; delivering in ways that cannot be quantified. Original Bluelighter since 1999. The question has been answered...</desc> <foreignObject> </foreignObject> <defs> <linearGradient id="straight-black" gradientUnits="userSpaceOnUse" fy="100%"> <stop offset="0" style="stop-color:#000" /> <stop offset="1" style="stop-color:#000" /> </linearGradient> <linearGradient x1="51.7947078%" y1="100%" x2="51.7947078%" y2="12.4967448%" id="linearGradient-1"> <stop stop-color="#5E5E5E" offset="0%"></stop> <stop stop-color="#141414" offset="100%"></stop> </linearGradient> <radialGradient cx="50%" cy="0%" fx="50%" fy="0%" r="100%" id="radialGradient-2"> <stop stop-color="#4F4F4F" offset="0%"></stop> <stop stop-color="#131313" offset="100%"></stop> </radialGradient> <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3"> <stop stop-color="#5C5C5C" offset="0%"></stop> <stop stop-color="#151515" offset="100%"></stop> </linearGradient> <linearGradient x1="83.7391752%" y1="76.6535514%" x2="31.4188747%" y2="50%" id="linearGradient-4"> <stop stop-color="#393939" offset="0%"></stop> <stop stop-color="#202020" offset="100%"></stop> </linearGradient> <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-5"> <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix> <feMerge> <feMergeNode in="shadowMatrixOuter1"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-6"> <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix> <feMerge> <feMergeNode in="shadowMatrixOuter1"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> <linearGradient x1="51.7947078%" y1="100%" x2="51.7947078%" y2="12.4967448%" id="linearGradient-7"> <stop stop-color="#454545" offset="0%"></stop> <stop stop-color="#9A9A9A" offset="100%"></stop> </linearGradient> <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-8"> <feOffset dx="0" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> <feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix> <feMerge> <feMergeNode in="shadowMatrixOuter1"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="148.133681%" id="radialGradient-9"> <stop stop-color="#00D8FF" offset="0%"></stop> <stop stop-color="#0066FF" offset="100%"></stop> </radialGradient> </defs> <g id="stage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="lock-mechanism" transform="translate(35.000000, 26.000000)"> <circle id="outer-black" fill="#000000" cx="486.5" cy="486.5" r="486.5"></circle> <ellipse id="record-spin-outer" fill="#2E2E2E" cx="487.5" cy="486" rx="466.5" ry="466"></ellipse> <circle id="record-spin" stroke="#363636" stroke-width="2" fill="#000000" cx="487" cy="487" r="446"></circle> <path d="M489,881 C708.257046,881 886,703.257046 886,484 C886,264.742954 708.257046,87 489,87 C269.742954,87 92,264.742954 92,484 C92,703.257046 269.742954,881 489,881 Z M489.5,793 C659.879845,793 798,654.879845 798,484.5 C798,314.120155 659.879845,176 489.5,176 C319.120155,176 181,314.120155 181,484.5 C181,654.879845 319.120155,793 489.5,793 Z" id="second-inner-bevel" fill="url(#linearGradient-1)"></path> <circle id="ring-container" stroke="url(#radialGradient-2)" stroke-width="8" fill="#000000" cx="486.5" cy="486.5" r="313.5"></circle> <path d="M355.357002,935.78959 C160.510896,879.662052 18,700.205809 18,487.5 C18,432.275923 27.6060821,379.293065 45.2401381,330.127845 C76.0307393,330.409085 119.405818,294.82596 150.626588,240.75 C173.42437,201.263083 184.442261,161.093914 182.638816,131.966072 L182.638816,131.966072 C264.111025,62.7590969 369.673606,21 485,21 C604.047377,21 712.690722,65.497267 795.171522,138.750161 L795.171522,138.750163 C795.289329,167.158063 806.297572,204.245573 827.373412,240.75 C855.892709,290.146871 894.553936,324.112747 924.500479,329.406545 C942.299699,378.774716 952,432.005758 952,487.5 C952,698.587672 811.649129,876.929739 619.080686,934.487265 C606.195825,906.215107 552.17955,885 487.5,885 C421.831058,885 367.154115,906.869118 355.357001,935.78959 Z M489,878 C707.152476,878 884,701.376334 884,483.5 C884,265.623666 707.152476,89 489,89 C270.847524,89 94,265.623666 94,483.5 C94,701.376334 270.847524,878 489,878 Z" id="outer-ring" fill="url(#linearGradient-3)"></path> <g id="left-button" class="bigButton" data-panel="3" transform="translate(15.000000, 485.000000)"> <path d="M2,6.13209281e-14 C3.74706994,71.0157846 20.8286252,142.757642 54.8339547,210.277063 C88.5464837,277.215112 135.354643,332.978322 190.492369,376 L230,308.440787 C186.74958,273.051734 149.979191,228.107159 123.094751,174.726649 C96.0050679,120.938618 81.6646069,63.9696908 78.9411792,7.34512031 L2,0 L2,6.13209281e-14 Z" id="second-inner-bevel-4" fill="#636262"></path> <path d="M0,2 C1.74706994,73.0157846 18.8286252,144.757642 52.8339547,212.277063 C86.5464837,279.215112 133.354643,334.978322 188.492369,378 L228,310.440787 C184.74958,275.051734 147.979191,230.107159 121.094751,176.726649 C94.0050679,122.938618 79.6646069,65.9696908 76.9411792,9.34512031 L0,2 L0,2 Z" id="second-inner-bevel-6" filter="url(#filter-5)"></path> </g> <g id="right-button" class="bigButton" data-panel="2" transform="translate(735.000000, 484.000000)"> <path d="M228,6.13209281e-14 C226.25293,71.0157846 209.171375,142.757642 175.166045,210.277063 C141.453516,277.215112 94.6453569,332.978322 39.5076309,376 L0,308.440787 C43.2504202,273.051734 80.0208089,228.107159 106.905249,174.726649 C133.994932,120.938618 148.335393,63.9696908 151.058821,7.34512031 L228,0 L228,6.13209281e-14 Z" id="second-inner-bevel-5" fill="#636363"></path> <path d="M230,2 C228.25293,73.0157846 211.171375,144.757642 177.166045,212.277063 C143.453516,279.215112 96.6453569,334.978322 41.5076309,378 L2,310.440787 C45.2504202,275.051734 82.0208089,230.107159 108.905249,176.726649 C135.994932,122.938618 150.335393,65.9696908 153.058821,9.34512031 L230,2 L230,2 Z" id="second-inner-bevel-8" filter="url(#filter-6)"></path> </g> <g id="top-button" class="bigButton" data-panel="1" transform="translate(277.000000, 9.000000)"> <path d="M425.792257,48.4260485 C361.178933,17.3791361 288.854648,0 212.502336,0 C136.150025,0 63.8257395,17.3791361 -0.787584188,48.4260485 L41.6164,115.936451 C93.9154696,92.2045084 151.928364,79 213,79 C273.770121,79 331.511628,92.074447 383.608569,115.585722 L425.792257,48.4260485 Z" id="second-inner-bevel-3" fill="#BABABA"></path> <path d="M424.048281,52.0016994 C359.700987,21.2325887 287.617032,4 211.5,4 C135.987883,4 64.4449928,20.9597768 0.487318121,51.2706849 L42.7921915,117.862817 C94.4685194,94.8151465 151.734076,82 212,82 C272.568817,82 330.107031,94.9442863 381.98655,118.2111 L424.048281,52.0016994 Z" id="second-inner-bevel-7" filter="url(#filter-8)"></path> </g> </g> <g id="light-group" transform="translate(150.000000, 142.000000)"> <path d="M427,705.223234 C409.194568,701.79513 390.807129,700 372,700 C353.192871,700 334.805432,701.79513 317,705.223234 L329.937038,745 C343.607804,742.661278 357.661481,741.44293 372,741.44293 C386.338519,741.44293 400.392196,742.661278 414.062962,745 L427,705.223234 Z" id="second-inner-bevel-14" transform="translate(372.000000, 722.500000) scale(1, -1) translate(-372.000000, -722.500000) "></path> <path d="M78,353.223234 C60.1945684,349.79513 41.8071291,348 23,348 C4.19287088,348 -14.1945684,349.79513 -32,353.223234 L-19.0629617,393 C-5.39219598,390.661278 8.66148113,389.44293 23,389.44293 C37.3385189,389.44293 51.392196,390.661278 65.0629617,393 L78,353.223234 Z" id="second-inner-bevel-16" transform="translate(23.000000, 370.500000) scale(1, -1) rotate(-90.000000) translate(-23.000000, -370.500000) "></path> <path d="M777,353.223234 C759.194568,349.79513 740.807129,348 722,348 C703.192871,348 684.805432,349.79513 667,353.223234 L679.937038,393 C693.607804,390.661278 707.661481,389.44293 722,389.44293 C736.338519,389.44293 750.392196,390.661278 764.062962,393 L777,353.223234 Z" id="second-inner-bevel-17" transform="translate(722.000000, 370.500000) scale(-1, -1) rotate(-90.000000) translate(-722.000000, -370.500000) "></path> <path d="M427,5.22323365 C409.194568,1.79513034 390.807129,0 372,0 C353.192871,0 334.805432,1.79513034 317,5.22323365 L329.937038,45 C343.607804,42.6612779 357.661481,41.4429305 372,41.4429305 C386.338519,41.4429305 400.392196,42.6612779 414.062962,45 L427,5.22323365 Z" id="second-inner-bevel-15"></path> <path d="M678,109.223234 C660.194568,105.79513 641.807129,104 623,104 C604.192871,104 585.805432,105.79513 568,109.223234 L580.937038,149 C594.607804,146.661278 608.661481,145.44293 623,145.44293 C637.338519,145.44293 651.392196,146.661278 665.062962,149 L678,109.223234 Z" id="second-inner-bevel-18" transform="translate(623.000000, 126.500000) rotate(45.000000) translate(-623.000000, -126.500000) "></path> <path d="M179,109.223234 C161.194568,105.79513 142.807129,104 124,104 C105.192871,104 86.8054316,105.79513 69,109.223234 L81.9370383,149 C95.607804,146.661278 109.661481,145.44293 124,145.44293 C138.338519,145.44293 152.392196,146.661278 166.062962,149 L179,109.223234 Z" id="second-inner-bevel-19" transform="translate(124.000000, 126.500000) scale(-1, 1) rotate(45.000000) translate(-124.000000, -126.500000) "></path> <path d="M678,597.223234 C660.194568,593.79513 641.807129,592 623,592 C604.192871,592 585.805432,593.79513 568,597.223234 L580.937038,637 C594.607804,634.661278 608.661481,633.44293 623,633.44293 C637.338519,633.44293 651.392196,634.661278 665.062962,637 L678,597.223234 Z" id="second-inner-bevel-21" transform="translate(623.000000, 614.500000) scale(1, -1) rotate(45.000000) translate(-623.000000, -614.500000) "></path> <path d="M179,597.223234 C161.194568,593.79513 142.807129,592 124,592 C105.192871,592 86.8054316,593.79513 69,597.223234 L81.9370383,637 C95.607804,634.661278 109.661481,633.44293 124,633.44293 C138.338519,633.44293 152.392196,634.661278 166.062962,637 L179,597.223234 Z" id="second-inner-bevel-20" transform="translate(124.000000, 614.500000) scale(-1, -1) rotate(45.000000) translate(-124.000000, -614.500000) "></path>
<filter id="activatedGlow">	<feGaussianBlur in="SourceAlpha" stdDeviation="7"/>	<feOffset dx="0" dy="0" result="offsetblur"/>	<feFlood flood-color="rgba(0,216,255,0.65)"/>	<feComposite in2="offsetblur" operator="in" />	</filter> </g> </g> </svg> <div class="buzz_wrapper"> <div class="text"> <span>Pick the lock</span> </div> <div class="scanline"></div> </div> </div>
</div>
<div class="slider__itemY"></div>
<div class="slider__itemX"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pick the lock - Script Codes CSS Codes

html,
body { background: #1e1e1e; overflow: hidden;
}
body{ background-image: url('https://i.imgsafe.org/6c147abfa3.jpg'); position: relative;
}
/* positioning the SVG center like a boss */
.svg-container { position: relative; min-height: 100vh;
}
.svg-container .svg-content { position: absolute; top: 50%; left: 50%; transform: translate(-25%, -50%); width: 100%; height: auto;
}
/* SVG mayhem, gangstash*t */
svg * { transition: all .187s linear; ;
}
/* lock mechanism css */
.lockMechanism { position: absolute; margin: 0 auto; width: 640px; height: 720px; z-index: 100; animation: fade-in 300ms linear 1s 1 normal forwards; transform: scale(1); transition: all 1s linear 0s; opacity: 0; cursor: pointer;
}
.lockMechanism:before { content: " "; width: 290px; height: 290px; border-radius: 50%; background-color: rgba(0, 0, 0, 1); z-index: 0;
}
.lockMechanism.far { transform: scale(0); cursor: pointer; margin: -100px auto; opacity: 0; transition: all linear 0.2s;
}
.rings { position: relative; z-index: 200;
}
.smoke { background: url(http://www.davidpuerto.com/images/smoke.gif) no-repeat; position: relative; top: -25px; left: -10px; width: 840px; height: 640px; opacity: 1.0; z-index: 300;
}
.outerWheel { position: absolute; top: 30px; left: 80px; width: 453px; height: 453px; z-index: 100;
}
#top-button,
#left-button,
#right-button { cursor: pointer; position: absolute; z-index: 2;
}
#top-button { fill: url(#linearGradient-7);
}
#left-button,
#right-button { fill: url(#linearGradient-4);
}
#light-group { transition: linear 2s all;
}
#light-group > path { transition: fill 2s ease; fill: url(#straight-black);
}
#light-group.activated > path { transition: fill 2s ease; fill: url(#radialGradient-9); position: relative;
}
#light-group.activated > path::before { transition: fill 2s ease; fill: url(#radialGradient-9); filter: url(#activatedGlow);
}
.buzz_wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-25%, -50%); width: 100%; height: auto;
}
.buzz_wrapper span { text-shadow: #fff 0 0 4px, rgba(255, 53, 24, .2) 0 0 20px; position: absolute; -webkit-filter: blur(1px); font-size: 20px; font-family: 'Courier new', fixed; font-weight: bold;
}
.buzz_wrapper span:nth-child(1) { color: #fff; margin-left: -2px; -webkit-filter: blur(2px);
}
.buzz_wrapper span:nth-child(2) { color: green; margin-left: 2px; -webkit-filter: blur(2px);
}
.buzz_wrapper span:nth-child(3) { color: blue; position: 20px 0; -webkit-filter: blur(1px);
}
.buzz_wrapper span:nth-child(4) { color: #fff; -webkit-filter: blur(1px); text-shadow: 0 0 50px rgba(255, 255, 255, 0.4);
}
.buzz_wrapper span:nth-child(5) { color: rgba(255, 255, 255, 0.4); -webkit-filter: blur(15px);
}
.buzz_wrapper span { -webkit-animation: blur 30ms infinite, jerk 50ms infinite; -webkit-user-select: none;
}
@-webkit-keyframes blur { 0% { -webkit-filter: blur(1px); opacity: 0.8; } 50% { -webkit-filter: blur(1px); opacity: 1; } 100% { -webkit-filter: blur(1px); opacity: 0.8; }
}
@-webkit-keyframes jerk { 50% { left: 1px; } 51% { left: 0; }
}
@-webkit-keyframes jerkup { 50% { top: 1px; } 51% { top: 0; }
}
.buzz_wrapper span:nth-child(3) { -webkit-animation: jerkblue 1s infinite;
}
@-webkit-keyframes jerkblue { 0% { left: 0; } 30% { left: 0; } 31% { left: 10px; } 32% { left: 0; } 98% { left: 0; } 100% { left: 10px; }
}
.buzz_wrapper span:nth-child(2) { -webkit-animation: jerkgreen 1s infinite;
}
@-webkit-keyframes jerkgreen { 0% { left: 0; } 30% { left: 0; } 31% { left: -10px; } 32% { left: 0; } 98% { left: 0; } 100% { left: -10px; }
}
.buzz_wrapper .text { -webkit-animation: jerkwhole 5s infinite; position: relative;
}
@-webkit-keyframes jerkwhole { 30% {} 40% { opacity: 1; top: 0; left: 0; -webkit-transform: scale(1, 1); -webkit-transform: skew(0, 0); } 41% { opacity: 0.8; top: 0px; left: -100px; -webkit-transform: scale(1, 1.2); -webkit-transform: skew(50deg, 0); } 42% { opacity: 0.8; top: 0px; left: 100px; -webkit-transform: scale(1, 1.2); -webkit-transform: skew(-80deg, 0); } 43% { opacity: 1; top: 0; left: 0; -webkit-transform: scale(1, 1); -webkit-transform: skew(0, 0); } 65% {}
}
#stage,
#second-inner-bevel { transform-origin: 50% 50%; display: inline-block;
}
.spin,
.reverse-spin { -webkit-animation-name: spin; -webkit-animation-duration: 2000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-name: spin; animation-duration: 2000ms; animation-iteration-count: infinite; -webkit-animation-timing-function: linear;
}
.reverse-spin { -webkit-animation-duration: 500ms; -webkit-animation-direction: reverse; animation-duration: 500ms; animation-direction: reverse;
}
.scale-down { -webkit-animation-name: scaleDown; -webkit-animation-duration: 300ms; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; animation-name: scaleDown; animation-duration: scaleDown; animation-iteration-count: 1; -webkit-animation-timing-function: linear;
}
@keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; }
}
@-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); }
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}
@-webkit-keyframes scaleDown { from { -webkit-transform: scale(1); display: block; } to { -webkit-transform: scale(0); display: none; }
}
@keyframes scaleDown { from { transform: scale(1); display: block; } to { transform: scale(0); display: none; }
}
@media all and (max-width: 250px) { #curved_bg { opacity: 0; } #secondary_content, #primary_content { fill: #195463; }
}
@media all and (max-width: 200px) { #secondary_content { opacity: 0; }
}
@media all and (max-width: 150px) { #inner-circle, #middle-circle { opacity: 0; }
}
#lock-form { z-index: 1;
}

Pick the lock - Script Codes JS Codes

var isActive = false;
var countClicks = 0;
$('#second-inner-bevel').attr('class', 'spin');
$('[id$="button"]').on({ click: function() { isActive = true; countClicks += 1; console.log(countClicks); console.log(isActive); $(this) .children('path:eq(1)') .css('fill', 'magenta'); if (isActive && countClicks >= 3) { $('#light-group').attr('class', 'activated'); setTimeout(function() { $('#stage').attr('class', 'reverse-spin'); }, 1000); } }
});
$('#ring-container').on({ click: function() { $('#stage').removeAttr('class', 'spin'); $('#second-inner-bevel').removeAttr('class', 'reverse-spin'); }
});
// Minified: only 160 bytes!
function debounce(a,b,c){var d;return function(){var e=this,f=arguments;clearTimeout(d),d=setTimeout(function(){d=null,c||a.apply(e,f)},b),c&&!d&&a.apply(e,f)}}
var TiltAnimation = function() { var slider, mouseX, mouseY, textX, textY; var _init = function() { mouseX = 0; mouseY = 0; slider = $('.svg-content'); textX = document.getElementsByClassName('slider__itemX')[0]; textY = document.getElementsByClassName('slider__itemY')[0]; _addEventHandlers(); } var _addEventHandlers = function() { window.addEventListener('mousemove', _getMousePos, false); if (window.DeviceMotionEvent != undefined) { window.addEventListener('devicemotion', _accelerometerUpdate, false); } } var _accelerometerUpdate = function(e) { // http://stackoverflow.com/questions/4474508/access-accelerometer-via-javascript-in-android var aX = event.accelerationIncludingGravity.x*1; var aY = event.accelerationIncludingGravity.y*1; var aZ = event.accelerationIncludingGravity.z*1; //The following two lines are just to calculate a // tilt. Not really needed. var xPosition = Math.atan2(aY, aZ) * 20; var yPosition = Math.atan2(aX, aZ) * 20; xPosition = Math.round(xPosition * 1000) / 1000; yPosition = Math.round(yPosition * 1000) / 1000; _animate(yPosition, xPosition); textY.innerHTML = yPosition; textX.innerHTML = xPosition; } var _getMousePos = function(e) { e = e || window.event; mouseX = e.pageX; mouseY = e.pageY; var xPos = (mouseX / window.innerWidth) - 0.5; var yPos = (mouseY / window.innerHeight) - 0.5; var rotationYValue = 5 * xPos; var rotationXValue = 5 * yPos; _animate(rotationYValue,rotationXValue); textX.innerHTML = mouseX; textY.innerHTML = mouseY; } var _animate = function(rotationYValue, rotationXValue) { TweenLite.to(slider, 0.6, { rotationY:rotationYValue, rotationX:rotationXValue, ease:Power1.easeOut, transformPerspective:900, transformOrigin:"center" }); } return { init: _init }
}();
TiltAnimation.init();

Home Page	Home
Developer	Dapinitial
Username	dapinitial
Uploaded	August 11, 2022
Rating	3
Size	10,025 Kb
Views	34,408

Do you need developer help for Pick the lock?

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!

Dapinitial (dapinitial) Script Codes

Name	Size
Skeumorphic Switch	3,559 Kb
OK Go WTF Effect	2,010 Kb
Breaking out of overflow hidden	7,877 Kb
Grid Using Golden Ratio and floats	9,695 Kb
A Pen by dapinitial	2,132 Kb
Clock loader	1,775 Kb
Base64 encoded animated loading folder gif	2,440 Kb
Sony Xperia Z3 Flat MockUp	4,379 Kb
A Pen by dapinitial	3,631 Kb
This is how we do it	3,283 Kb

Create amazing web 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!

Similar Scripts & Codes

Name	Username	Size
A Pen by Alexandru Pora	Axpro	1,615 Kb
Resize image	Happyhj	1,892 Kb
Twitch API	Coderpilot	3,412 Kb
Simple Responsive Text	Fbrz	2,282 Kb
Colorful Sliders	Chanrith	1,246 Kb
Sass Get Function	Lukewatts	2,155 Kb
Fading gradient button	Insprd	1,713 Kb
Voting App - register	MatheusLima92	1,948 Kb
Cartoon Bomb	Tcmulder	4,929 Kb
We Simplify animation	Meodai	48,169 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!