We Keep Coding

Show div when scrolling using vanilla JavaScript

I'm using vanilla JavaScript and would like to figure out a way where a div container is hidden, but when the user scrolls to 50% of the div container, that's when the div is fully visible. Kind of like a fading-in effect. This is what I have so far:
// delays scroll affects
function debounce(func, wait = 20, immediate = true) {
var timeout;
return function() {
var context = this,
args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
// adds animation for section cards
function cardActive(e) {
const cards = document.querySelectorAll('.slide-in');
// checks if image is half shown from bottom
cards.forEach(card => {
const slideInAt = (window.scrollY + window.innerHeight) - card.height / 2;
if (slideInAt > card.offsetTop) {
card.classList.add('active')
} else {
card.classList.remove('active');
}
})
};
window.addEventListener('scroll', debounce(cardActive));
.slide-in {
opacity: 50%;
transition: opacity 0.8s;
}
.slide-in.active {
transition: opacity 0.8s;
opacity: 100%;
visibility: visible !important;
}
.placeholder {
margin-top: 400px;
}
.icon {
width: 100px;
}
<div class="placeholder"></div>
<div class="mission-1 slide-in">
<div class="section-card">
<img class="icon" src="https://image.flaticon.com/icons/svg/869/869767.svg" alt="icon">
<h6 class="mission-card-title">Title 1</h6>
<p class="p-special">Lorem Ipsum.</p>
</div>
</div>
<div class="placeholder"></div>

You need to make two small changes:
You need to replace card.height with card.offsetHeight in your JS file.
Use transition in your CSS file, you do not need animation for a fade in effect:
.slide-in {
opacity: 0%;
transition: opacity 0.8s;
}
.active {
transition: opacity 0.8s;
opacity: 100%;
visibility: visible !important;
}

Here the image is already shown with opacity 1 and then once scrolled over it it will fade using just JS.
// adds animation for section cards
window.addEventListener('scroll', (e) => {
last_known_scroll_position = window.scrollY;
let img = document.getElementById("img-1");
if(img.offsetTop < last_known_scroll_position){
img.style.opacity= 0.1;
}else{
img.style.opacity= 1;
}
});
.slide-in {
opacity: 50%;
}
.slide-in.active {
opacity: 100%;
-webkit-animation: animat_show 0.8s;
animation: animat_show 0.8s;
visibility: visible !important;
}
.lorem {
margin-bottom: 500px;
}
img {
width: 500px;
}
<section class="space">
<p class="lorem">lorem ipsum</p>
<div class="slide-in">
<img class="img-1" id="img-1" src="https://image.flaticon.com/icons/svg/869/869767.svg" alt="confetti">
</div>
<p class="lorem">lorem ipsum</p>
</section>

adding fadein effect with inner.HTML

Looking to fade-in content when using inner.HTML.
Current code;
<td style="width: 20%;" class="responsive-td" valign="top">
<div id="placeholder1" class="placeholder1" style="color:white;"></div>
</td>
if (//logic here){
document.getElementById('placeholder1').innerHTML ='add this with fading effect';
setTimeout(addFn1, 300);
function addFn1() {
document.getElementById('placeholder2').innerHTML ='add this with fading effect';}
setTimeout(addFn2, 1200);
function addFn2() {
document.getElementById('placeholder3').innerHTML ='add this with fading effect';}
}
I attempted using css however it doesn't create the effect due to setTimeout.
Is there a simple solution using CSS or JS? Or even jQuery if need be?

That is easy to do with jQuery, since there are methods for simple animations like this.
Have a look at .fadeIn() and .fadeOut().
if (true){
$('#placeholder1').html('add this with fading effect').fadeIn(600);
setTimeout(addFn1, 300);
function addFn1() {
$('#placeholder2').html('add this with fading effect').fadeIn(600);}
setTimeout(addFn2, 1200);
function addFn2() {
$('#placeholder3').html('add this with fading effect').fadeIn(600);}
}
body{
background-color:black;
}
.placeholder1{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td style="width: 20%;" class="responsive-td" valign="top">
<div id="placeholder1" class="placeholder1" style="color:white;"></div>
<div id="placeholder2" class="placeholder1" style="color:white;"></div>
<div id="placeholder3" class="placeholder1" style="color:white;"></div>
</td>

May be you can try using opacity set to old=zero to new=one while changing text.
Option: Using CSS3 and Js(no jquery)
document.addEventListener('DOMContentLoaded', function() {
var quotes = ["Hello", "there", "everyone"];
var infos = document.querySelectorAll('div.info');
var repeat = Array.prototype.slice;
var fadeIn = function(i) {
if (!infos[i]) {
return;
}
infos[i].innerHTML = quotes[i];
infos[i].classList.add("open");
};
repeat.call(infos).forEach(function(el) {
var callBack = function(e) {
var that = this;
repeat.call(infos).forEach(function(cur, ind) {
if (cur == that) {
fadeIn(1 + ind);
return false;
}
});
};
el.addEventListener('webkitAnimationEnd', callBack);
el.addEventListener('animationEnd', callBack);
});
fadeIn(0); /* trigger fade */
});
.info {
opacity: 0;
filter: alpha(0%);
border: 1px solid #ccc;
margin: 1px 2px;
}
#keyframes fade {
from {
opacity: 0;
filter: alpha(0%);
}
to {
opacity: 1;
filter: alpha(100%);
}
}
.info.open {
-webkit-animation: fade .3s;
-moz-animation: fade .3s;
-ms-animation: fade .3s;
-o-animation: fade .3s;
animation: fade .3s;
opacity: 1;
filter: alpha(100%);
}
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>

How I can animate this slideshow(by changing its src)?

Okay okay, so before marking this post as repeated. Let me explain to you:
I made a slideshow in javascript(Vue) and it works by changing its src in an object every time I press a button(next)
It works and all but the problem is that it doesn't get animated no matter what I do, I made a transition on them, set timeout function on it...etc and nothing even the smallest worked.
I could have made another idea which works by the position absolute but I don't want to do that because it will take a loot of time and it will be extremely buggy as position absolute ruins it. So any help on this please?
<template>
<main>
<div id="slideshow">
<figure id="pics">
<img id="slidepic" v-bind:src="pictures[count].src">
<figcaption>{{pictures[count].alt}}</figcaption>
</figure>
</div>
<p>{{count+1}}/{{pictures.length}}</p>
<div id="controls">
<div #click="move(-1)">Previous</div>
<div #click="move(1)">Next</div>
</div>
</main>
Javascript:
methods: {
move: function(num) {
let slideimg = document.querySelector("#slidepic");
slideimg.classList.add("fadeOut");
this.count += num;
if (this.count < 0) {
this.count = this.pictures.length - 1;
} else if (this.count >= this.pictures.length) {
this.count = 0;
}
setTimeout(function() {
slideimg.src = this.pictures[1].src;
}, 1000);
}
}
CSS:
#pics {
opacity: 0.5s;
transition: 0.5s;
}
#pics.fadeOut {
opacity: 1;
}
I didn't include the object(that is in data object, something in Vue) because it would be useless in this situation.

