Develop Reference

Simulate 'backspace' in Jquery

I have a simple animation code, looks like a console input.
Originally from: https://codepen.io/atunnecliffe/pen/BaZyLR
I modified the splash screen intro into just a console input in my website:
Code:
<script>
//console
var textarea = $('.term');
var text = 'ping life';
var i = 0;
runner();
function runner() {
textarea.append(text.charAt(i));
i++;
setTimeout(
function () {
runner();
}, Math.floor(Math.random() * 1000) + 50);
}
</script>
Now the effect that I want is a bit complex, for me at least, as my knowledge about JQuery is limited. I wanted the code to enter ping life, then backspace completely, repeat infinitely. I looked up on how to simulate backspace in JQuery, using escape sequence of (8), but I am not sure how to use the escape sequence, nor implement the function into the existing recursive function, for it to repeat infinitely.
Any help would be wonderful :)

Like this?
Counting like this will give a zigzag like counting pattern. I added buffers for start and end of input, and a fixed timeout for deleting letters.
textarea.text(text.substr(0, i)) selects a substring of your text (treated as an array of letters - selecting everything between index 0 and i)
Easier than appending and deleting letters
var direction = 1;
var i = 0;
var textarea = $('.term');
var text = 'ping life';
// NOTE:
// I added the "#dev:~$ " as css:before elem, easier to write the code
function count() {
i += direction;
direction *= (((i % text.length) == 0) ? -1 : 1);
textarea.text(text.substr(0, i));
clearInterval(time);
// direction is 1 if counting up
if (direction === 1) {
if (i === 0) {
// buffer for start
time = setInterval(count, 1000);
} else {
time = setInterval(count, Math.floor(Math.random() * 1000) + 50);
}
} else {
// direction is -1 if counting down
if (i === text.length) {
time = setInterval(count, 1500);
} else {
// buffer for end
time = setInterval(count, 100);
}
}
}
// inital interval
// setTimeout doesn't work well here
var time = setInterval(count, 1000)
html,
body {
margin: 0 auto;
height: 100%;
}
pre {
padding: 0;
margin: 0;
}
pre::before {
content: "#dev:~$ ";
color: white;
}
.load {
margin: 0 auto;
min-height: 100%;
width: 100%;
background: black;
}
.term {
font-family: monospace;
color: #fff;
opacity: 0.8;
font-size: 2em;
overflow-y: auto;
overflow-x: hidden;
padding-top: 10px;
padding-left: 20px;
}
.term:after {
content: "_";
opacity: 1;
animation: cursor 1s infinite;
}
#keyframes cursor {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="load">
<pre class="term"></pre>
</div>

How can I create a CSS animation in JavaScript?

How can I create the CSS animation below in JavaScript? I've looked all over Google, and tried multiple times to create this but I couldn't figure out how to do this.
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 100;
}
}
To run this, I know I can use what is shown below, but I don't know how to create this animation. Can anyone help?
element.style.animation = "fadeIn 5s linear";

You can use javascript with transition to achieve it
// start frame
const start = {
opacity: 0
};
// end frame
const end = {
opacity: 1
};
const element = document.querySelector('span');
Object.assign(element.style, start);
element.style.transition = 'all 5s linear';
requestAnimationFrame(() => {
Object.assign(element.style, end);
});
<span>Lorem Ipsum</span>

What do you mean exactly with "Create in Javascript"? Without using CSS?
If so, you can use a simple interval to update the opacity of the element until it reached 0 or 100. Simple example:
let opacity = 0;
const fadeEl = document.getElementById("fadeInElementIdWithOpacity0");
const fadeInInterval = setInterval(() => {
if (opacity < 1) {
opacity = opacity + 0.1
fadeEl.style.opacity = opacity;
} else {
clearInterval(fadeInInterval);
}
}, 200);

You can first define this function with whatever amount of intervals that you want and then call it with any querySelector
function fadeIn(x) {
var fade = document.querySelector(x);
var opacity = 0;
var intervalID = setInterval(function() {
if (opacity < 1) {
opacity = opacity + 0.1
fade.style.opacity = opacity;
} else {
clearInterval(intervalID);
}
}, 200);
}
havnig this function in console and running fadeIn(".-logo") will fade in the stackoverflow's logo

