Changing Background Color on Scroll

Developer
Trenton
Size
3,323 Kb
Views
26,312
  1. Changing Background Color on Scroll Previews
  2. Changing Background Color on Scroll HTML Codes
  3. Changing Background Color on Scroll CSS Codes
  4. Changing Background Color on Scroll JS Codes

How do I make an changing background color on scroll?

What is a changing background color on scroll? How do you make a changing background color on scroll? This script and codes were developed by Trenton on 22 November 2022, Tuesday.

Changing Background Color on Scroll Previews
IQ Test

Changing Background Color on Scroll - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Changing Background Color on Scroll</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,300'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="main-wrapper"> <div class="intro"> <div class="inside"> <h1 style="color:#000;">Scroll to see the color changing background effects. They are surely awesomesauce.</h1> </div> </div> <div class="slide slide-one" data-background="#ffffff"> <div class="inside"> <h1 style="color:#000;">About</h1> </div> </div> <div class="slide slide-two" data-background="#005cb8"> <div class="inside"> <h1>Exhibits</h1> </div> </div> <div class="slide slide-three" data-background="#c9910d"> <div class="inside"> <h1>News<br /><span>posts go here</h1> </div> </div> <div class="slide slide-four" data-background="#79232e"> <div class="inside"> <h1>Locations</h1> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2542/jquery.scrollie.min_1.js'></script> <script src="js/index.js"></script>
</body>
</html>

Changing Background Color on Scroll - Script Codes CSS Codes

* { box-sizing: border-box }
body { font-family: 'Poppins', sans-serif; transition: background 1s ease; background: #fff;
}
h1 { color: #000; font-size: 40px; text-align: center;
/* position: absolute; top: 50%!important; left: 50%!important; -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); */
}
span { clear: both; font-size: .7em; color: #bdc3c7;
}
a { color: #c0392b; text-decoration: none;
}
.slide { .inside { height:200vh !important; h1 { display: table-cell; width: 100%; clear: both; vertical-align: middle; text-align: center; } }
}
.intro{ height:100vh !important;
}

Changing Background Color on Scroll - Script Codes JS Codes

/** * This was built using the scrollie jQuery Plugin * https://github.com/Funsella/jquery-scrollie */
$( window ).ready(function() { var wHeight = $(window).height(); $('.slide') .height(wHeight) .scrollie({ scrollOffset : -50, scrollingInView : function(elem) { var bgColor = elem.data('background'); $('body').css('background-color', bgColor); } }); });
// Force Smooth Scrolling
$(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } });
});
// Slow Scroll Speed
// Plugin: jQuery.scrollSpeed
// Source: github.com/nathco/jQuery.scrollSpeed
// Author: Nathan Rutzky
// Update: 1.0.2
(function($) { jQuery.scrollSpeed = function(step, speed, easing) { var $document = $(document), $window = $(window), $body = $('html, body'), option = easing || 'default', root = 0, scroll = false, scrollY, scrollX, view; if (window.navigator.msPointerEnabled) return false; $window.on('mousewheel DOMMouseScroll', function(e) { var deltaY = e.originalEvent.wheelDeltaY, detail = e.originalEvent.detail; scrollY = $document.height() > $window.height(); scrollX = $document.width() > $window.width(); scroll = true; if (scrollY) { view = $window.height(); if (deltaY < 0 || detail > 0) root = (root + view) >= $document.height() ? root : root += step; if (deltaY > 0 || detail < 0) root = root <= 0 ? 0 : root -= step; $body.stop().animate({ scrollTop: root }, speed, option, function() { scroll = false; }); } if (scrollX) { view = $window.width(); if (deltaY < 0 || detail > 0) root = (root + view) >= $document.width() ? root : root += step; if (deltaY > 0 || detail < 0) root = root <= 0 ? 0 : root -= step; $body.stop().animate({ scrollLeft: root }, speed, option, function() { scroll = false; }); } return false; }).on('scroll', function() { if (scrollY && !scroll) root = $window.scrollTop(); if (scrollX && !scroll) root = $window.scrollLeft(); }).on('resize', function() { if (scrollY && !scroll) view = $window.height(); if (scrollX && !scroll) view = $window.width(); }); }; jQuery.easing.default = function (x,t,b,c,d) { return -c * ((t=t/d-1)*t*t*t - 1) + b; };
})(jQuery);
$(function() {
jQuery.scrollSpeed(7, 20);
});
Changing Background Color on Scroll - Script Codes
Changing Background Color on Scroll - Script Codes
Home Page Home
Developer Trenton
Username tlelkins2020
Uploaded November 22, 2022
Rating 3
Size 3,323 Kb
Views 26,312
Do you need developer help for Changing Background Color on Scroll?

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!

Trenton (tlelkins2020) Script Codes
Name
Parallax Background Scroll
Full Screen Material Menu
Sticky CTA Button
A Pen by Trenton
Animated Top Menu
Auto Centered Sections
Create amazing love letters 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!