Scroll Depth Example
How do I make an scroll depth example?
What is a scroll depth example? How do you make a scroll depth example? This script and codes were developed by Jeff Pannone on 12 August 2022, Friday.
Scroll Depth Example - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Scroll Depth Example</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="wrapper"> <section id="s1"><p>25%</p></section> <section id="s2"><p>50%</p></section> <section id="s3"><p>75%</p></section> <section id="s4"><p>100%</p></section>
</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-scrolldepth/0.8.0/jquery.scrolldepth.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Scroll Depth Example - Script Codes CSS Codes
*, *:before, *:after { box-sizing: inherit;
}
body { padding: 0; margin: 0;
}
.wrapper { margin: 0 auto; width: 600px; height: 3200px; position: relative; text-align: center; box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
.wrapper section { position: absolute; height: 800px; top: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.04); padding: 0;
}
.wrapper section p { display: block; font-family: helvetica, arial; font-size: 50px; color: red; line-height: 1; margin: 75px;
}
.wrapper section:last-child p { position: absolute; left: 0; right: 0; bottom: 75px; text-align: center;
}
.wrapper section:nth-child(2) { top: 800px; background: rgba(0, 0, 0, 0.1);
}
.wrapper section:nth-child(3) { top: 1600px; background: rgba(0, 0, 0, 0.3);
}
.wrapper section:nth-child(4) { top: 2400px; background: rgba(0, 0, 0, 0.5);
}
Scroll Depth Example - Script Codes JS Codes
// Example with options
jQuery.scrollDepth({ minHeight: 2000, elements: ['#s1', '#s2', '#s3', '#s4'], percentage: true, userTiming: true, pixelDepth: false, nonInteraction: false, eventHandler: function(data) { //this will disable the default event-tracking if(data.event !== "ScrollDistance"){ console.log(data); console.log('ScrollDepth, ' + data.eventAction + ', ' + data.eventLabel +', '+ data.eventTiming); } }
});
Developer | Jeff Pannone |
Username | jeffpannone |
Uploaded | August 12, 2022 |
Rating | 3 |
Size | 2,707 Kb |
Views | 22,264 |
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 |
Photoswipe Drug Facts | 5,320 Kb |
JQuery Viewport Size | 2,317 Kb |
Hompage Grid | 5,086 Kb |
Geolocation API | 1,952 Kb |
A Pen by Jeff Pannone | 1,716 Kb |
DWSG Templates | 11,029 Kb |
Magnific - open popup with URL param | 3,607 Kb |
Slider and Product Functionality | 11,046 Kb |
Cart Design | 7,316 Kb |
URL Parameter Conditional | 1,853 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 |
JQuery exercise | Brian-baum | 3,780 Kb |
Out of the blue | Giaco | 2,537 Kb |
Simple Accordion | Wearebold | 3,683 Kb |
Drifting Clouds | Benedikte | 2,247 Kb |
Mosaic transition effect between two photos using jQuery | Stathisg | 2,518 Kb |
Octopus Bar iPad App Interactions | Davidkpiano | 6,735 Kb |
Side Sliding Menu CSS | EduardL | 4,388 Kb |
Sketchy Box | Mnicpt | 3,033 Kb |
Svg penguin | _massimo | 2,990 Kb |
Day 11 - Calendar Card | Arnellebalane | 6,984 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!