Rollers

Developer

Size

4,089 Kb

Views

6,072

Rollers Previews
Rollers HTML Codes
Rollers CSS Codes
Rollers JS Codes

How do I make an rollers?

Pure css implementation of the concept: https://dribbble.com/shots/2444148-A-B-Testing. What is a rollers? How do you make a rollers? This script and codes were developed by Mikita on 19 January 2023, Thursday.

Rollers Previews

Rollers - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Rollers</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container"> <div class="phone"> <div class="phone__speaker"></div> <div class="phone__screen"></div> <div class="phone__button"></div> </div> <div class="roller roller_right"> <div class="roller__roll"></div> <div class="roller__holder"> <div class="roller__holder-top"></div> <div class="roller__holder-bottom"></div> <div class="roller__knob"></div> </div> </div> <div class="roller roller_left"> <div class="roller__roll"></div> <div class="roller__holder"> <div class="roller__holder-top"></div> <div class="roller__holder-bottom"></div> <div class="roller__knob"> </div> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Rollers - Script Codes CSS Codes

@-webkit-keyframes screen { 0%{ -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } 10% { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } 40% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 50%{ -webkit-transform: translate(0, 0); transform: translate(0, 0); } 60% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 90% { -webkit-transform: translate(0, 100%); transform: translate(0, 100%); } 100% { -webkit-transform: translate(0, 100%); transform: translate(0, 100%); }
}
@keyframes screen { 0%{ -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } 10% { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } 40% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 50%{ -webkit-transform: translate(0, 0); transform: translate(0, 0); } 60% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 90% { -webkit-transform: translate(0, 100%); transform: translate(0, 100%); } 100% { -webkit-transform: translate(0, 100%); transform: translate(0, 100%); }
}
@-webkit-keyframes right-roller { 0% { -webkit-transform: translate(150%, 100%) rotate(-45deg); transform: translate(150%, 100%) rotate(-45deg); } 10% { -webkit-transform: translate(0, 0) rotate(0deg); transform: translate(0, 0) rotate(0deg); } 40% { -webkit-transform: translate(0, 70%) rotate(0deg); transform: translate(0, 70%) rotate(0deg); } 50% { -webkit-transform: translate(150%, 100%) rotate(-45deg); transform: translate(150%, 100%) rotate(-45deg) } 100% { -webkit-transform: translate(150%, 100%) rotate(-45deg); transform: translate(150%, 100%) rotate(-45deg) }
}
@keyframes right-roller { 0% { -webkit-transform: translate(150%, 100%) rotate(-45deg); transform: translate(150%, 100%) rotate(-45deg); } 10% { -webkit-transform: translate(0, 0) rotate(0deg); transform: translate(0, 0) rotate(0deg); } 40% { -webkit-transform: translate(0, 70%) rotate(0deg); transform: translate(0, 70%) rotate(0deg); } 50% { -webkit-transform: translate(150%, 100%) rotate(-45deg); transform: translate(150%, 100%) rotate(-45deg) } 100% { -webkit-transform: translate(150%, 100%) rotate(-45deg); transform: translate(150%, 100%) rotate(-45deg) }
}
@-webkit-keyframes left-roller { 0% { -webkit-transform: translate(-150%, 100%) rotate(45deg); transform: translate(-150%, 100%) rotate(45deg); } 10% { -webkit-transform: translate(0, 0) rotate(0deg); transform: translate(0, 0) rotate(0deg); } 40% { -webkit-transform: translate(0, 70%) rotate(0deg); transform: translate(0, 70%) rotate(0deg); } 50% { -webkit-transform: translate(-150%, 100%) rotate(45deg); transform: translate(-150%, 100%) rotate(45deg) } 100% { -webkit-transform: translate(-150%, 100%) rotate(45deg); transform: translate(-150%, 100%) rotate(45deg) }
}
@keyframes left-roller { 0% { -webkit-transform: translate(-150%, 100%) rotate(45deg); transform: translate(-150%, 100%) rotate(45deg); } 10% { -webkit-transform: translate(0, 0) rotate(0deg); transform: translate(0, 0) rotate(0deg); } 40% { -webkit-transform: translate(0, 70%) rotate(0deg); transform: translate(0, 70%) rotate(0deg); } 50% { -webkit-transform: translate(-150%, 100%) rotate(45deg); transform: translate(-150%, 100%) rotate(45deg) } 100% { -webkit-transform: translate(-150%, 100%) rotate(45deg); transform: translate(-150%, 100%) rotate(45deg) }
}
html { height: 100%;
}
body { height: 100%; width: 100%; overflow: hidden; margin: 0; background: #ddeef6;
}
body * { box-sizing: border-box;
}
.container { height: 240px; width: 140px; position: absolute; top: 50%; left: 50%; margin: -120px 0 0 -70px;
}
.phone { background: #fff; border-radius: 10px; box-shadow: 1px 4px 10px rgba(0, 0, 0, .13); position: relaltive; width: 100%; height: 100%;
}
.phone__speaker { position: absolut; background: #ddeef6; height: 6px; border-radius: 3px; width: 34%; top: 5%; left: 50%; margin-left: -17%; position: absolute;
}
.phone__screen { background: #ffe931; width: 84%; left: 50%; height: 75%; top: 12%; margin-left: -42%; position: absolute; overflow: hidden;
}
.phone__screen:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #cc2061; -webkit-transform: translate(0, -100%); transform: translate(0, -100%); -webkit-animation: screen 3s ease-in-out infinite; animation: screen 3s ease-in-out infinite;
}
.phone__button { width: 18px; height: 18px; border-radius: 50%; background: #ddeef6; bottom: 3%; left: 50%; margin-left: -9px; position: absolute; cursor: pointer;
}
.roller { position: absolute; top: -3px; left: 0; width: 100%; height: 100%;
}
.roller__roll { position: absolute; border-radius: 6px; width: 84%; left: 50%; top: 12%; margin-left: -42%; height: 16%; z-index: 10;
}
.roller__knob { background: #2a3a4a; border-radius: 6px; height: 29%; width: 30%; margin-left: -15%; position: absolute; top: 41%; left: 50%;
}
.roller__holder { position: absolute; top: 0; width: 100%; height: 100%;
}
.roller__holder-top { position: absolute; height: 20%; width: 100%; top: 18%; left: 0;
}
.roller__holder-top:before { content: ''; position: absolute; background: #7a888c; height: 20%; width: 100%; top: 0; left: 0; border-radius: 10px;
}
.roller__holder-top:after { content: ''; position: absolute; top: 0; width: 6%; height: 100%; border-radius: 10px; background: #7a888c;
}
.roller__holder-bottom { position: absolute; height: 20%; width: 100%; top: 35%; left: 0;
}
.roller__holder-bottom:before { content: ''; position: absolute; background: #7a888c; height: 20%; width: 54%; top: 0; border-radius: 10px;
}
.roller__holder-bottom:after { content: ''; position: absolute; top: 0; width: 6%; height: 60%; border-radius: 10px; background: #7a888c;
}
.roller_left { -webkit-animation: 3s left-roller ease-in-out infinite 1.5s; animation: 3s left-roller ease-in-out infinite 1.5s; -webkit-transform: translate(-150%, 100%) rotate(45deg); transform: translate(-150%, 100%) rotate(45deg);
}
.roller_left .roller__roll { background: #ffe931;
}
.roller_left .roller__holder { left: 0;
}
.roller_left .roller__holder-top:after { left: 0;
}
.roller_left .roller__holder-bottom:before { left: 0;
}
.roller_left .roller__holder-bottom:after { left: 48%;
}
.roller_right { -webkit-animation: 3s right-roller ease-in-out infinite; animation: 3s right-roller ease-in-out infinite; -webkit-transform: translate(150%, 100%) rotate(-45deg); transform: translate(150%, 100%) rotate(-45deg);
}
.roller_right .roller__roll { background: #cc2061;
}
.roller_right .roller__holder { right: 0;
}
.roller_right .roller__holder-top:after { right: 0;
}
.roller_right .roller__holder-bottom:before { right: 0;
}
.roller_right .roller__holder-bottom:after { right: 48%;
}

