We Keep Coding

how to fade in and out with javascript

I am trying to make a message appear if the user doesn't scroll for specific amount of time and then make the text fade out as soon as the user scroll. What I have tried so far is not working.
I am looking for vanilla javascript solutions only.
thank you for your help.
// make scroll button appear ---------------
var scrollText = document.getElementById("scrollMsg");
function showMsg() {
scrollText.className = "show";
}
setTimeout(showMsg, 2000);
// make scroll button fadout ---------------
function scrollHide() {
var scrollText2 = document.querySelector("#scrollMsg.show");
var scrllTPosition = scrollText2.getBoundingClientRect().top;
var screenPosition = window.innerHeight / 0.5;
if (scrllTPosition < screenPosition) {
scrollText2.classList.add("scrollHide");
}
}
window.addEventListener("scroll", scrollHide);
#scrollMsg {
height: auto;
position: sticky;
bottom: 175px;
z-index: 1;
opacity: 0;
-webkit-transition: opacity 0.7s;
-moz-transition: opacity 0.7s;
transition: opacity 0.7s;
}
#scrollMsg.show {
opacity: 1;
-webkit-transition: opacity 0.7s ease-in-out;
-moz-transition: opacity 0.7s ease-in-out;
transition: opacity 0.7s ease-in-out;
}
#scrollhide {
opacity: 0;
-webkit-transition: opacity 0.7s ease-in-out;
-moz-transition: opacity 0.7s ease-in-out;
transition: opacity 0.7s ease-in-out;
}
<p id="scrollMsg">scroll</p>

I've added some large divs to allow us to scroll through the document.
// make scroll button appear ---------------
var scrollText = document.getElementById("scrollMsg");
window.addEventListener('scroll', (e) => {
console.log('user scrolled!')
scrollText.style.opacity = 0
});
#scrollMsg {
opacity: 1;
transition: opacity 1s;
}
<div style="height:100px"></div>
<p id="scrollMsg">scroll</p>
<div style="height:4000px"></div>

How do I delay playing of HTML5 audio, but ignore the delay from loading the audio file?

I would like an HTML5 audio sample to play 10 seconds after a page has loaded, to coincide with a CSS transition on the page. This works fine locally, however when loading the web page in a live environment there is a 1-2 second delay as the audio is loaded and it seems the JavaScript below takes the 10 seconds from when the audio has loaded rather than from when the page is initially loaded.
Please could someone advise how I can make sure the audio plays 10 seconds in (which is plenty time to load the audio file itself) at the exact point the transition occurs, rather than taking the 10 seconds from when the audio itself loads?
The header which appears at 10 seconds:
h1
{
position: absolute;
width: 2.6em;
left: 50%;
top: 25%;
font-size: 10em;
text-align: center;
margin-left: -1.3em;
line-height: 0.8em;
letter-spacing: -0.05em;
color: #000;
text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
opacity: 0;
z-index: 1;
-webkit-animation: logo 5s ease-out 10s;
-moz-animation: logo 5s ease-out 10s;
-ms-animation: logo 5s ease-out 10s;
-o-animation: logo 5s ease-out 10s;
animation: logo 5s ease-out 10s;
}
The HTML for the audio:
<audio id="theme" preload="auto" controls>
<source src="audio/sound.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
The JavaScript:
function playtheme() {
document.getElementById('theme').play();
}
function playaudio() {
setTimeout("playtheme()", 10000);
}

Try this!
window.onload = function() { // when the page loads
setTimeout(play, 10000); // set a 10 second timeout to call play()
}
play = function() { // play the audio
document.getElementById("theme").play();
}

