Document Fader

CK CK 3788 
Created at  
348 0 0
This script allows the document to fade between two colors. Change the
color values and also the time for fading. The time can be edited at
the bottom and the color could be changed for col_value.

<html>
<head>
    <title>Document Fader</title>
</head>

<body>

<script language="JavaScript" type="text/javascript">
<!-- Begin
document.bgcolor="#000000"

var hexchars="0123456789ABCDEF";
function fromHex (str) {
var high=str.charAt(0); //Note: Netscape 2.0 bug workaround


var low=str.charAt(1);
return(16*hexchars.indexOf(high))+hexchars.indexOf(low);
}

function Color(str){
    this.r=fromHex(str.substring(0,2));
    this.g=fromHex(str.substring(2,4));
    this.b=fromHex(str.substring(4,6));
    return this;
    }

// Change this value for the starting color ....
col_value="#CCCFFF";
color_start=col_value.substring(1,8);

// Change this value for the ending color ....
col_value="#FC000C";
color_end=col_value.substring(1,8);

function makearray(n) {
    this.length = n;
    for(var i = 1; i <= n; i++)
        this[i] = 0;
    return this;
}

hexa = new makearray(16);
for(var i = 0; i < 10; i++)
    hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";

function hex(i) {
    if (i < 0)
        return "00";
    else if (i > 255)
        return "ff";
    else
        return "" + hexa[Math.floor(i/16)] + hexa[i%16];
}

function setbgColor(r, g, b) {
    var hr = hex(r); var hg = hex(g); var hb = hex(b);
    document.bgColor = "#"+hr+hg+hb;
}

function fade(sr, sg, sb, er, eg, eb, step) {
    for(var i = 0; i <= step; i++) {
        setbgColor(
        Math.floor(sr * ((step-i)/step) + er * (i/step)),
        Math.floor(sg * ((step-i)/step) + eg * (i/step)),
        Math.floor(sb * ((step-i)/step) + eb * (i/step)));
    }
}

function fadein(val) {
    fade(Color(color_start).r,Color(color_start).g,Color(color_start).b,Color(color_end).r,Color(color_end).g,Color(color_end).b,val);
}

/* do fadein */
// Change the value to get the fading time.
// Higher values means slower fading
fadein(380);

// -->
</script>

</body>
</html>

Tags Fade HTML Javascript SetBgColor Tooltip Facebook X
Comments 0
Similar posts
  1. Book Mark This Site
    409
  2. Tooltip
    409
  3. Icon Coupled Url
    429
  4. Add Message On Mouse Traling
    2,565
  5. Number Of Vists
    518
  6. Button That Will Close The Browser Window
    353
  7. Button That Will Show The Page's Source
    390
  8. How to calculate page loading time ?
    360
  9. Move window
    551
  10. Add A Scrolling Status Bar Text To Your Site
    411
  11. Add This Page To Favorites
    406
  12. Code To Clear Browser History
    378
  13. Remove the spaces before begin and after end of text
    342
  14. How To Close A Pop-up Window ?
    449
  15. Pop Up Window On Top
    523
  16. How to display message on browser status bar ?
    481
  17. New Window
    613
  18. Color Table
    371
  19. Cursor Changer
    387
  20. Dual Scroller
    335
  21. Enlarge Image
    517
  22. Confirm The Link Clicked
    632
  23. Select And Deselect All Checkboxes By Javascript
    634
  24. Javascript Mouse Event Handler Example
    404
  25. Getting WebSearchers On Your Site
    378
  26. Hiding HTML on the browser
    468
  27. How to get date time in Javascript ?
    502
  28. Javascript based Alarm Clock
    679
  29. Javascript implemented Calendar
    425
  30. Basic Date Display
    518
  1. Javascript Prompts
    456
  2. How to know browser version in javascript ?
    449
  3. How to know the browser name in Javascript ?
    641
  4. Select All, None, Invert checkbox
    509
  5. Simple RSS Reader based on javascript
    503
  6. How to find the ip address of a client machine from a web application?
    518
  7. Put Date Time on HTML
    553
  8. IFRAME Auto Resize in IE, FireFox by Javascript
    461
  9. How to elimiate the "Restore Previous Session" dialog when FireFox 2.0 starts
    411
  10. How to include Javascript from anonther ?
    414
  11. Javascript based Browser Sniffing
    436
  12. Javascript based Regular Expression Tester
    377
  13. Two useful string functions - substr & substring
    413
  14. How to block a connection from the certain site ?
    356
  15. Is there URLEncode function in Javascript ?
    395
  16. Firefox Web Tweaking
    381
  17. Send An Email Using A Bean
    1,020
  18. jQuery and Function Chaining
    540
  19. Address Book
    581
  20. Displays the number of pages that the users browser has displayed in its session
    670
  21. Greeting For The Time Of Day
    395
  22. Access Granted
    593
  23. Cookie enabled browser checking in Javascript
    344
  24. Cookie Redirect
    505
  25. New content notifier in Javascript
    606
  26. Let popup once for event dialog or something like that in Javascript
    428
  27. Save And Restore Form Cookies in Javascript
    339
  28. How to record visitor's name by Cookie
    414
  29. Javascript & Cookie based Visitor Application
    439
  30. Cross Browser Event Management Functions Using JavaScript
    612
