Fruit Stripe Background

Developer
Coran Spicer
Size
2,758 Kb
Views
18,207

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 Previews
IQ Test

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 ); }
});
Fruit Stripe Background - Script Codes
Fruit Stripe Background - Script Codes
Home Page Home
Developer Coran Spicer
Username cgspicer
Uploaded October 15, 2022
Rating 3
Size 2,758 Kb
Views 18,207
Do you need developer help for Fruit Stripe Background?

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!

Coran Spicer (cgspicer) Script Codes
Name
SMITE spinner
BuildUp
Hi-rez logo
Tile with special tiles experiment
SMITE Ward Icon
Drag and Drop Quiz
Donatello Sprite
Promise example
ExamplesEdit
FocalCenter.js for jQuery
Create amazing blog posts with AI!

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!