Unfortunately, there is no way to know how long the load will take, so starting the animation before you know it's loaded may or may not line up with the audio beginning.
If the most important thing is that the animation lines up with the audio beginning, you need to wait for the audio to load to begin your timer and animation. Below, I've demonstrated this.
If the most important thing is that the animation happens 10 seconds in, you should start the animation on page load and play the audio whenever it's done loading
This waits until the audio is ready to play to begin the timer. If the load takes 15 seconds, the audio will take 25 seconds from page load to begin.
(function() {
// BEGIN: For debugging
var counter = 0;
var timer = setInterval(function() {
counter += 1
document.getElementById('debugcounter').innerHTML = counter;
}, 1000);
// END: For debugging
document.getElementById('theme').oncanplay = function() {
// BEGIN: For debugging
document.getElementById('loaded').innerHTML = "Yes";
// END: For debugging
// Create and append the h1 now, once it's able to play
// This element has a animation delay of 10 seconds, so it will line up with the audio playing
var h1Ele = document.createElement('h1');
h1Ele.appendChild(document.createTextNode("This is the H1 whose animation is complete once the audio plays"));
document.getElementsByTagName("body")[0].appendChild(h1Ele);
var audioEle = this;
// Play after 10 seconds
setTimeout(function() {
audioEle.play();
// BEGIN: For debugging
clearInterval(timer);
// END: For debugging
}, 10000); // 10 seconds
};
})();
/* BEGIN: For debugging */
.debuginfo {
position: absolute;
bottom: 20px;
right: 20px;
background: rgba(255, 0, 0, .5);
padding: 20px;
border-radius: 5px;
}
.debuginfo p {
margin: 0;
}
/* END: For debugging */
#-webkit-keyframes logo {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes logo {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-o-keyframes logo {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes logo {
0% { opacity: 0; }
100% { opacity: 1; }
}
h1 {
opacity: 0;
/*
animation-name: logo;
animation-duration: 5s;
animation-timing-function: ease-out;
animation-delay: 10s;
animation-fill-mode: forwards;
*/
-webkit-animation: logo 5s ease-out 10s forwards;
-moz-animation: logo 5s ease-out 10s forwards;
-ms-animation: logo 5s ease-out 10s forwards;
-o-animation: logo 5s ease-out 10s forwards;
animation: logo 5s ease-out 10s forwards;
}
<div class="debuginfo">
<p>Loaded? <span id="loaded">No</span></p>
<p>Time since page load: <span id="debugcounter"></span></p>
</div>
<audio id="theme" preload="auto" controls>
<!-- Using deelay.me for debugging purposes. This will delay the load for 15 seconds -->
<source src="http://deelay.me/15000/http://www.noiseaddicts.com/samples_1w72b820/2534.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
Alternatively, instead of maintaining "10 seconds" in both JavaScript and CSS, you can control it entirely in JS... see below:
(function() {
// BEGIN: For debugging
var counter = 0;
var timer = setInterval(function() {
counter += 1
document.getElementById('debugcounter').innerHTML = counter;
}, 1000);
// END: For debugging
document.getElementById('theme').oncanplay = function() {
var audioEle = this;
// BEGIN: For debugging
document.getElementById('loaded').innerHTML = "Yes";
// END: For debugging
// Play after 10 seconds
setTimeout(function() {
audioEle.play();
document.getElementsByTagName('h1')[0].className = "audio-started";
// BEGIN: For debugging
clearInterval(timer);
// END: For debugging
}, 10000); // 10 seconds
};
})();
/* BEGIN: For debugging */
.debuginfo {
position: absolute;
bottom: 20px;
right: 20px;
background: rgba(255, 0, 0, .5);
padding: 20px;
border-radius: 5px;
}
.debuginfo p {
margin: 0;
}
/* END: For debugging */
#-webkit-keyframes logo {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes logo {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-o-keyframes logo {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes logo {
0% { opacity: 0; }
100% { opacity: 1; }
}
h1 {
opacity: 0;
}
h1.audio-started {
/*
animation-name: logo;
animation-duration: 5s;
animation-timing-function: ease-out;
animation-delay: 10s;
animation-fill-mode: forwards;
*/
-webkit-animation: logo 5s ease-out 0s forwards;
-moz-animation: logo 5s ease-out 0s forwards;
-ms-animation: logo 5s ease-out 0s forwards;
-o-animation: logo 5s ease-out 0s forwards;
animation: logo 5s ease-out 0s forwards;
}
<div class="debuginfo">
<p>Loaded? <span id="loaded">No</span></p>
<p>Time since page load: <span id="debugcounter"></span></p>
</div>
<audio id="theme" preload="auto" controls>
<!-- Using deelay.me for debugging purposes. This will delay the load for 15 seconds -->
<source src="http://deelay.me/15000/http://www.noiseaddicts.com/samples_1w72b820/2534.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<h1>Audio Began</h1>

Flashing text once in Javascript

I would like for a bit of text to flash once at say 1 second in. Have this code so far (which I gather bits from this site) - I have looked at the blinking function but i think this is my best option.
function flashtext(ele, col) {
var tmpColCheck = document.getElementById(ele).style.color;
if (tmpColCheck === 'white') {
document.getElementById(ele).style.color = col;
} else {
document.getElementById(ele).style.color = 'white';
}
}
setInterval(function () {
flashtext('tdOne', 'blue');
}, 1000);