Recently updated
  1. Google OAuth Token Expiration: Causes and Solutions
    29
  2. Why 100% SEO Guarantees Better User Engagement and How to Achieve It in Your Service
    55
  3. Why SPF and DKIM Are Essential for Linux Email Servers?
    49
  4. How do I create animated background for Google Meet?
    22,875
  5. MaxMind GeoLite2 vs. DB-IP Lite vs. ip-api.com: Choosing the Right Free IP Geolocation Solution
    271
  6. Meet Valkey: Why Redis Changed Its License, Why Valkey is Better, and How to Use It as a Drop-in Replacement
    103
  7. How Rogue Web Scrapers Are Stealing My Content and Destroying My Server
    168
  8. Array of arguments passed to script in PHP
    97
  9. Invalid Auction Storms in Ad Tech
    106
  10. Building MRC-Compliant Instrumentation in Ad Tech: Implementation Steps and Key Challenges
    207
  11. The Two Clocks of Ad Server Architecture
    77
  12. Frequency Cap Architecture Overview
    526
  13. Collecting Proof-of-Play from 100,000 Screens
    152
  14. Vector Search in Relational Databases (RDBs): Trends & Usage Environments
    302
  15. What is RedisVL?
    114
  16. Designing a Skill Registry Architecture: Minimize Token Usage and Maximize AI Performance
    246
  17. TPU & GPU Cluster Management Tools
    257
  18. The Concept of Scaffolding in AI Agents
    244
  19. Beyond Static Pipelines: Architecting LLM Multi-Agent Systems for Autonomous Workflow Orchestration
    596
  20. AI-DLC vs. AI-SDLC: Model-Centric vs. System-Centric AI Development
    267
  21. Fine-Tuning Open-Weight LLMs: Training, Licensing, and Deploying Custom Models with Ollama
    353
  22. Inside the Next-Generation Streaming Architecture: Ultra-Low Latency, SGAI, and AI Codecs
    206
  23. Machine Learning: Training vs. Ranking
    229
  24. The Continuous Learning Machine: Designing a Loop That Actually Turns
    228
  25. The Next-Gen Low-Latency Standards: LL-HLS & MoQ
    202
  26. Designing a Data Curation System Around a Vector Database
    230
  27. Extracting Context from Live Video: The Architecture Got Simpler When We Stopped Building Features
    263
  28. The New Ad Stack Behind Live Sports Streaming: Inside SGAI, EABN, and the Standards Race to Fix Live Monetization
    671
  29. Designing MLOps Architectures to Handle Seasonal Data Drift in EV Fleet Models
    200
  30. From 15 to 40+ FPS: Accelerating PyTorch Object Detection on Automotive ECUs
    232