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>

How to add transition from one function to another in JavaScript?

I want to add some smooth transition or animation from the mouse enter event to the mouse leave.
JS :
/* mudar cor do logo maior */
var myImage = document.querySelector('img#logo-maior');
myImage.onmouseenter = function() {
var mySrc = myImage.getAttribute('src');
myImage.setAttribute ('src','images/type-logo-coral.png');
}
myImage.onmouseleave = function() {
var mySrc = myImage.getAttribute('src');
myImage.setAttribute ('src','images/type-logo.png');
}
HTML :
<div class="display">
<img id="modelos" src="images/modelos/1.png">
<img id="logo-maior" src="images/type-logo.png" alt="TYPE logo">
<!--
<button type="button" onclick="displayPreviousImage()">Previous</button>
<button type="button" onclick="displayNextImage()">Next</button>
-->
</div>

Use CSS Animation. Add class for each function that will trigger the animation
Try this code
css
.transition1{
animation: fadeIn1 1.5s;
-webkit-animation: fadeIn1 1.5s; ;
opacity: 1;
}
#keyframes fadeIn1{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
#-webkit-keyframeskeyframes fadeIn1{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
.transition2{
animation: fadeIn2 1.5s;
-webkit-animation: fadeIn2 1.5s; ;
opacity: 1;
}
#-webkit-keyframeskeyframes fadeIn2{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
javascript
var myImage = document.querySelector("img#logo-maior");
myImage.onmouseenter = function() {
myImage.classList.remove("transition2");
myImage.setAttribute("class", "transition1");
myImage.setAttribute("src", "../image2.jpg");
};
myImage.onmouseleave = function() {
myImage.classList.remove("transition1");
myImage.setAttribute("class", "transition2");
myImage.setAttribute("src","../image1.jpg"
);
};
html
<div class="display">
<img
id="logo-maior"
src="../img1.jpg"
alt="TYPE logo"
/>
</div>

In your CSS code:
img:hover {
(whatever styles you want for the hovering effect)
transition: all 0.5s ease-out;
}
For more information on transitions visit: https://developer.mozilla.org/en-US/docs/Web/CSS/transition

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>

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>

javascript - innerHTML with fade in

With the following line of code:
document.getElementById("myDiv").innerHTML=txt;
Is it possible to add the .fadeIn("slow" ) function? I would like the new text to fade in.

Do it with js+CSS.
With a CSS transition it will fade in.
You need to have the font-color set to background-color.
First change content,
then change color to normal font color.
Your js:
document.getElementById("myDiv").innerHTML=txt;
document.getElementById("myDiv").style.color = "#333333";
Your CSS:
#myDiv {
color: #ffffff;
transition: color 2s ease 0s;
}

Ended up just doing this:
$("div.col-lg-6").replaceWith(function() {
return $(txt).hide().fadeIn(1000);});

A bit of a hack, but you could do it like this: http://codepen.io/zvona/pen/LVxxjM
Where we use CSS transitions for the purpose.
<button class='add'>Add text</button>
<button class='clear'>Clear text</button>
<div id="myDiv"></div>
and:
#myDiv {
opacity: 0;
transition: opacity 1000ms;
}
#myDiv.show {
opacity: 1;
}
and:
var myDiv = document.querySelector("#myDiv");
document.querySelector(".add").addEventListener('click', function() {
myDiv.textContent = "Fade magic";
myDiv.classList.add('show');
}, false);
document.querySelector(".clear").addEventListener('click', function() {
myDiv.classList.remove('show');
}, false);

In CSS
#mydiv {
opacity: 0;
transition: opacity 2s;
}
In JS
document.getElementById("myDiv").style.opacity= "1";

Try not to worry about fading in/out the innerHTML property. Instead, wrap the innerHTML in a span tag (or, alternatively, a div tag), and then simply fade that element in and out.
Here it is with a 1,000 millisecond delay:
const fadetime = 1000;
function fadeInElement(element) {
element.style.removeProperty('display');
setTimeout(function() {
element.classList.remove('fade');
}, 10);
return true;
}
function fadeOutElement(element) {
element.classList.add('fade');
setTimeout(function() {
element.style.display = 'none';
}, fadetime);
return true;
}
var buttondisplay = false;
document.getElementById('button').addEventListener('click', function(ev) {
if(buttondisplay) {
fadeOutElement(document.getElementById('button-text-2'));
setTimeout(function() {
fadeInElement(document.getElementById('button-text-1'));
}, fadetime);
} else {
fadeOutElement(document.getElementById('button-text-1'));
setTimeout(function() {
fadeInElement(document.getElementById('button-text-2'));
}, fadetime);
}
buttondisplay = !buttondisplay;
});
.fadeable {
opacity: 1;
transition: opacity 1s;
}
.fade {
opacity: 0 !important;
}
<button id="button">
<span id="button-text-1" class="fadeable">First Text</span>
<span id="button-text-2" class="fadeable fade" style="display:none;">Second text!</span>
</button>