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>
Related
I want to add a timer which decrease Automatically (like 10 seconds, 9 seconds... till 0 seconds) but the progress bar will increase. And I am new to javascript, and the below code also copied from another site , so please help me in adding timer inside the progress bar
Till now I did this code
I want to make like this
Demo
<div class="progress"></div>
<style>
.progress-bar {
height: 20px;
background: #1da1f2;
box-shadow: 2px 14px 15px -7px rgba(30, 166, 250, 0.36);
border-radius: 50px;
transition: all 0.5s;
}
.progress {
width: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: start;
background: #e6e9ff;
border-radius: 20px;
box-shadow: 0px 10px 50px #abb7e9;
}
</style>
<script>
/*
* (class)Progress<nowValue, minValue, maxValue>
*/
//helper function-> return <DOMelement>
function elt(type, prop, ...childrens) {
let elem = document.createElement(type);
if (prop) Object.assign(elem, prop);
for (let child of childrens) {
if (typeof child == "string") elem.appendChild(document.createTextNode(child));
else elem.appendChild(elem);
}
return elem;
}
//Progress class
class Progress {
constructor(now, min, max, options) {
this.dom = elt("div", {
className: "progress-bar"
});
this.min = min;
this.max = max;
this.intervalCode = 0;
this.now = now;
this.syncState();
if(options.parent){
document.querySelector(options.parent).appendChild(this.dom);
}
else document.body.appendChild(this.dom)
}
syncState() {
this.dom.style.width = this.now + "%";
}
startTo(step, time) {
if (this.intervalCode !== 0) return;
this.intervalCode = setInterval(() => {
console.log("sss")
if (this.now + step > this.max) {
this.now = this.max;
this.syncState();
clearInterval(this.interval);
this.intervalCode = 0;
return;
}
this.now += step;
this.syncState()
}, time)
}
end() {
this.now = this.max;
clearInterval(this.intervalCode);
this.intervalCode = 0;
this.syncState();
}
}
let pb = new Progress(15, 0, 100, {parent : ".progress"});
//arg1 -> step length
//arg2 -> time(ms)
pb.startTo(5, 500);
//end to progress after 5s
setTimeout( () => {
pb.end()
}, 10000)
</script>
I think the core problem is that the code you copied is overly complicated especially for beginners. What I would recommend is to start from what you know and build up.
Here is the functionality you want written using only core principles of JavaScript and CSS.
let initialTime = 10; //All time in seconds
let timeLeft = initialTime;
let interval;
let progressBarTextElement = document.getElementById('progress-bar-text');
let progressBarElement = document.getElementById('progress-bar');
function render() {
let progressPercentage = (1 - (timeLeft / initialTime) ) * 100;
progressBarElement.style.width = progressPercentage + '%';
progressBarTextElement.innerHTML = timeLeft + 's';
}
function tick() {
timeLeft = timeLeft - 1;
if(timeLeft <= 0) {
clearInterval(interval); //Stops interval
}
render(); //Updates html
}
function startProgressBar() {
interval = setInterval(tick, 1000); //Will call tick every second
render();
}
startProgressBar();
html {font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;}
.progress-bar-continer {
height: 80px;
width: 100%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
background-color: #406086;
}
.progress-bar {
background-color: #1b3e80;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 0%;
transition: width 1s; /* Makes progressBar smooth */
transition-timing-function: linear; /* Try to remove this line for more tick tock feel */
}
.progress-bar-text {
color: white;
font-size: 24px;
font-weight: 700;
position: relative;
z-index: 1;
}
<div class="progress-bar-continer">
<div class="progress-bar" id="progress-bar"></div>
<div class="progress-bar-text" id="progress-bar-text"></div>
<div>
Try to understand the code best you can and you will have no problems adding any features you want on top of it. All the fancy stuff will come later with experience.
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/
I have created functions to type and erase text animation effect in JS. But, I'm stuck as to how to call the erase function only after the type function is fully executed? I've tried setTimeout which didn't seem to work. Help appreciated!
var clength = 0;var caption = 'MyName';var x = 1;var y = x/2;
$(document).ready(function() {
setInterval('cursorAnimation()', 600);
ding = $('#caption');
type();
});
function type() {
ding.html(caption.substr(0, clength++));
if (clength < caption.length + 1) {
setTimeout('type()', 180);
} else {
clength = 0;
caption = '';
}
}
function erase() {
ding.html(caption.substr(0, clength--));
if (clength >= 0) {
setTimeout('erase()', 50);
} else {
clength = 0;
caption = '';
}
}
function cursorAnimation() {
$('#cursor').animate({
opacity: 0
}, 'fast', 'swing').animate({
opacity: 1
}, 'fast', 'swing');
}
Well, there are different ways to do this.
Firstly I must say the way you use setTimeout is not the best. By putting the string expression into it you make the JS engine to parse the expression through eval. A slow and simply dangerous thing that must be evaded as much as possible; except it's really needed.
In this case you can simply pass a function as a parameter of setTimeout and it will work as well. So, setTimeout(type, 180).
Now as I understand your code both type() and erase() are recursive functions that either call themselves or finish their execution after reaching the end. "Finish their execution after reaching the end" is exactly the branch of code you need so you just put there a call of erase.
} else {
clength = 0;
caption = '';
erase();
}
Now maybe you want to save the possibility for your type() function to launch without the mandatory call of erase() in the end. In your case I would encapsulate it in a closure, like this:
function type(callback) {
return function(){
ding.html(caption.substr(0, clength++));
if (clength < caption.length + 1) {
setTimeout('type()', 180);
} else {
clength = 0;
caption = '';
if (callback != undefined) callback();
}
}
}
In this case your type function becomes a first class function, a function that generates other functions. When you call it with type(erase) it writes callback as erase and returns a function whose variable scope contains callback so it can call it as it was its own local variable.
If you call type() it creates a function with callback being undefined so nothing happens in this case.
EDIT:
function type(callback) {
return function(){
ding.html(caption.substr(0, clength++));
if (clength < caption.length + 1) {
setTimeout(type(callback), 180);
} else {
if (callback != undefined) callback();
}
}
}
Here's a CSS-only possible solution:
.caption {
display: inline-block;
box-sizing: content-box;
white-space: nowrap;
overflow: hidden;
font-family: monospace;
border-right: 1px solid;
animation-name: typing, cursor;
animation-duration: 5s, 1s;
animation-iteration-count: infinite;
animation-timing-function: steps(23, end), linear;
}
#keyframes typing {
0% {
width: 0;
}
20% {
width: 0;
}
60% {
width: 165px;
}
80% {
width: 165px;
}
100% {
width: 0;
}
}
#keyframes cursor {
from {
border-right: 1px solid;
}
to {
border-right: 1px transparent;
}
}
<span class="caption">My name is Hritik Gupta</span>
I want to change the text after the animation is done but I have a hard time to find something that works. I have tried timers but that dont realy work beacuse the animation time is different every time (will add that later but now it is same every time).
$(document).ready(function () {
$("button").click(function () {
var r = Math.floor(Math.random() * 2) + 1
var moveTime;
if (r == '1') {
moveTime = 5000;
} else if (r == '2') {
moveTime = 4900;
}
var slowDown = 1000;
var $div = $('div').css('left', 0);
while (moveTime > 0) {
slowDown--;
$div.animate({
left: moveTime + "px"
}, 3000);
if (slowDown > 0) {
slowDown--;
moveTime = 0;
}
slowDown--;
moveTime--;
}
document.getElementById("timer").innerHTML = r;
});
});
div {
position: absolute;
float: left;
margin: 200px 0 0 -8400px;
width: 10000px;
height: 125px;
background: repeating-linear-gradient(90deg, #DF0000, #DF0000 125px, #000000 125px, #000000 250px)
}
h1 {
text-align: center;
margin: 130px 0 0 0;
font-size: 90px;
}
body {
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Start Animation</button>
<div></div>
<h1 id="timer">|</h1>
</body>
You can use the promise() method to map your animations to an array of promises, then use Promise.all() to do something when all have resolved:
var promisesArr = [];
while (moveTime > 0) {
// ...
promisesArr.push($div.animate({
left: moveTime + "px"
}, 3000).promise());
// ...
}
Promise.all(promisesArr).then(function() {
var r = Math.floor(Math.random() * 2) + 1
document.getElementById("timer").innerHTML = r;
});
See Fiddle
see official api for animate
you should be able to just call $(elem).animate().animate() and the second animate will only start when the first ends...
additionally, animate function takes a 'easing' parameter, something like "easein" will probably do what you want without needing to keep track of time at all.
I have below my JAVASCRIPT code which change between 2 words every 2.5 seconds and I want to add fading to the transition between the words in the array it uses. I know that I need to use Jquery but how do I implement it in this recursive function? Any ideas?
var text = ["first", "second"];
var counter = 0;
var elem = document.getElementById("changeText");
setInterval(change, 2500);
function change() {
elem.innerHTML = text[counter];
counter++;
if (counter >= text.length) {
counter = 0;
}
}
.banner-right h2 {
font-size: 50px;
font-weight: 300;
color: #ffffff;
margin: 15px 0 45px 0;
}
<h2 id="changeText">Data Scientist</h2>
Since you are using Native JavaScript you could use CSS transitions and classList.
Something like:
CSS
#changeText {
opacity: 1;
transition: opacity 0.5s;
}
.hide {
opacity: 0 !important;
}
JavaScript
function change() {
elem.classList.add('hide');
setTimeout(function () {
elem.innerHTML = text[counter];
elem.classList.remove('hide');
counter++;
if (counter >= text.length) {
counter = 0;
}
}, 500);
}
Demo:
var text = ["first", "second"];
var counter = 0;
var elem = document.getElementById("changeText");
setInterval(change, 2500);
function change() {
elem.classList.add('hide');
setTimeout(function () {
elem.innerHTML = text[counter];
elem.classList.remove('hide');
counter++;
if (counter >= text.length) {
counter = 0;
}
}, 500);
}
#changeText {
opacity: 1;
transition: opacity 0.5s;
}
.hide {
opacity: 0 !important;
}
<h2 id="changeText">Data Scientist</h2>
Note: I used !important in the CSS because opacity: 1; when applied with a ID selector has priority over a class selector.
Replace this part:
elem.innerHTML = text[counter];
With:
$(elem)
.fadeOut(400)
.html(text[counter])
.delay(400)
.fadeIn(400);