Javascript only add a class to an element on an interval after it's come into viewport

I have a series of images I want to transition from 0 opacity to 1 opacity when they come into the view port. I have the viewport check part done and the adding classes, however I would like them to be on an interval, so once the first 3 images come into the view port they appear 1, 2, 3 every .5seconds or so. Instead of all 3 at the same time.
here's a JS fiddle of how it works currently
reveal();
function reveal() {
var reveal = document.querySelectorAll(".reveal");
window.onscroll = function() {
for(var i = 0; i < reveal.length; i++) {
if(checkVisible(reveal[i]) === true) {
reveal[i].classList.add("fade");
}
}
}
};
function checkVisible(elm) {
var rect = elm.getBoundingClientRect();
var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
return !(rect.bottom < 0 || rect.top - viewHeight >= -200);
}
https://jsfiddle.net/u04sy7jb/

I've modified your code to add a transition-delay of an additional .5 seconds for each element after the first one, in each "group" that is revealed as you scroll. I left comments in the JavaScript so you can understand the changes.
Let me know if you have any questions!
Live demo:
reveal();
function reveal() {
var reveal = document.querySelectorAll(".reveal");
window.onscroll = function() {
// start a new count each time user scrolls
count = 0;
for (var i = 0; i < reveal.length; i++) {
// also check here if the element has already been faded in
if (checkVisible(reveal[i]) && !reveal[i].classList.contains("fade")) {
// add .5 seconds to the transition for each
// additional element currently being revealed
reveal[i].style.transitionDelay = count * 500 + "ms";
reveal[i].classList.add("fade");
// increment count
count++;
}
}
}
};
function checkVisible(elm) {
var rect = elm.getBoundingClientRect();
var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
return !(rect.bottom < 0 || rect.top - viewHeight >= -200);
}
.container {
width: 100%;
height: 1200px;
background-color: orange;
}
.reveal {
display: inline-block;
width: 32%;
margin: 0 auto;
height: 400px;
background-color: pink;
border: 1px solid black;
opacity: 0;
}
.fade {
opacity: 1;
transition: 1s;
}
<div class="container">
<div class="reveal"></div>
<div class="reveal"></div>
<div class="reveal"></div>
<div class="reveal"></div>
<div class="reveal"></div>
<div class="reveal"></div>
<div class="reveal"></div>
<div class="reveal"></div>
<div class="reveal"></div>
</div>

You could be able to stick your reveal[i].classList.add("fade"); inside of a setTimeout that executes as a function of your ith element so they show up how you're describing. Here is an example of adding short function to add the class and using it in a setTimeout to make this happen, although you could change it up to meet any additional needs.
function reveal() {
var reveal = document.querySelectorAll(".reveal");
window.onscroll = function() {
for(var i = 0; i < reveal.length; i++) {
if(checkVisible(reveal[i]) === true) {
addMyFadeClass(reveal[i], i)
}
}
}
};
function addMyFadeClass(element, i) {
setTimeout(function() {
element.classList.add("fade");
}, i * 500)
}

You can also use :nth-child CSS selectors without the need to change the JS:
.reveal:nth-child(3n+1).fade {
opacity: 1;
transition: 1s;
}
.reveal:nth-child(3n+2).fade {
opacity: 1;
transition: 1.5s;
}
.reveal:nth-child(3n).fade {
opacity: 1;
transition: 2s;
}
JSFiddle: https://jsfiddle.net/u04sy7jb/8/

CSS/JS: Change opacity on swipe

I want to change the opacity of an element while swiping on it.
I would like to achieve an animation similar to the one in the snippet, that is applied gradually depending on how much my finger/cursor has dragged the element while swiping.
EDIT: The animation is the same as clearing a notification in Android
My first idea has been to handle the drag event and change the opacity depending on the position of the element and the width of the screen. Is this a good solution? Is there a better one, maybe CSS only?
I'm using ionic (my element is a ion-item), so anything related to ionic/angular1 could be good too.
div.animated {
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 31px;
animation: right 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
.back {
width: 100px;
height: 100px;
border: 1px solid blue;
position: fixed;
top: 30px;
left: 50px;
}
#keyframes right {
0% {
left: 0px;
opacity: 0.1;
}
50% { opacity: 1;}
100% {left: 100px;opacity:0.1}
}
The blue frame is the screen and the red square is the dragged element
<div class="animated"></div>
<div class="back"></div>