Rollers - Script Codes JS Codes

(function() {
}).call(this);

Home Page	Home
Developer	Mikita
Username	MikitaLisavets
Uploaded	January 19, 2023
Rating	3
Size	4,089 Kb
Views	6,072

Do you need developer help for Rollers?

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!

Mikita (MikitaLisavets) Script Codes

Name	Size
Jquery.scrollbar	3,920 Kb
Angular chart directive	3,298 Kb
Cards Menu	4,611 Kb
Particle system	5,454 Kb
Target scroll callback	1,981 Kb
Spin menu	5,186 Kb
Snap scroll	2,732 Kb
Hamburger Menu	5,077 Kb
Math Trick	3,970 Kb
Simple pure CSS3 donut chart	2,607 Kb

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!

Similar Scripts & Codes

Name	Username	Size
Sinclair Research Computers	MattCowley	3,068 Kb
Plotting Points with D3.js	Laurakelly	31,996 Kb
Text Looping Transition	Agelber	5,619 Kb
CSS Flip Animation	Bbodine1	2,525 Kb
Sencha Touch 2.3.1 Basic Grid Example	Trozdol	2,770 Kb
Animating characters with jQuery	042	2,776 Kb
Pure CSS Tooltip	APinix	2,815 Kb
IPhone5S SVG Space Grey	Onlinechris	75,035 Kb
Rain Landing in a Pond	Edball	3,009 Kb
Cars going	Netoguimaraes	1,699 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!