<div id="example">Hello!</div>
$(document).ready(function() {
var f = document.getElementById('example');
setInterval(function() {
f.style.display = (f.style.display == 'none' ? '' : 'none');
}, 1000);
});
OR
if you want to call the function explicitly, use this -
function blink() {
var f = document.getElementById('Foo');
setInterval(function() {
f.style.display = (f.style.display == 'none' ? '' : 'none');
}, 1000);
}

You can do this in css alone i use it for the colons on a digital clock on a dashboard. see included fiddle Here.
p {
-moz-animation: mymove 1s ease infinite;
-webkit-animation: mymove 1s ease infinite;
-ms-animation: mymove 1s linear infinite;
-o-animation: mymove 1s linear infinite;
animation: mymove 1s linear infinite;
}
#keyframes mymove {
0% { opacity: 1.0; text-shadow: 0 0 20px #00c6ff; }
50%{ opacity: 0; text-shadow: none;}
100% { opacity: 1.0; text-shadow: 0 0 20px #00c6ff;}
}
#-webkit-keyframes mymove {
0% { opacity: 1.0; text-shadow: 0 0 20px #00c6ff; }
50%{ opacity: 0; text-shadow: none;}
100% { opacity: 1.0; text-shadow: 0 0 20px #00c6ff; }
}

why my background-image transition is not working in firefox

I am trying to change the background image of an div without having any effect on the content inside the div. i wrote following code to change the background-mage. I didn't understand why firefox doesn't respond to my css transition. is there any fix by which i can make it to work in ie and firefox.
Html
<body>
<header>
</header>
</body>
Css
body {
margin: 0;
}
header {
height: 665px;
width: 100%;
background-image: url('image0.jpg');
-moz-transition: background-image 1s ease-in-out;
-webkit-transition: background-image 1s ease-in-out;
-ms-transition: background-image 1s ease-in-out;
-o-transition: background-image 1s ease-in-out;
}
Jquery
function preloadImages(array) {
if (!preloadImages.list) {
preloadImages.list = [];
}
for (var i = 0; i < array.length; i++) {
var img = new Image();
img.src = array[i];
preloadImages.list.push(img);
}
}
var imageURLs = [
"image0.jpg",
"image1.jpg",
"image2.jpg",
"image3.jpg",
"image4.jpg"
];
preloadImages(imageURLs);
var counterForBackgroundImage = -1;
function changeBackgroundImage() {
counterForBackgroundImage++;
if (counterForBackgroundImage > imageURLs.length-1)
counterForBackgroundImage = 0;
$('header').css('background-image', 'url(' + imageURLs[counterForBackgroundImage] + ')');
setTimeout(function() {
changeBackgroundImage();
}, 5000);
}
changeBackgroundImage();

background-image animate property is not listed at w3c animatable list.
Try using some trick such as this.

Trigger animation on scroll down

Here i creat animation that turns from color to grayscale but i want it will start only when user will scroll down (as it's in my site with a lot of images and need to scroll down to get there)
here is the fiddle example:
http://jsfiddle.net/4tHWg/7/
.box {
float: left;
position: relative;
width: 14.285714286%;
}
.boxInner img {
width: 100%;
display: block;
}
.boxInner img:hover {
-webkit-filter: grayscale(0%);
}
#-webkit-keyframes toGrayScale {
to {
-webkit-filter: grayscale(100%);
}
}
.box:nth-child(1) img {
-webkit-animation: toGrayScale 1s 0.5s forwards;
}
.box:nth-child(2) img {
-webkit-animation: toGrayScale 2s 1s forwards;
}
.box:nth-child(3) img {
-webkit-animation: toGrayScale 3s 1.5s forwards;
}

This should do the trick.
$( window ).scroll(function() {
$(".box").each(function (index){
if (index == 1)
{
$(":nth-child("+index+")", $(this)).css('-webkit-animation','toGrayScale 1s 0.5s forwards');
}
if (index == 2)
{
$(":nth-child("+index+")", $(this)).css('-webkit-animation','toGrayScale 2s 1s forwards');
}
if (index == 2)
{
$(":nth-child("+index+")", $(this)).css('-webkit-animation','toGrayScale 3s 1.5s forwards');
}
});

If I understand correctly what you are looking to do, then you can handle scrolling with .scroll() function. Then trigger the animation if the windows .scrollTop() reaches each .box's offset().top.
$(window).scroll(function(){
var st = $(this).scrollTop();
$('.box').each(function(index, element){
if(st >= $(this).offset().top){
$(this).find('img').css({'-webkit-animation':'toGrayScale 1s 1s forwards'});
}
});
});
Here is the updated fiddle.