Slip-Scroll - No JS
How do I make an slip-scroll - no js?
Ha, who needs a JS library: just use background-attachment: fixed and let your page scroll like normal.. What is a slip-scroll - no js? How do you make a slip-scroll - no js? This script and codes were developed by James Steinbach on 27 January 2023, Friday.
Slip-Scroll - No JS - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slip-Scroll - No JS</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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> <header> <div class="logo">Logo</div>
</header>
<div class="content"> <p>One dollar and eighty-seven cents. That was all. And sixty cents of it was in pennies. Pennies saved one and two at a time by bulldozing the grocer and the vegetable man and the butcher until one's cheeks burned with the silent imputation of parsimony that such close dealing implied. Three times Della counted it. One dollar and eighty-seven cents. And the next day would be Christmas.</p> <p>There was clearly nothing left to do but flop down on the shabby little couch and howl. So Della did it. Which instigates the moral reflection that life is made up of sobs, sniffles, and smiles, with sniffles predominating.</p> <p>While the mistress of the home is gradually subsiding from the first stage to the second, take a look at the home. A furnished flat at $8 per week. It did not exactly beggar description, but it certainly had that word on the look-out for the mendicancy squad.</p> <p>In the vestibule below was a letter-box into which no letter would go, and an electric button from which no mortal finger could coax a ring. Also appertaining thereunto was a card bearing the name "Mr. James Dillingham Young."</p> <p>The "Dillingham" had been flung to the breeze during a former period of prosperity when its possessor was being paid $30 per week. Now, when the income was shrunk to $20, the letters of "Dillingham" looked blurred, as though they were thinking seriously of contracting to a modest and unassuming D. But whenever Mr. James Dillingham Young came home and reached his flat above he was called "Jim" and greatly hugged by Mrs. James Dillingham Young, already introduced to you as Della. Which is all very good.</p> <p>Della finished her cry and attended to her cheeks with the powder rag. She stood by the window and looked out dully at a grey cat walking a grey fence in a grey backyard. To-morrow would be Christmas Day, and she had only $1.87 with which to buy Jim a present. She had been saving every penny she could for months, with this result. Twenty dollars a week doesn't go far. Expenses had been greater than she had calculated. They always are. Only $1.87 to buy a present for Jim. Her Jim. Many a happy hour she had spent planning for something nice for him. Something fine and rare and sterling--something just a little bit near to being worthy of the honour of being owned by Jim.</p> <p>There was a pier-glass between the windows of the room. Perhaps you have seen a pier-glass in an $8 flat. A very thin and very agile person may, by observing his reflection in a rapid sequence of longitudinal strips, obtain a fairly accurate conception of his looks. Della, being slender, had mastered the art.</p> <p>Suddenly she whirled from the window and stood before the glass. Her eyes were shining brilliantly, but her face had lost its colour within twenty seconds. Rapidly she pulled down her hair and let it fall to its full length.</p> <p>Now, there were two possessions of the James Dillingham Youngs in which they both took a mighty pride. One was Jim's gold watch that had been his father's and his grandfather's. The other was Della's hair. Had the Queen of Sheba lived in the flat across the airshaft, Della would have let her hair hang out of the window some day to dry just to depreciate Her Majesty's jewels and gifts. Had King Solomon been the janitor, with all his treasures piled up in the basement, Jim would have pulled out his watch every time he passed, just to see him pluck at his beard from envy.</p> <p>So now Della's beautiful hair fell about her, rippling and shining like a cascade of brown waters. It reached below her knee and made itself almost a garment for her. And then she did it up again nervously and quickly. Once she faltered for a minute and stood still while a tear or two splashed on the worn red carpet.</p> <p>On went her old brown jacket; on went her old brown hat. With a whirl of skirts and with the brilliant sparkle still in her eyes, she cluttered out of the door and down the stairs to the street.</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Slip-Scroll - No JS - Script Codes CSS Codes
header { background: #004197; color: #e0e0e0; padding: 0;
}
.logo { text-indent: -999em; height: 64px; width: 256px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAABACAMAAADlCI9NAAAAM1BMVEUAAADh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eE7HLHpAAAAEXRSTlMAM0QiAHe7/+6qZhHdmVXMiAycuy0AAAH4SURBVHgB7ZfbjqMwEAXjS7vBN/L/X7vJsqPGjjvHD9FGI7neBjWVwphMuC0Wi8VisfgdGPvE+Xc4+xfjVYaWm6MfrCKmwP/Y9pjGaplhzjuZecvN8g/kB9jADVtxvqce3JMpzVlAQLrzC1vsri3wiIwtOMAdPKI0F7fxkAItOMCIWy2orGCwBQWkgzUI2vOMBQQUFrTrO2AisugBloU9Wht3FsI5E9urDiFkPnGzFj0gyI615xFz9EuQWYbo/MxUy8a8T1vUACNnjvbTvduBh5NTU8xx2qIG3EfHY7vJiuiTb0jTFjVA1u7qlvjUbMHox2CLGiA7Zbwu9jqTvQK2aAHuep8Euk6bdoZbaM6iBeDD/cwoAFs+FGC/HRD/W0D9yC2oEwFpvH9JVv06U5SACQt+DDlpz7XMZCUAW2a+iOLo4Tzamfpc75NGBy16AI2+ZncZbmeyzHQTwKIHOJbO9Pq/3fUzbhiALRLQYJu5LT5PrkGOlBcXl/rQJUtNALboAYavbLn5y8kyjZAAaNEDPLGG7ChCAdDyJsAHxr+KCwpAlncB6VDPFAoIABY9QOzgzYhAALC8D/A2c8fufIcJzMrLIbCAgJO6a6+mgintJxx340+w5eYxlig8IDJexUQq4UEhsvMWCfga3w9YAStgBayAFbACVsAftWmAB/7FZNQAAAAASUVORK5CYII=) no-repeat 20px top; background-attachment: fixed;
}
.content { color: #004197; background: #e0e0e0 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAABACAMAAADlCI9NAAAAM1BMVEUAAAAAQZcAQZcAQZcAQZcAQZcAQZcAQZcAQZcAQZcAQZcAQZcAQZcAQZcAQZcAQZcAQZcpJ3c2AAAAEXRSTlMAM0QiAHe7/+6qZhHdmVXMiAycuy0AAAH4SURBVHgB7ZfbjqMwEAXjS7vBN/L/X7vJsqPGjjvHD9FGI7neBjWVwphMuC0Wi8VisfgdGPvE+Xc4+xfjVYaWm6MfrCKmwP/Y9pjGaplhzjuZecvN8g/kB9jADVtxvqce3JMpzVlAQLrzC1vsri3wiIwtOMAdPKI0F7fxkAItOMCIWy2orGCwBQWkgzUI2vOMBQQUFrTrO2AisugBloU9Wht3FsI5E9urDiFkPnGzFj0gyI615xFz9EuQWYbo/MxUy8a8T1vUACNnjvbTvduBh5NTU8xx2qIG3EfHY7vJiuiTb0jTFjVA1u7qlvjUbMHox2CLGiA7Zbwu9jqTvQK2aAHuep8Euk6bdoZbaM6iBeDD/cwoAFs+FGC/HRD/W0D9yC2oEwFpvH9JVv06U5SACQt+DDlpz7XMZCUAW2a+iOLo4Tzamfpc75NGBy16AI2+ZncZbmeyzHQTwKIHOJbO9Pq/3fUzbhiALRLQYJu5LT5PrkGOlBcXl/rQJUtNALboAYavbLn5y8kyjZAAaNEDPLGG7ChCAdDyJsAHxr+KCwpAlncB6VDPFAoIABY9QOzgzYhAALC8D/A2c8fufIcJzMrLIbCAgJO6a6+mgintJxx340+w5eYxlig8IDJexUQq4UEhsvMWCfga3w9YAStgBayAFbACVsAftWmAB/7FZNQAAAAASUVORK5CYII=) no-repeat 20px top; background-attachment: fixed; font-family: Gotham, Proxima Nova, Lucida Grande, sans-serif; font-size: 1em; line-height: 1.5; padding: 1em; padding-left: 180px;
}
Developer | James Steinbach |
Username | jdsteinbach |
Uploaded | January 27, 2023 |
Rating | 3 |
Size | 5,556 Kb |
Views | 6,072 |
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 |
Sass Geometric Pattern Generator | 2,020 Kb |
Adding Shadow to SVG elements | 2,501 Kb |
Testing Newer Width Values | 2,449 Kb |
Gradient Hover Effect | 2,212 Kb |
FlexBox Gallery | 2,205 Kb |
Flip Card | 2,343 Kb |
CSS Variables | 4,759 Kb |
Sphere Spin | 4,204 Kb |
Parallax-ish Sliding Content | 2,748 Kb |
Animated Form Focus | 2,968 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 |
Project Euler Problem 17 | Bfillmer | 2,739 Kb |
Arrow Navigation | Hinducows | 1,973 Kb |
Draggables in pure angular | Rlo206 | 5,167 Kb |
Default Input, Textareas, Submits, and Buttons in iOS | Demersdesigns | 2,334 Kb |
CSS3 Media Queries demo | Machal | 1,824 Kb |
Video mute | Leon9208 | 2,131 Kb |
Drag n Drop | Martin42 | 2,594 Kb |
Boom | Mhrjnsa1 | 1,794 Kb |
Ball Physics | Getsetbro | 3,149 Kb |
A Pen by Xand0r | Xand0r | 1,928 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!