The very nice people over at google chrome devs run a show call SuperCharged the idea behind the show is to show you quick and simple ways to make web apps effects.
They did one episode (which is about an hour long) about swipeable cards, they did a quick 10-minute episode just to give you the basic idea.
To answer your question javascript is the only way to make it respond, CSS doesn't respond to user input or action.
Also, it is best to use transform, as opposed to left, when moving things across the screen. They explain the reasons why in great detail during the show but the quick reason is transform can use the GPU.
Anyway here is a live demo of the code they made in the episode, give it a glance and see if it's what you're looking for. I'd recommending watching their videos anyway, you can learn a lot (I certainly did).
/**
Copyright 2016 Google Inc. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License");
*/
'use strict';
class Cards {
constructor() {
this.cards = Array.from(document.querySelectorAll('.card'));
this.onStart = this.onStart.bind(this);
this.onMove = this.onMove.bind(this);
this.onEnd = this.onEnd.bind(this);
this.update = this.update.bind(this);
this.targetBCR = null;
this.target = null;
this.startX = 0;
this.currentX = 0;
this.screenX = 0;
this.targetX = 0;
this.draggingCard = false;
this.addEventListeners();
requestAnimationFrame(this.update);
}
addEventListeners() {
document.addEventListener('touchstart', this.onStart);
document.addEventListener('touchmove', this.onMove);
document.addEventListener('touchend', this.onEnd);
document.addEventListener('mousedown', this.onStart);
document.addEventListener('mousemove', this.onMove);
document.addEventListener('mouseup', this.onEnd);
}
onStart(evt) {
if (this.target)
return;
if (!evt.target.classList.contains('card'))
return;
this.target = evt.target;
this.targetBCR = this.target.getBoundingClientRect();
this.startX = evt.pageX || evt.touches[0].pageX;
this.currentX = this.startX;
this.draggingCard = true;
this.target.style.willChange = 'transform';
evt.preventDefault();
}
onMove(evt) {
if (!this.target)
return;
this.currentX = evt.pageX || evt.touches[0].pageX;
}
onEnd(evt) {
if (!this.target)
return;
this.targetX = 0;
let screenX = this.currentX - this.startX;
if (Math.abs(screenX) > this.targetBCR.width * 0.35) {
this.targetX = (screenX > 0) ? this.targetBCR.width : -this.targetBCR.width;
}
this.draggingCard = false;
}
update() {
requestAnimationFrame(this.update);
if (!this.target)
return;
if (this.draggingCard) {
this.screenX = this.currentX - this.startX;
} else {
this.screenX += (this.targetX - this.screenX) / 4;
}
const normalizedDragDistance =
(Math.abs(this.screenX) / this.targetBCR.width);
const opacity = 1 - Math.pow(normalizedDragDistance, 3);
this.target.style.transform = `translateX(${this.screenX}px)`;
this.target.style.opacity = opacity;
// User has finished dragging.
if (this.draggingCard)
return;
const isNearlyAtStart = (Math.abs(this.screenX) < 0.1);
const isNearlyInvisible = (opacity < 0.01);
// If the card is nearly gone.
if (isNearlyInvisible) {
// Bail if there's no target or it's not attached to a parent anymore.
if (!this.target || !this.target.parentNode)
return;
this.target.parentNode.removeChild(this.target);
const targetIndex = this.cards.indexOf(this.target);
this.cards.splice(targetIndex, 1);
// Slide all the other cards.
this.animateOtherCardsIntoPosition(targetIndex);
} else if (isNearlyAtStart) {
this.resetTarget();
}
}
animateOtherCardsIntoPosition(startIndex) {
// If removed card was the last one, there is nothing to animate. Remove target.
if (startIndex === this.cards.length) {
this.resetTarget();
return;
}
const frames = [{
transform: `translateY(${this.targetBCR.height + 20}px)`
}, {
transform: 'none'
}];
const options = {
easing: 'cubic-bezier(0,0,0.31,1)',
duration: 150
};
const onAnimationComplete = () => this.resetTarget();
for (let i = startIndex; i < this.cards.length; i++) {
const card = this.cards[i];
// Move the card down then slide it up.
card
.animate(frames, options)
.addEventListener('finish', onAnimationComplete);
}
}
resetTarget() {
if (!this.target)
return;
this.target.style.willChange = 'initial';
this.target.style.transform = 'none';
this.target = null;
}
}
window.addEventListener('load', () => new Cards());
/**
Copyright 2016 Google Inc. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License");
*/
html,
body {
margin: 0;
padding: 0;
background: #FAFAFA;
font-family: Arial;
font-size: 30px;
color: #333;
}
* {
box-sizing: border-box;
}
.card-container {
width: 100%;
max-width: 450px;
padding: 16px;
margin: 0 auto;
}
.card {
background: #FFF;
border-radius: 3px;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.3);
margin: 20px 0;
height: 120px;
display: flex;
align-items: center;
justify-content: space-around;
cursor: pointer;
}
<!--
https://github.com/GoogleChrome/ui-element-samples/tree/master/swipeable-cards
https://www.youtube.com/watch?v=rBSY7BOYRo4
/**
*
* Copyright 2016 Google Inc. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-->
<div class="card-container">
<div class="card">Das Surma</div>
<div class="card">Aerotwist</div>
<div class="card">Kinlanimus Maximus</div>
<div class="card">Addyoooooooooo</div>
<div class="card">Gaunty McGaunty Gaunt</div>
<div class="card">Jack Archibungle</div>
<div class="card">Sam "The Dutts" Dutton</div>
</div>

Ansrew's is very useful. In Ionic it is easier to use onDrag and onRelease directives.
<ion-item on-drag="onDrag($event)" on-release="onRelease($event)" />
And use these methods to style the ion-item:
function onDrag (e) {
var element = e.currentTarget.childNodes[0];
var screenW = element.offsetWidth;
var threshold = screenW * 0.16;
var delta = Math.abs(e.gesture.deltaX);
if(delta >= threshold) {
var normalizedDragDistance = (Math.abs(delta) / screenW);
var opacity = 1 - Math.pow(normalizedDragDistance, 0.7);
element.style.opacity = opacity;
} else {
e.currentTarget.childNodes[0].style.opacity = 1;
}
}
function onRelease (e) {
e.currentTarget.childNodes[0].style.opacity = 1;
}

How to make fadeOut effect with pure JavaScript

I'm trying to make fade out effect for a div with pure JavaScript.
This is what I'm currently using:
//Imagine I want to fadeOut an element with id = "target"
function fadeOutEffect()
{
var fadeTarget = document.getElementById("target");
var fadeEffect = setInterval(function() {
if (fadeTarget.style.opacity < 0.1)
{
clearInterval(fadeEffect);
}
else
{
fadeTarget.style.opacity -= 0.1;
}
}, 200);
}
The div should fade out smoothly, but it immediately disappears.
What's wrong? How can I solve it?
jsbin

Initially when there's no opacity set, the value will be an empty string, which will cause your arithmetic to fail. That is, "" < 0.1 == true and your code goes into the clearInterval branch.
You can default it to 1 and it will work.
function fadeOutEffect() {
var fadeTarget = document.getElementById("target");
var fadeEffect = setInterval(function () {
if (!fadeTarget.style.opacity) {
fadeTarget.style.opacity = 1;
}
if (fadeTarget.style.opacity > 0) {
fadeTarget.style.opacity -= 0.1;
} else {
clearInterval(fadeEffect);
}
}, 200);
}
document.getElementById("target").addEventListener('click', fadeOutEffect);
#target {
height: 100px;
background-color: red;
}
<div id="target">Click to fade</div>
An empty string seems like it's treated as a 0 by JavaScript when doing arithmetic and comparisons (even though in CSS it treats that empty string as full opacity)
> '' < 0.1
> true
> '' > 0.1
> false
> '' - 0.1
> -0.1
Simpler Approach
We can now use CSS transitions to make the fade out happen with a lot less code
const target = document.getElementById("target");
target.addEventListener('click', () => target.style.opacity = '0');
// If you want to remove it from the page after the fadeout
target.addEventListener('transitionend', () => target.remove());
#target {
height: 100px;
background-color: red;
transition: opacity 1s;
}
<p>Some text before<p>
<div id="target">Click to fade</div>
<p>Some text after</p>

Just this morning I found this piece of code at http://vanilla-js.com, it's very simple, compact and fast:
var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();
You can change the speed of the fade changing the second parameter in the setTimeOut function.
var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();
#thing {
background: red;
line-height: 40px;
}
<div id="thing">I will fade...</div>

It looks like you can do it another way(I may be wrong).
event.target.style.transition = '0.8s';
event.target.style.opacity = 0;

you can use CSS transition property rather than doing vai timer in javascript. thats more performance oriented compared to what you are doing.
check
http://fvsch.com/code/transition-fade/test5.html#test3

In addition to the accepted answer, we now have WAAPI which basically adds animation API to JavaScript.
For example,
/**
* #returns {Object}
*/
function defaultFadeConfig() {
return {
easing: 'linear',
iterations: 1,
direction: 'normal',
fill: 'forwards',
delay: 0,
endDelay: 0
}
}
/**
* #param {HTMLElement} el
* #param {number} durationInMs
* #param {Object} config
* #returns {Promise}
*/
async function fadeOut(el, durationInMs, config = defaultFadeConfig()) {
return new Promise((resolve, reject) => {
const animation = el.animate([
{ opacity: '1' },
{ opacity: '0', offset: 0.5 },
{ opacity: '0', offset: 1 }
], {duration: durationInMs, ...config});
animation.onfinish = () => resolve();
})
}
/**
* #param {HTMLElement} el
* #param {number} durationInMs
* #param {Object} config
* #returns {Promise}
*/
async function fadeIn(el, durationInMs, config = defaultFadeConfig()) {
return new Promise((resolve) => {
const animation = el.animate([
{ opacity: '0' },
{ opacity: '0.5', offset: 0.5 },
{ opacity: '1', offset: 1 }
], {duration: durationInMs, ...config});
animation.onfinish = () => resolve();
});
}
window.addEventListener('load', async ()=> {
const el = document.getElementById('el1');
for(const ipsum of "Neque porro quisquam est qui dolorem ipsum quia dolor \uD83D\uDE00".split(' ')) {
await fadeOut(el, 1000);
el.innerText = ipsum;
await fadeIn(el, 2000);
}
});
.text-center {
text-align: center;
}
<h1 id="el1" class="text-center">...</h1>