First off all it's transition: <property-name> 0.5s linear; and not transition: 0.5s;. See the transition documentation.
There is no animation for changing the src of an image (see list of animatable css properties).
To do something like this, you can stack all your images into one element and then use css animations and the transform property to create a carousel
var next = document.getElementById('next');
var prev = document.getElementById('prev');
var slideshow = document.getElementById('slideshow');
next.onclick = function() {
var lastChild = slideshow.children[slideshow.children.length - 1];
var firstChild = slideshow.children[0];
var activeEle = document.querySelector('.item.active');
var nextEle = document.querySelector('.item.next');
var prevEle = document.querySelector('.item.prev');
activeEle.classList.remove('active');
activeEle.classList.add('prev');
nextEle.classList.add('active');
nextEle.classList.remove('next');
prevEle.classList.remove('prev');
if (nextEle.nextElementSibling) {
nextEle.nextElementSibling.classList.add('next');
} else {
firstChild.classList.add('next');
}
};
prev.onclick = function() {
var lastChild = slideshow.children[slideshow.children.length - 1];
var activeEle = document.querySelector('.item.active');
var nextEle = document.querySelector('.item.next');
var prevEle = document.querySelector('.item.prev');
// Move the .active class to the previous element
activeEle.classList.remove('active');
activeEle.classList.add('next');
prevEle.classList.add('active');
prevEle.classList.remove('prev');
nextEle.classList.remove('next');
if (prevEle.nextElementSibling) {
prevEle.nextElementSibling.classList.add('prev');
} else {
lastChild.classList.add('prev');
}
};
#slideshow {
width: 100px;
height: 100px;
overflow: hidden;
position: relative;
}
.item {
width: 100%;
height: 100%;
color: white;
background-color: blue;
position: absolute;
/*display: none;*/
top: 0;
left: 0;
z-index: -100;
transition: translateX(-100%);
transition: transform .5s ease-in-out;
opacity: 0;
}
.active {
opacity: 1;
display: block;
z-index: 1;
transform: translateX(0);
}
.next {
transform: translateX(200%);
z-index: 1;
}
.prev {
transform: translateX(-100%);
opacity: 1;
z-index: 1;
}
<div id="slideshow">
<div class="item active">1</div>
<div class="item next">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item prev">7</div>
</div>
<button type="button" id="prev">Prev</button><button type="button" id="next">Next</button>

