Fruit Stripe Background
How do I make an fruit stripe background?
This is in response to an SO question : http://stackoverflow.com/questions/22677935/multiple-color-fade-on-scroll#. What is a fruit stripe background? How do you make a fruit stripe background? This script and codes were developed by Coran Spicer on 15 October 2022, Saturday.
Fruit Stripe Background - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fruit Stripe Background</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://code.jquery.com/color/jquery.color-2.1.0.js'></script> <script src="js/index.js"></script>
</body>
</html>
Fruit Stripe Background - Script Codes CSS Codes
body { background-color: rgb(210,50,98); min-height: 2000px;
}
Fruit Stripe Background - Script Codes JS Codes
$(document).ready(function(){ /** in response to http://stackoverflow.com/questions/22677935/multiple-color-fade-on-scroll requires https://code.jquery.com/color/jquery.color-2.1.0.js */ var colorsNPoints = [ { 'begin' : 0, 'end': 100, 'color': 'rgb(220,20,60)' }, { 'begin' : 100, 'end': 110, 'color': 'rgb(0,0,0)' }, { 'begin' : 110, 'end': 210, 'color': 'rgb(50,205,50)' }, { 'begin' : 210, 'end': 310, 'color': 'rgb(255,215,0)' }, { 'begin' : 310, 'end': 410, 'color': 'rgb(220,20,60)' }, { 'begin' : 410, 'end': 420, 'color': 'rgb(0,0,0)' }, { 'begin' : 420, 'end': 520, 'color': 'rgb(50,205,50)' }, { 'begin' : 520, 'end': 620, 'color': 'rgb(255,215,0)' }, { 'begin' : 620, 'end': 720, 'color': 'rgb(220,20,60)' }, { 'begin' : 720, 'end': 730, 'color': 'rgb(0,0,0)' }, { 'begin' : 730, 'end': 830, 'color': 'rgb(50,205,50)' }, { 'begin' : 830, 'end': 930, 'color': 'rgb(255,215,0)' } ]; $(document).scroll(function() { var scrollPosition = $(this).scrollTop(); var currentRange = checkRange( scrollPosition, colorsNPoints ); if ( currentRange !== undefined ) { var newColor = recalcColor( currentRange.prevColor, currentRange.nextColor, currentRange.progress ); $('body').css({ backgroundColor: newColor }, 0); } else { // do nothing, we're not within any ranges } }); // sample scrolling // color change and $.animate() playing nicely together //$('html, body').animate({scrollTop: 500},2000); // sub-functions /** * checks which, if any, of the scroll ranges the window is currently on * returns an object containing necessary values */ function checkRange( yValue, rangesObj ) { // loop over the object containing our ranges for ( var i=0; i < rangesObj.length; i++ ) { var rangeToCheck = rangesObj[i]; // check to see if we are within said range if ( yValue >= rangeToCheck.begin && yValue <= rangeToCheck.end ) { // set up a new object for refinement and return var currentRangeObj = {}; currentRangeObj.prevColor = rangesObj[i-1] ? rangesObj[i-1].color : rangeToCheck.color; // store old color, falls back to range's color if no previous color exists currentRangeObj.nextColor = rangeToCheck.color; // store new color currentRangeObj.progress = calcPercentScrolled( rangeToCheck.begin, rangeToCheck.end, yValue ); //calculate the progress within the current range return currentRangeObj; } else { } } } /** * calculates current percent scrolled **/ function calcPercentScrolled( begin, end, current ) { return (current - begin) / ( end - begin ); } /** * calculates new color **/ function recalcColor( begin, end, factor ) { var begin = $.Color( begin ), end = $.Color( end ); var newRed = begin.red() + ( ( end.red() - begin.red() ) * factor ); var newGreen = begin.green() + ( ( end.green() - begin.green() ) * factor ); var newBlue = begin.blue() + ( ( end.blue() - begin.blue() ) * factor ); return $.Color( newRed, newGreen, newBlue ); }
});
Developer | Coran Spicer |
Username | cgspicer |
Uploaded | October 15, 2022 |
Rating | 3 |
Size | 2,758 Kb |
Views | 18,216 |
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 Coran Spicer | 2,815 Kb |
Fully Furnished | 3,613 Kb |
ExamplesEdit | 1,592 Kb |
SMITE Ward Icon | 3,236 Kb |
Shattering boxes | 3,390 Kb |
Donatello Sprite | 2,452 Kb |
Hi-rez logo | 5,938 Kb |
Responsive Mixed with Absolute | 2,495 Kb |
SMITE spinner | 2,508 Kb |
Header logo that changes | 2,031 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 |
CSS Piano | Dannystyle | 5,138 Kb |
Loading animation with css | Icebob | 2,947 Kb |
Gradients | Karpovsystems | 2,394 Kb |
Product item | Mymahesh11 | 2,256 Kb |
Owl Carousel - jumpTo | OwlFonk | 2,553 Kb |
Front in Aracaju Logo Pure CSS | Shankarcabus | 2,581 Kb |
About Mazano | Kiti | 2,585 Kb |
Virtual vinyl | Davidpanik | 3,474 Kb |
3D-box | Parthviroja | 2,346 Kb |
Wave Lines | Mikehobizal | 4,023 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!