Rollins
How do I make an rollins?
What is a rollins? How do you make a rollins? This script and codes were developed by Nick Walsh on 06 November 2022, Sunday.
Rollins - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Rollins</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> <div class="wrap"> <a href="#">Restart</a> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 850.4 408.7" enable-background="new 0 0 850.4 408.7" xml:space="preserve"> <g class="rol"> <g class="rol-rotate rol-rotate--5"> <rect x="32.1" y="50.2" fill="#FFFFFF" width="54.1" height="34.7"/> <path fill="#FBB616" d="M70.1,68.2c0-6-4.9-10.9-10.9-10.9s-10.9,4.9-10.9,10.9H70.1z"/> <rect x="37" y="72.5" fill="#1D4495" width="43.8" height="7.1"/> <line fill="none" stroke="#444445" stroke-width="3.7947" stroke-miterlimit="10" x1="86.3" y1="50.2" x2="86.3" y2="129"/> </g> <g class="rol-rotate rol-rotate--6"> <rect x="765.2" y="51" fill="#FBB616" width="54.1" height="34.7"/> <line fill="none" stroke="#444445" stroke-width="3.7947" stroke-miterlimit="10" x1="764.2" y1="50.2" x2="764.2" y2="114"/> <polygon fill="#FBB616" points="796.9,78.6 792.9,71.3 790.2,71.3 790.2,72.5 790.9,72.5 790.9,78.6 781.6,78.6 781.6,72.5 782.9,72.5 782.9,64.2 781.6,64.2 781.6,58.1 798.5,58.1 802.5,61.9 802.5,68 799.9,70 801.3,72.4 803,72.4 803,78.6 "/> <path fill="#1D4495" d="M798.1,59.1l3.4,3.2v5.2l-3,2.2l2.2,3.8h1.3v4.1h-4.4l-4.1-7.3h-4.3v3.3h0.7v4h-7.3v-4h1.3V63.2h-1.3v-4.1H798.1 M798.9,57.1h-0.8h-15.5h-2v2v4.1v2h1.3v6.2h-1.3v2v4v2h2h7.3h2v-2v-4v-1.2h0.3l3.5,6.2l0.6,1h1.2h4.4h2v-2v-4.1v-2h-2h-0.1l-0.7-1.2l1.5-1.1l0.8-0.6v-1v-5.2v-0.9l-0.6-0.6l-3.4-3.2L798.9,57.1L798.9,57.1z"/> <polygon fill="#1D4495" points="788.9,63.3 788.9,66.5 795.5,66.5 796.3,65.6 796.3,64 795.6,63.3 "/> </g> <polygon class="rol-slide rol-slide--2" fill="#C1803E" points="16.1,123.7 86.4,100.5 156.8,123.7 "/> <polygon class="rol-slide rol-slide--3" fill="#ECD1B5" points="157.6,132.9 15.3,132.9 8.8,123.9 164,123.9 "/> <rect class="rol-scaleV rol-scaleV--3" x="15.2" y="132.9" fill="#FFEEDC" width="142.1" height="275.8"/> <path class="rol-bounce rol-bounce--6" fill="#3F4953" d="M86.3,182.2c-6.1,0-11.1,5-11.1,11.1v33.4h22.2v-33.4C97.4,187.1,92.4,182.2,86.3,182.2z"/> <rect class="rol-scaleH rol-scaleH--4" x="71.3" y="221.2" fill="#CCC1B5" width="29.8" height="5.5"/> <path class="rol-bounce rol-bounce--7" fill="#3F4953" d="M86.3,269.5c-6.1,0-11.1,5-11.1,11.1V314h22.2v-33.4C97.4,274.5,92.4,269.5,86.3,269.5z"/> <rect class="rol-scaleH rol-scaleH--5" x="71.3" y="308.5" fill="#CCC1B5" width="29.8" height="5.5"/> <polygon class="rol-slide rol-slide--2" fill="#C1803E" points="693.8,123.7 764.1,100.5 834.4,123.7 "/> <polygon class="rol-slide rol-slide--3" fill="#ECD1B5" points="835.3,132.9 692.9,132.9 686.5,123.9 841.7,123.9 "/> <rect class="rol-scaleV rol-scaleV--4" x="693.1" y="132.9" fill="#FFEEDC" width="142.1" height="275.8"/> <path class="rol-bounce rol-bounce--6" fill="#3F4953" d="M764.1,182.2c-6.1,0-11.1,5-11.1,11.1v33.4h22.2v-33.4C775.2,187.1,770.2,182.2,764.1,182.2z"/> <rect class="rol-scaleH rol-scaleH--4" x="749.2" y="221.2" fill="#CCC1B5" width="29.8" height="5.5"/> <path class="rol-bounce rol-bounce--7" fill="#3F4953" d="M764.1,269.5c-6.1,0-11.1,5-11.1,11.1V314h22.2v-33.4C775.2,274.5,770.2,269.5,764.1,269.5z"/> <rect class="rol-scaleH rol-scaleH--5" x="749.2" y="308.5" fill="#CCC1B5" width="29.8" height="5.5"/> <rect class="rol-scaleV rol-scaleV--1" x="157.3" y="201.2" fill="#EEDFCF" width="535.8" height="207.5"/> <polygon class="rol-scaleV rol-scaleV--11" fill="#C1803E" points="701.6,201.2 148.8,201.2 157.3,187.5 693.1,187.5 "/> <path class="rol-rotate rol-rotate--1" fill="#DDC3AA" d="M210,334.5c-3.1-2.4-7.4-2.4-10.5,0c-6.2,4.7-15.5,13-15.5,19.5v54.8h41.6V354C225.6,347.5,216.2,339.2,210,334.5z"/> <path class="rol-rotate rol-rotate--3" fill="#DDC3AA" d="M283.5,334.5c-3.1-2.4-7.4-2.4-10.5,0c-6.2,4.7-15.5,13-15.5,19.5v54.8H299V354C299,347.5,289.6,339.2,283.5,334.5z"/> <path class="rol-rotate rol-rotate--4" fill="#DDC3AA" d="M576.6,334.5c-3.1-2.4-7.4-2.4-10.5,0c-6.2,4.7-15.5,13-15.5,19.5v54.8h41.6V354C592.2,347.5,582.8,339.2,576.6,334.5z"/> <path class="rol-rotate rol-rotate--2" fill="#DDC3AA" d="M650.1,334.5c-3.1-2.4-7.4-2.4-10.5,0c-6.2,4.7-15.5,13-15.5,19.5v54.8h41.6V354C665.6,347.5,656.2,339.2,650.1,334.5z"/> <circle class="rol-scale rol-scale--1" fill="#A09E86" cx="186.7" cy="250.9" r="11.5"/> <circle class="rol-scale rol-scale--5" fill="#A09E86" cx="223.8" cy="250.9" r="11.5"/> <circle class="rol-scale rol-scale--3" fill="#A09E86" cx="261" cy="250.9" r="11.5"/> <circle class="rol-scale rol-scale--7" fill="#A09E86" cx="298.1" cy="250.9" r="11.5"/> <path class="rol-scaleV rol-scaleV--9" fill="#FFEEDC" d="M329.7,204.4v23.8h-11.9V224c0-4.9-4-8.8-8.8-8.8c-4.9,0-8.8,3.9-8.8,8.8v4.2h-14.3V224c0-4.9-3.9-8.8-8.8-8.8s-8.8,3.9-8.8,8.8v4.2h-14.3V224c0-4.9-4-8.8-8.8-8.8s-8.8,3.9-8.8,8.8v4.2H222V224c0-4.9-4-8.8-8.8-8.8s-8.8,3.9-8.8,8.8v4.2H190V224c0-4.9-4-8.8-8.8-8.8s-8.8,3.9-8.8,8.8v4.2h-15.1v-23.8H329.7z"/> <circle class="rol-scale rol-scale--4" fill="#A09E86" cx="550.6" cy="250.9" r="11.5"/> <circle class="rol-scale rol-scale--8" fill="#A09E86" cx="587.7" cy="250.9" r="11.5"/> <circle class="rol-scale rol-scale--2" fill="#A09E86" cx="624.9" cy="250.9" r="11.5"/> <circle class="rol-scale rol-scale--6" fill="#A09E86" cx="662" cy="250.9" r="11.5"/> <path class="rol-scaleV rol-scaleV--10" fill="#FFEEDC" d="M520.6,204.4v23.8h11.9V224c0-4.9,4-8.8,8.8-8.8c4.9,0,8.8,3.9,8.8,8.8v4.2h14.3V224c0-4.9,3.9-8.8,8.8-8.8s8.8,3.9,8.8,8.8v4.2h14.3V224c0-4.9,4-8.8,8.8-8.8s8.8,3.9,8.8,8.8v4.2h14.3V224c0-4.9,4-8.8,8.8-8.8s8.8,3.9,8.8,8.8v4.2h14.3V224c0-4.9,4-8.8,8.8-8.8s8.8,3.9,8.8,8.8v4.2h15.1v-23.8H520.6z"/> <rect class="rol-scaleH rol-scaleH--6" x="156" y="281.1" fill="#C1803E" width="537.1" height="12.5"/> <polygon class="rol-slide rol-slide--1" fill="#C1803E" points="330.4,31.3 425.2,0 519.9,31.3 "/> <rect class="rol-scaleV rol-scaleV--2" x="329.7" y="43.7" fill="#FFEEDC" width="190.9" height="365"/> <path class="rol-scale rol-scale--10" fill="#EEDFCF" d="M424.5,270.8c0,0-41.5,36.9-41.5,52v85.9h84.2v-85.9C467.3,307.7,424.5,270.8,424.5,270.8z"/> <circle class="rol-scale rol-scale--9" fill="#C6C5B6" cx="424.5" cy="239.4" r="13.2"/> <rect class="rol-scaleV rol-scaleV--13" x="398.3" y="124.4" fill="#A09E86" width="53.7" height="74"/> <rect class="rol-scaleH rol-scaleH--7" x="393.6" y="195.4" fill="#CCC1B5" width="63.1" height="5.7"/> <polygon class="rol-slide rol-slide--4" fill="#ECD1B5" points="521.1,43.7 329.3,43.7 320.6,31.5 529.7,31.5 "/> <path class="rol-bounce rol-bounce--1" fill="#3F4953" d="M359.2,69.2c-5,0-9.1,4.1-9.1,9.1v11.3h18.2V78.3C368.3,73.2,364.2,69.2,359.2,69.2z"/> <path class="rol-bounce rol-bounce--2" fill="#3F4953" d="M392.2,69.2c-5,0-9.1,4.1-9.1,9.1v11.3h18.2V78.3C401.3,73.2,397.2,69.2,392.2,69.2z"/> <path class="rol-bounce rol-bounce--3" fill="#3F4953" d="M425.2,69.2c-5,0-9.1,4.1-9.1,9.1v11.3h18.2V78.3C434.3,73.2,430.2,69.2,425.2,69.2z"/> <path class="rol-bounce rol-bounce--4" fill="#3F4953" d="M458.2,69.2c-5,0-9.1,4.1-9.1,9.1v11.3h18.2V78.3C467.3,73.2,463.2,69.2,458.2,69.2z"/> <path class="rol-bounce rol-bounce--5" fill="#3F4953" d="M491.2,69.2c-5,0-9.1,4.1-9.1,9.1v11.3h18.2V78.3C500.3,73.2,496.2,69.2,491.2,69.2z"/> <rect class="rol-scaleH rol-scaleH--3" x="343.8" y="89.6" fill="#CCC1B5" width="162.7" height="5.7"/> <rect class="rol-scaleH rol-scaleH--1" y="378" fill="#A5A739" width="351.3" height="30.7"/> <rect class="rol-scaleH rol-scaleH--2" x="499.1" y="378" fill="#A5A739" width="351.3" height="30.7"/> <rect class="rol-scaleV rol-scaleV--12" x="520.6" y="201.2" fill="#EEDFCF" width="181" height="6.7"/> <rect class="rol-scaleV rol-scaleV--12" x="148.8" y="201.2" fill="#EEDFCF" width="181" height="6.7"/> <g class="rol-scaleV rol-scaleV--8"> <rect x="628.2" y="170" fill="#FFEEDC" width="30.2" height="24.4"/> <rect x="633.7" y="170" fill="#C6C5B6" width="19.2" height="24.4"/> <polygon fill="#C1803E" points="628.2,170 643.4,158.7 658.6,170 "/> </g> <g class="rol-scaleV rol-scaleV--7"> <rect x="561" y="170" fill="#FFEEDC" width="30.2" height="24.4"/> <rect x="566.5" y="170" fill="#C6C5B6" width="19.2" height="24.4"/> <polygon fill="#C1803E" points="561,170 576.2,158.7 591.4,170 "/> </g> <g class="rol-scaleV rol-scaleV--6"> <rect x="259.3" y="170" fill="#FFEEDC" width="30.2" height="24.4"/> <rect x="264.8" y="170" fill="#C6C5B6" width="19.2" height="24.4"/> <polygon fill="#C1803E" points="259.3,170 274.4,158.7 289.6,170 "/> </g> <g class="rol-scaleV rol-scaleV--5"> <rect x="192.1" y="170" fill="#FFEEDC" width="30.2" height="24.4"/> <rect x="197.6" y="170" fill="#C6C5B6" width="19.2" height="24.4"/> <polygon fill="#C1803E" points="192.1,170 207.3,158.7 222.5,170 "/> </g> </g> </svg>
</div> <script src="js/index.js"></script>
</body>
</html>
Rollins - Script Codes CSS Codes
body { background: #4175CB; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100vh;
}
.wrap { margin: auto; width: 60%;
}
a { border: 1px solid rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.5); font-family: monospace; font-size: 10px; font-weight: bold; padding: 1em 1.5em; text-decoration: none;
}
a:active + svg,
a:active + svg * { -webkit-animation: none !important; animation: none !important;
}
svg { display: block; padding: 2em 8%;
}
g, rect, path, line, circle { -webkit-transform-origin: center; transform-origin: center;
}
@-webkit-keyframes bounce { from { opacity: 0; } 1% { opacity: 1; } 30% { -webkit-transform: translateY(-120%); transform: translateY(-120%); } 65% { -webkit-transform: scale(1, 0.4) translateY(0); transform: scale(1, 0.4) translateY(0); } to { -webkit-transform: scale(1, 1); transform: scale(1, 1); }
}
@keyframes bounce { from { opacity: 0; } 1% { opacity: 1; } 30% { -webkit-transform: translateY(-120%); transform: translateY(-120%); } 65% { -webkit-transform: scale(1, 0.4) translateY(0); transform: scale(1, 0.4) translateY(0); } to { -webkit-transform: scale(1, 1); transform: scale(1, 1); }
}
@-webkit-keyframes bounce--alt { from { opacity: 0; } 1% { opacity: 1; } 33% { -webkit-transform: scale(1.3) translateY(-10%); transform: scale(1.3) translateY(-10%); } 67% { -webkit-transform: scale(0.85) translateY(0); transform: scale(0.85) translateY(0); } to { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes bounce--alt { from { opacity: 0; } 1% { opacity: 1; } 33% { -webkit-transform: scale(1.3) translateY(-10%); transform: scale(1.3) translateY(-10%); } 67% { -webkit-transform: scale(0.85) translateY(0); transform: scale(0.85) translateY(0); } to { -webkit-transform: scale(1); transform: scale(1); }
}
@-webkit-keyframes enter { from { -webkit-transform: rotate(-10deg) scale(1, 0.85) translateY(-100%); transform: rotate(-10deg) scale(1, 0.85) translateY(-100%); } 30% { -webkit-transform: rotate(5deg) scale(1, 1.1) translateY(0); transform: rotate(5deg) scale(1, 1.1) translateY(0); } 45% { -webkit-transform: rotate(-5deg) scale(1, 1); transform: rotate(-5deg) scale(1, 1); } 58% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 67% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 74% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 100% { -webkit-transform: rotate(0); transform: rotate(0); }
}
@keyframes enter { from { -webkit-transform: rotate(-10deg) scale(1, 0.85) translateY(-100%); transform: rotate(-10deg) scale(1, 0.85) translateY(-100%); } 30% { -webkit-transform: rotate(5deg) scale(1, 1.1) translateY(0); transform: rotate(5deg) scale(1, 1.1) translateY(0); } 45% { -webkit-transform: rotate(-5deg) scale(1, 1); transform: rotate(-5deg) scale(1, 1); } 58% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 67% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 74% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 100% { -webkit-transform: rotate(0); transform: rotate(0); }
}
@-webkit-keyframes rotate90 { from { opacity: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); } 1% { opacity: 1; } to { -webkit-transform: rotate(0); transform: rotate(0); }
}
@keyframes rotate90 { from { opacity: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); } 1% { opacity: 1; } to { -webkit-transform: rotate(0); transform: rotate(0); }
}
@-webkit-keyframes rotate-90 { from { opacity: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } 1% { opacity: 1; } to { -webkit-transform: rotate(0); transform: rotate(0); }
}
@keyframes rotate-90 { from { opacity: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } 1% { opacity: 1; } to { -webkit-transform: rotate(0); transform: rotate(0); }
}
@-webkit-keyframes rotate180 { from { opacity: 0; -webkit-transform: rotate(180deg); transform: rotate(180deg); } 1% { opacity: 1; } to { -webkit-transform: rotate(0); transform: rotate(0); }
}
@keyframes rotate180 { from { opacity: 0; -webkit-transform: rotate(180deg); transform: rotate(180deg); } 1% { opacity: 1; } to { -webkit-transform: rotate(0); transform: rotate(0); }
}
@-webkit-keyframes rotate-180 { from { opacity: 0; -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } 1% { opacity: 1; } to { -webkit-transform: rotate(0); transform: rotate(0); }
}
@keyframes rotate-180 { from { opacity: 0; -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } 1% { opacity: 1; } to { -webkit-transform: rotate(0); transform: rotate(0); }
}
@-webkit-keyframes scale { from { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes scale { from { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); }
}
@-webkit-keyframes scale--alt { from { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1.15); transform: scale(1.15); } 80% { -webkit-transform: scale(0.85); transform: scale(0.85); } to { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes scale--alt { from { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1.15); transform: scale(1.15); } 80% { -webkit-transform: scale(0.85); transform: scale(0.85); } to { -webkit-transform: scale(1); transform: scale(1); }
}
@-webkit-keyframes scaleH { from { -webkit-transform: scale(0, 1); transform: scale(0, 1); } to { -webkit-transform: scale(1, 1); transform: scale(1, 1); }
}
@keyframes scaleH { from { -webkit-transform: scale(0, 1); transform: scale(0, 1); } to { -webkit-transform: scale(1, 1); transform: scale(1, 1); }
}
@-webkit-keyframes scaleH--alt { from { -webkit-transform: scale(0, 1); transform: scale(0, 1); } 50% { -webkit-transform: scale(1.5, 1); transform: scale(1.5, 1); } to { -webkit-transform: scale(1, 1); transform: scale(1, 1); }
}
@keyframes scaleH--alt { from { -webkit-transform: scale(0, 1); transform: scale(0, 1); } 50% { -webkit-transform: scale(1.5, 1); transform: scale(1.5, 1); } to { -webkit-transform: scale(1, 1); transform: scale(1, 1); }
}
@-webkit-keyframes scaleV { from { -webkit-transform: scale(1, 0); transform: scale(1, 0); } to { -webkit-transform: scale(1, 1); transform: scale(1, 1); }
}
@keyframes scaleV { from { -webkit-transform: scale(1, 0); transform: scale(1, 0); } to { -webkit-transform: scale(1, 1); transform: scale(1, 1); }
}
@-webkit-keyframes slide { from { opacity: 0; -webkit-transform: translateY(200%); transform: translateY(200%); } 1% { opacity: 1; } 60% { -webkit-transform: translateY(-50%); transform: translateY(-50%); } to { -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes slide { from { opacity: 0; -webkit-transform: translateY(200%); transform: translateY(200%); } 1% { opacity: 1; } 60% { -webkit-transform: translateY(-50%); transform: translateY(-50%); } to { -webkit-transform: translateY(0); transform: translateY(0); }
}
@-webkit-keyframes slide--alt { from { opacity: 0; } 1% { opacity: 1; -webkit-transform: rotate(-25deg) translateY(0); transform: rotate(-25deg) translateY(0); } 50% { -webkit-transform: rotate(0) translateY(-400%); transform: rotate(0) translateY(-400%); } to { -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes slide--alt { from { opacity: 0; } 1% { opacity: 1; -webkit-transform: rotate(-25deg) translateY(0); transform: rotate(-25deg) translateY(0); } 50% { -webkit-transform: rotate(0) translateY(-400%); transform: rotate(0) translateY(-400%); } to { -webkit-transform: translateY(0); transform: translateY(0); }
}
svg { -webkit-animation: enter 2.08333s cubic-bezier(0.2, 1, 0.3, 1.2) backwards; animation: enter 2.08333s cubic-bezier(0.2, 1, 0.3, 1.2) backwards;
}
.rol-bounce { -webkit-animation: bounce 0.41667s cubic-bezier(0.2, 1, 0.3, 1.2) 1.5s backwards; animation: bounce 0.41667s cubic-bezier(0.2, 1, 0.3, 1.2) 1.5s backwards; -webkit-transform-origin: center bottom; transform-origin: center bottom;
}
.rol-bounce--2 { -webkit-animation-delay: 1.66667s; animation-delay: 1.66667s;
}
.rol-bounce--3 { -webkit-animation-delay: 1.83333s; animation-delay: 1.83333s;
}
.rol-bounce--4 { -webkit-animation-delay: 2s; animation-delay: 2s;
}
.rol-bounce--5 { -webkit-animation-delay: 2.16667s; animation-delay: 2.16667s;
}
.rol-bounce--6,
.rol-bounce--7 { -webkit-animation-name: bounce--alt; animation-name: bounce--alt; -webkit-animation-duration: 0.5s; animation-duration: 0.5s;
}
.rol-bounce--6 { -webkit-animation-delay: 1.33333s; animation-delay: 1.33333s;
}
.rol-bounce--7 { -webkit-animation-delay: 1.5s; animation-delay: 1.5s;
}
.rol-rotate--1,
.rol-rotate--3 { -webkit-animation: rotate90 0.5s ease 2.83333s backwards; animation: rotate90 0.5s ease 2.83333s backwards; -webkit-transform-origin: right bottom; transform-origin: right bottom;
}
.rol-rotate--3 { -webkit-animation-delay: 3.08333s; animation-delay: 3.08333s;
}
.rol-rotate--2,
.rol-rotate--4 { -webkit-animation: rotate-90 0.5s ease 2.83333s backwards; animation: rotate-90 0.5s ease 2.83333s backwards; -webkit-transform-origin: left bottom; transform-origin: left bottom;
}
.rol-rotate--4 { -webkit-animation-delay: 3.08333s; animation-delay: 3.08333s;
}
.rol-rotate--5 { -webkit-animation: rotate180 0.83333s ease 2.66667s backwards; animation: rotate180 0.83333s ease 2.66667s backwards; -webkit-transform-origin: right bottom; transform-origin: right bottom;
}
.rol-rotate--6 { -webkit-animation: rotate-180 0.83333s ease 3.16667s backwards; animation: rotate-180 0.83333s ease 3.16667s backwards; -webkit-transform-origin: left bottom; transform-origin: left bottom;
}
.rol-scale { -webkit-animation: scale 0.41667s cubic-bezier(0.2, 1, 0.3, 1.2) 1.41667s backwards; animation: scale 0.41667s cubic-bezier(0.2, 1, 0.3, 1.2) 1.41667s backwards;
}
.rol-scale--2 { -webkit-animation-delay: 1.54167s; animation-delay: 1.54167s;
}
.rol-scale--3 { -webkit-animation-delay: 1.66667s; animation-delay: 1.66667s;
}
.rol-scale--4 { -webkit-animation-delay: 1.79167s; animation-delay: 1.79167s;
}
.rol-scale--5 { -webkit-animation-delay: 1.91667s; animation-delay: 1.91667s;
}
.rol-scale--6 { -webkit-animation-delay: 2.04167s; animation-delay: 2.04167s;
}
.rol-scale--7 { -webkit-animation-delay: 2.16667s; animation-delay: 2.16667s;
}
.rol-scale--8 { -webkit-animation-delay: 2.29167s; animation-delay: 2.29167s;
}
.rol-scale--9 { -webkit-animation-delay: 2.41667s; animation-delay: 2.41667s; -webkit-animation-duration: 0.58333s; animation-duration: 0.58333s; -webkit-animation-name: scale--alt; animation-name: scale--alt;
}
.rol-scale--10 { -webkit-animation-delay: 2.75s; animation-delay: 2.75s; -webkit-animation-duration: 0.66667s; animation-duration: 0.66667s; -webkit-animation-name: scale--alt; animation-name: scale--alt;
}
.rol-scaleH { -webkit-animation: scaleH 0.5s cubic-bezier(0.2, 1, 0.3, 1.2) backwards; animation: scaleH 0.5s cubic-bezier(0.2, 1, 0.3, 1.2) backwards;
}
.rol-scaleH--1 { -webkit-transform-origin: left center; transform-origin: left center;
}
.rol-scaleH--2 { -webkit-transform-origin: right center; transform-origin: right center;
}
.rol-scaleH--3 { -webkit-animation-name: scaleH--alt; animation-name: scaleH--alt; -webkit-animation-delay: 1.5s; animation-delay: 1.5s; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-transform-origin: left center; transform-origin: left center;
}
.rol-scaleH--4,
.rol-scaleH--5 { -webkit-animation-duration: 0.58333s; animation-duration: 0.58333s; -webkit-animation-name: scaleH--alt; animation-name: scaleH--alt;
}
.rol-scaleH--4 { -webkit-animation-delay: 1.75s; animation-delay: 1.75s;
}
.rol-scaleH--5 { -webkit-animation-delay: 1.91667s; animation-delay: 1.91667s;
}
.rol-scaleH--6 { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-transform-origin: left center; transform-origin: left center;
}
.rol-scaleH--7 { -webkit-animation-delay: 1.83333s; animation-delay: 1.83333s; -webkit-animation-name: scaleH--alt; animation-name: scaleH--alt;
}
.rol-scaleV { -webkit-animation: scaleV 0.5s cubic-bezier(0.2, 1, 0.3, 1.2) 0.5s backwards; animation: scaleV 0.5s cubic-bezier(0.2, 1, 0.3, 1.2) 0.5s backwards; -webkit-transform-origin: center bottom; transform-origin: center bottom;
}
.rol-scaleV--2 { -webkit-animation-delay: 1.25s; animation-delay: 1.25s;
}
.rol-scaleV--3 { -webkit-animation-delay: 0.75s; animation-delay: 0.75s;
}
.rol-scaleV--4 { -webkit-animation-delay: 0.91667s; animation-delay: 0.91667s;
}
.rol-scaleV--5 { -webkit-animation-delay: 1.5s; animation-delay: 1.5s;
}
.rol-scaleV--6 { -webkit-animation-delay: 2s; animation-delay: 2s;
}
.rol-scaleV--7 { -webkit-animation-delay: 2.5s; animation-delay: 2.5s;
}
.rol-scaleV--8 { -webkit-animation-delay: 3s; animation-delay: 3s;
}
.rol-scaleV--9,
.rol-scaleV--10 { -webkit-animation-duration: 0.375s; animation-duration: 0.375s; -webkit-transform-origin: center top; transform-origin: center top;
}
.rol-scaleV--9 { -webkit-animation-delay: 1.16667s; animation-delay: 1.16667s;
}
.rol-scaleV--10 { -webkit-animation-delay: 1.5s; animation-delay: 1.5s;
}
.rol-scaleV--11 { -webkit-transform-origin: center top; transform-origin: center top; -webkit-animation-delay: 0.33333s; animation-delay: 0.33333s; -webkit-animation-duration: 0.25s; animation-duration: 0.25s;
}
.rol-scaleV--12 { -webkit-transform-origin: center top; transform-origin: center top; -webkit-animation-delay: 1.08333s; animation-delay: 1.08333s; -webkit-animation-duration: 0.16667s; animation-duration: 0.16667s;
}
.rol-scaleV--13 { -webkit-animation-delay: 2.16667s; animation-delay: 2.16667s; -webkit-animation-duration: 0.41667s; animation-duration: 0.41667s;
}
.rol-slide { -webkit-animation: slide 0.5s cubic-bezier(0.2, 1, 0.3, 1.2) 2.5s backwards; animation: slide 0.5s cubic-bezier(0.2, 1, 0.3, 1.2) 2.5s backwards;
}
.rol-slide--2 { -webkit-animation-delay: 2.25s; animation-delay: 2.25s;
}
.rol-slide--3 { -webkit-animation-delay: 1.5s; animation-delay: 1.5s;
}
.rol-slide--4 { -webkit-animation-name: slide--alt; animation-name: slide--alt; -webkit-animation-delay: 1.83333s; animation-delay: 1.83333s; -webkit-animation-duration: 0.66667s; animation-duration: 0.66667s; -webkit-transform-origin: center bottom; transform-origin: center bottom;
}
Rollins - Script Codes JS Codes
(function() {
}).call(this);
Developer | Nick Walsh |
Username | nickawalsh |
Uploaded | November 06, 2022 |
Rating | 4 |
Size | 6,753 Kb |
Views | 18,216 |
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!
Name | Size |
Mapping - 4 | 3,316 Kb |
Extend Interpolation | 2,493 Kb |
Radar | 4,953 Kb |
Mapping - 3 | 2,984 Kb |
Mapping - 2 | 2,925 Kb |
Mapping - 1 | 2,863 Kb |
Random Geometries | 2,846 Kb |
Swan | 3,872 Kb |
Constellations | 3,361 Kb |
Animations with d3-timer | 2,728 Kb |
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!
Name | Username | Size |
Css3 slide | Nakome | 3,190 Kb |
Canvas snow | Win7killer | 2,572 Kb |
Pure CSS read more toggle | Idered | 2,344 Kb |
The CodePen Logo | Kindofone | 4,259 Kb |
Z-index demo | Kblh | 1,534 Kb |
Flying Bee | Pwsm50 | 3,711 Kb |
Vertical Pan Hammer.js example | Jtangelder | 2,144 Kb |
Iron Man SVG Loading Animation | Andythayer | 3,069 Kb |
We Simplify animation | Meodai | 48,169 Kb |
JQuery FullScreen Overlay | _codemics | 2,252 Kb |
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!