As you mention you want to build a slideshow on Vue JS, and because jQuery on top of Vue is not recommended, I suggest that you try Vueper Slides, available on NPM. Unless it is for a learning purpose.

I have created two solutions.
First of all. You've a typo.
#pics {
opacity: 0.5s; // <--- remove "s"
transition: 0.5s; // <--- and forgot the property-name (all, opacity ...)
}
#pics.fadeOut {
opacity: 1;
}
I commented all lines I've changed.
Solution
<template>
<main>
<div id="slideshow">
<!--
I recommend to you ref inestad of querySelector.
https://vuejs.org/v2/api/#ref
I've used the v-bind shorthand.
-->
<figure id="pics1" ref="pics1">
<img id="slidepic" :src="pictures[count].src">
<figcaption>{{pictures[count].alt}}</figcaption>
</figure>
<!--
VueJS build-in transition element.
You have to add a key attribute to detect that the content has changed.
I recommend to use this instead of your solution.
It's easier to implement, no class add/remove struggle, its a part of vue, you can add hooks etc.
https://vuejs.org/v2/guide/transitions.html
-->
<transition tag="figure" name="fade" ref="pics2">
<figure id="pics2" :key="`figure-${count}`">
<img :src="pictures[count].src">
<figcaption>{{pictures[count].alt}}</figcaption>
</figure>
</transition>
</div>
<p>{{count+1}}/{{pictures.length}}</p>
<div id="controls">
<div #click="move(-1)">Previous</div>
<div #click="move(1)">Next</div>
</div>
</main>
</template>
<script>
export default {
name: 'teams',
data() {
return {
count: 0,
pictures: [
{
src: 'https://picsum.photos/200/300',
alt: 'test'
},
{
src: 'https://picsum.photos/200/400',
alt: 'test2'
}
]
};
},
methods: {
// instead of move: function(num) {} you can also write move() {}
move(num) {
this.count += num;
if (this.count < 0) {
this.count = this.pictures.length - 1;
} else if (this.count >= this.pictures.length) {
this.count = 0;
}
}
},
// Watch "count" changes and add or remove classes
// you can also add this to your "move" method
watch: {
count() {
// access the reference
const element = this.$refs.pics1;
element.classList.add('fadeOut');
element.classList.remove('fadeIn');
setTimeout(() => {
element.classList.remove('fadeOut');
element.classList.add('fadeIn');
}, 500); // same duration as css transition
}
}
};
</script>
<style scoped lang="scss">
#pics1 {
opacity: 1;
transition: opacity 0.5s;
}
#pics1.fadeIn {
opacity: 1;
}
#pics1.fadeOut {
opacity: 0;
}
// All classes for <transition>
// There are all automatically used by vue
.fade-enter-active {
transition: opacity 0.5s;
}
.fade-leave {
display: none;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>

Need to add fade in to image om slideshow

I need to add a fade in and fade out annimation to my image on existing code for slide show. The images must fade in /fade out when user click the buttons. Here is my code.
HTML:
<div id="imageSlider">
<button id="prevBTN" onclick="prev()"> <b>Prev</b> </button>
<button id="nextBTN" onclick="next()"> <b>Next</b> </button>
</div>
Javascript:
var images = [
"HTMLcert.jpg",
"CSScert.jpg",
"javaScriptCert.jpg",
"PHPcert.jpg"
];
var num = 0;
function next() {
var slider =
document.getElementById("slider");
num++;
if (num >= images.length) {
num = 0;
}
slider.src = images[num];
}
function prev() {
var slider =
document.getElementById("slider");
num--;
if (num <= 0) {
num = images.length - 1;
}
slider.src = images[num];
}
how can I add fade in and out to existing java script code .

You can add and remove a class to the active slider element in your javascript function like this:
var slider = document.getElementById("slider");
slider.className += " active";
setTimeout(function(){
slider.classList.remove("active");
}, 100);
And then your css will look something like this:
.active {
animation: fade 1s;
}
#keyframes fade {
from { opacity: 0; }
to { opacity: 1 }
}

