Post by Void on Jun 26, 2015 15:33:09 GMT 10
Hello! I'm rather new to coding, but I was wondering if I could have help with using and understanding the text fading in after a pageload.
<html>
<head>
<script language="javascript">
col=255;
function fade() { document.getElementById("fade").style.color="rgb(" + col + "," + col + "," + col + ")"; col-=2; if(col>0) setTimeout('fade()', 45); }
</script>
</head>
<body onLoad="fade()">
<span id="fade">This is the text!</span>
</body></html>
So firstly, is there anyway to make the text go through the same effect but fading in ultimately into grey (#5c5c5c) rather than complete black? Secondly, rather than on page load, how could I have the fade happen ... say 5 seconds after the page load? or as I scrolled down to that specific part of the website that has the fade-in text? Thank you very much! 
|
|
Post by Nathan Lecompte on Jun 26, 2015 16:53:48 GMT 10
Hello! I'm rather new to coding, but I was wondering if I could have help with using and understanding the text fading in after a pageload.
<html>
<head>
<script language="javascript">
col=255;
function fade() { document.getElementById("fade").style.color="rgb(" + col + "," + col + "," + col + ")"; col-=2; if(col>0) setTimeout('fade()', 45); }
</script>
</head>
<body onLoad="fade()">
<span id="fade">This is the text!</span>
</body></html>
So firstly, is there anyway to make the text go through the same effect but fading in ultimately into grey (#5c5c5c) rather than complete black? Secondly, rather than on page load, how could I have the fade happen ... say 5 seconds after the page load? or as I scrolled down to that specific part of the website that has the fade-in text? Thank you very much! Hey Void , This can be easily achieved with jQuery, it should make things a lot less complicated. First you'll have to link to the jQuery library for any jQuery to be functional on your webpage. Simply insert this into your webpage header: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>To fade-in the text to gray with a 5 second delay on page load, simply put this into your webpage header as well: <script>
$(document).ready(function () {
$('#fade').delay(5000).animate({color:'gray'}, 800);
});
</script>After 5 seconds the text should fade to gray. The code should look like this in the layout you provided me: <html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(document).ready(function () {
$('#fade').delay(5000).animate({color:'gray'}, 800);
});
</script>
</head>
<body>
<span id="fade">This is the text!</span>
</body>
</html>
Hope this helps and welcome to the TechViewForum! 
|
|
Post by Void on Jun 27, 2015 12:26:28 GMT 10
Thank you very much! It does really help!
|
|
Post by altair on Jul 13, 2015 3:59:13 GMT 10
|
|
Post by Deleted on Oct 27, 2015 22:53:43 GMT 10
<script language="javascript">
col=255;
function fade() { document.getElementById("fade").style.color="rgb(" + col + "," + col + "," + col + ")"; col-=2; if(col>0) setTimeout('fade()', 45); }
</script>Your function is recursive, meaning it will continue to recall itself until a certain condition is meet. That condition is the col variable being equal to zero(0). Each time the function is called it subtracts 2 from the col variable until the col(255-white) reaches zero(0-black). This function has a division error though so don't use it. The correct check would be if( col > 0 && col % 2 == 0), this would check if col is divisible by 2, without that check the function would just loop infinitely. You could create the same effect with CSS3 Animations. You would need to figure out vendor prefixes on your own and check for browser support.
.fade{
animation: fadeToGrey 1s forwards 5s; // 5 second delay before animation starts
transition: animation 1s ease-in-out;
}
@keyframes fadeToGrey
{
0% : { opacity: 0; }
100% : { opacity: 1;}
}
[SOLVED] Fade-In Text
Posted Oct 27, 2015 22:53:43 GMT 10
Last Edit: Oct 27, 2015 22:56:54 GMT 10 by Deleted
|
|
