Scroll using CSS
How do I make an scroll using css?
What is a scroll using css? How do you make a scroll using css? This script and codes were developed by Kacper Bawol on 03 September 2022, Saturday.
Scroll using CSS - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Scroll using CSS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="body"> <div class="card">1</div> <div class="card">2</div> <div class="card">3</div> <div class="card">4</div> <div class="card">5</div> <div class="card">6</div> <div class="card">7</div> <div class="card">8</div> <div class="card">9</div> <div class="card">10</div> <div class="card">11</div> <div class="card">12</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js'></script> <script src="js/index.js"></script>
</body>
</html>
Scroll using CSS - Script Codes CSS Codes
body { width: 100%; height:auto; margin: 0; padding: 0; background-color: lightgrey; overflow: hidden; font-family: Monospace;
}
.body { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition: all 300ms ease-out; transition: all 300ms ease-out;
}
.card { text-align: center; line-height: 100px; width: 90%; height: 100px; background-color: white; margin: 20px auto; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.04); border-radius: 2px;
}
Scroll using CSS - Script Codes JS Codes
$(document).ready(function() { // very simple test using css transform property to scroll the page var wheel = { y: 0 }; // todo: need to change on resize etc. var wHeight = $(window).height(); var docH = $('.body').height(); var maxH = docH - wHeight + 100; $(window).resize(function() { wHeight = $(window).height(); docH = $('.body').height(); maxH = docH - wHeight + 100; console.log(maxH); }); $(window).on('mousewheel', function(e) { wheel.y -= e.deltaFactor * e.deltaY; if (wheel.y <= 0) { wheel.y = 0; } if (maxH < wheel.y) { wheel.y = maxH; } //console.log(wheel.y); $('.body').css({ transform: 'translateY(' + -wheel.y + 'px)' }); });
});
Developer | Kacper Bawol |
Username | Casperovic |
Uploaded | September 03, 2022 |
Rating | 3 |
Size | 2,159 Kb |
Views | 26,312 |
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 |
Webgl experiment with shaders | 5,002 Kb |
Hover effect | 2,241 Kb |
Hover effects | 2,419 Kb |
Svg text explosion | 6,191 Kb |
Animating Hamburger menu | 2,898 Kb |
Svg currency block | 3,998 Kb |
Loading animation | 2,309 Kb |
A Pen by Kacper Bawol | 1,888 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 |
Drag n Drop | Martin42 | 2,594 Kb |
Fullscreen Parallax | Bassta | 3,313 Kb |
NT Tribute | Skybutterfly | 2,850 Kb |
Isometric css island | Xaddict | 2,950 Kb |
Jochaho Skeleton | Dhanushbadge | 1,689 Kb |
Twitch Live Channels | Inkblotty | 4,956 Kb |
Text Blocks Over Image, Updated | KatieK2 | 3,122 Kb |
Learning FlexBox | Alex_rodrigues | 2,821 Kb |
Flickering Light Text Effect | Mandymichael | 3,315 Kb |
Twinner Spinner II | Katydecorah | 2,974 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!