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 |
Animating Hamburger menu | 2,898 Kb |
Hover effects | 2,419 Kb |
Scroll using CSS | 2,159 Kb |
Hover effect | 2,241 Kb |
Svg currency block | 3,998 Kb |
A Pen by Kacper Bawol | 1,888 Kb |
Svg text explosion | 6,191 Kb |
Webgl experiment with shaders | 5,002 Kb |
Loading animation | 2,309 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 |
Pure CSS Animated Photo Stack | Depthdev | 2,486 Kb |
BlueBox Fork | Huskynation | 12,675 Kb |
Update CSS Variables with JS | Wesbos | 2,335 Kb |
CSS3 Butterfly | Timohausmann | 3,430 Kb |
Force Counter | Kenlauguico | 2,732 Kb |
A Pen by aleen42 | Aleen42 | 11,473 Kb |
Mapbox Directions with geolocation tracking | Pollardld | 5,827 Kb |
Add This API | ThatGuySam | 2,848 Kb |
Text Blocks Over Image, Updated | KatieK2 | 3,122 Kb |
No Vacancy 404 CSS Only | Sethkontny | 0 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!