Sliding Skill-Diagramm
How do I make an sliding skill-diagramm?
What is a sliding skill-diagramm? How do you make a sliding skill-diagramm? This script and codes were developed by Karsten Buckstegge on 10 September 2022, Saturday.
Sliding Skill-Diagramm - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sliding Skill-Diagramm</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> <html lang="en">
<head> <meta charset="UTF-8" /> <title>Sliding Diagram</title>
</head>
<body> <div class="placeholder">SCROLL!</div> <div class="diagram"> <div class="bar bar1 bar--in"><span class="bar--in">Video</span></div> <div class="bar bar2 bar--in"><span class="bar--in">JS</span></div> <div class="bar bar3 bar--in"><span class="bar--in">Design</span></div> <div class="bar bar4 bar--in"><span class="bar--in">Usability</span></div> <div class="bar bar5 bar--in"><span class="bar--in">CSS / HTML</span></div> </div>
</body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Sliding Skill-Diagramm - Script Codes CSS Codes
.placeholder { height: 400px; padding: 50px;
}
.bar { height: 50px; color: white; margin-bottom: 10px;
}
.bar1 { width: 150px; background: #00A1FF; opacity: 1; -webkit-transition: width 1s ease-in; transition: width 1s ease-in;
}
.bar2 { width: 200px; background: #0081CC; opacity: 1; -webkit-transition: width 1s ease-in; transition: width 1s ease-in;
}
.bar3 { width: 250px; background: #265F7F; opacity: 1; -webkit-transition: width 1s ease-in; transition: width 1s ease-in;
}
.bar4 { width: 300px; background: #4CBDFF; opacity: 1; -webkit-transition: width 1s ease-in; transition: width 1s ease-in;
}
.bar5 { width: 350px; background: #00517F; opacity: 1; -webkit-transition: width 1s ease-in; transition: width 1s ease-in;
}
.bar span { top: 15px; left: 30px; position: relative;
}
.bar--in { width: 10px; opacity: 0.2;
}
Sliding Skill-Diagramm - Script Codes JS Codes
$(document).ready(function() { $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 300) { $(".bar--in").removeClass("bar--in"); } else if (scroll <= 300) { $(".bar").addClass("bar--in"); } });
});
Developer | Karsten Buckstegge |
Username | MrBambule |
Uploaded | September 10, 2022 |
Rating | 3 |
Size | 2,466 Kb |
Views | 85,008 |
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 |
A Pen by Karsten Buckstegge | 3,521 Kb |
The wheel of social | 4,072 Kb |
Simple React Slider | 4,975 Kb |
SeXy buttons | 4,447 Kb |
CSS3 Hover Button | 3,717 Kb |
Responsive focuspoint on image with object-position | 3,707 Kb |
Freddy the Fly | 4,238 Kb |
Dropdown Menu Animation | 3,411 Kb |
Broken TV | 2,456 Kb |
Base64 SVG Me | 44,786 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 |
Shape Outside - Polygon | Stacy | 3,954 Kb |
AngularJS Animated Todo List | Ehaase | 2,975 Kb |
Basic 3D Fullscreen Transition | Apetrov | 3,270 Kb |
Improved Page Flipping Effect | Usaphp | 5,201 Kb |
A Pen by Alexandru Pora | Axpro | 1,615 Kb |
Polo, the flying squirrel | Agbales | 2,445 Kb |
Arrow Navigation | Hinducows | 1,973 Kb |
Loading Bar | Jaradlight | 2,333 Kb |
Brown by pure CSS, no image, no javascript | Aaronchuo | 2,652 Kb |
IE flex collapse bug fix | Rowno | 2,678 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!