function fadeOutEffect() {
var fadeTarget = document.getElementById("target");
var fadeEffect = setInterval(function () {
if (!fadeTarget.style.opacity) {
fadeTarget.style.opacity = 1;
}
if (fadeTarget.style.opacity > 0) {
fadeTarget.style.opacity -= 0.1;
} else {
clearInterval(fadeEffect);
}
}, 200);
}
document.getElementById("target").addEventListener('click', fadeOutEffect);
#target {
height: 100px;
background-color: red;
}
<div id="target">Click to fade</div>

my solution
function fadeOut(selector, timeInterval, callback = null) {
var fadeTarget = document.querySelector(selector);
let time = timeInterval / 1000;
fadeTarget.style.transition = time + 's';
fadeTarget.style.opacity = 0;
var fadeEffect = setInterval(function() {
if (fadeTarget.style.opacity <= 0)
{
clearInterval(fadeEffect);
if (typeof (callback) === 'function') {
callback();
}
}
}, timeInterval);
}

While most of the solutions in this and other SO threads work, here are my two cents. If you want to rely only on pure JS ONLY then this should do the trick:
function fadeOutEle(el) {
el.style.opacity = 1;
(function fade() {
if ((el.style.opacity -= .009) < 0) {
el.style.display = "none";
} else {
requestAnimationFrame(fade);
}
})();
};
The Key here is the el.style.opacity -= .009 which give a cool fade out effect. Keep it below 1/2 a second (0.009 in this case) so that the effect is visible before the element hides.