You can do it using CSS3 annimation , by creating a custom animation , add a class using this last then toggle the class while clicking in the buttons .
bellow a working snippet :
var images = [
"http://ramg1.net/images/3.jpg",
"https://www.gregbowe.com/assets/img/htmlcert.jpg",
"http://www.lordlamer.de/wp-content/uploads/2011/02/php-cert.jpg",
"http://www.michellekeselgiancola.com/images/certs/uploads/phpcert.jpg"
];
var num = 0;
function next() {
var slider =
document.getElementById("slider");
num++;
if (num >= images.length) {
num = 0;
}
slider.classList.remove("fade");
slider.src = images[num];
setTimeout(function(){slider.classList.add("fade");},10);
//slider.classList.add("fade");
}
function prev() {
var slider =
document.getElementById("slider");
num--;
if (num <= 0) {
num = images.length - 1;
}
slider.classList.remove("fade");
slider.src = images[num];
setTimeout(function(){slider.classList.add("fade");},10);
//slider.classList.add("fade");
}
/* create the fade custom annimation wich set 0 to 1 opacity on an element */
#-webkit-keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-o-keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* create the class that trigger the annimation */
.fade {
-webkit-animation: fade 2s ease; /* Safari 4+ */
-moz-animation: fade 2s ease; /* Fx 5+ */
-o-animation: fade 2s ease; /* Opera 12+ */
animation: fade 2s ease; /* IE 10+, Fx 29+ */
}
<div id="imageSlider">
<img id="slider" class="fade" src="http://ramg1.net/images/3.jpg" width="400px" height="80%" />
<button id="prevBTN" onclick="prev()"> <b>Prev</b> </button>
<button id="nextBTN" onclick="next()"> <b>Next</b> </button>
</div>

Performance-friendly blinking effect

I'd love to add a blinking effect like this, but I think setInterval is overkill for what's mere cosmetic stuff:
jQuery(function(){
$("#watch").each(function(){
var $box = $(this);
var show = true;
setInterval(function(){
var m = moment();
$box.text(show ? m.format('H:mm') : m.format('H mm'));
show = !show;
}, 500);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script>
<div id="watch">--:--</div>
Is there a newer JavaScript API I could be using, or maybe a CSS transition?

Using the CSS provided by this answer, you can do this
jQuery(function() {
$("#watch").each(function() {
var $box = $(this);
setInterval(function() {
var m = moment();
$box.html(m.format('H') + '<span class="blink_me">:</span>' + m.format('mm'));
}, 1000);
});
});
.blink_me {
animation: blinker 1s infinite;
}
#keyframes blinker {
50% {
opacity: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script>
<div id="watch">--:--</div>

For the records, this is the final CSS I wrote based on George's answer:
section {
font-size: 5rem;
}
.stop-watch span {
animation: blink 1s infinite;
}
#keyframes blink{
0% {
animation-timing-function: steps(1, end);
opacity: 1;
}
50% {
animation-timing-function: steps(1, end);
opacity: 0;
}
}
<section class="stop-watch">
1<span>:</span>59
</section>