How to create animation in html css and js?

How to create animation in html css and js? - javascript

Hey am a new developer and am trying to build a website. The main goal of website is to provide a piece of text to the visitors. Some of my helpers gave me a javascript to copy the text inside a <p></p> element and it gives a custom alert that the text is copied. But I needed a animation/transition that when I click the copy button the custom copy alert should come from left to right.
var buttons = document.getElementsByClassName('copystatus');
for (let button of buttons) {
button.addEventListener('click', function() {
let statusElement = this.closest('.latestatus');
let textToCopy = statusElement.getElementsByClassName('copytxt')[0].innerHTML;
copyTextToClipboard(textToCopy);
addCopyStatusAlert(this.parentNode);
});
}
function copyTextToClipboard(text) {
const copyText = document.createElement('textarea');
copyText.style.position="absolute";
copyText.style.display="none";
copyText.value = text;
document.body.appendChild(copyText);
copyText.select();
document.execCommand('copy');
document.body.removeChild(copyText);
}
function addCopyStatusAlert(element) {
if (!element.getElementsByClassName('status-copy-alert').length) {
let copyAlertElement = document.createElement('span');
copyAlertElement.classList.add('status-copy-alert')
let copyMessage = document.createTextNode('Copied!');
copyAlertElement.appendChild(copyMessage);
element.appendChild(copyAlertElement);
setTimeout(function() {
element.removeChild(copyAlertElement);
}, 700);
}
}
<div class="mainStatus">
<h2 class="statusHeading">Latest English Status</h2>
<div class="allStatus">
<div class="bock">
<div class="latestatus">
<p class="copytxt">Life is good when you have books</p>
<div>
<button class="copystatus btn">Copy</button>
</div>
</div>
<div class="latestatus">
<p class="copytxt">Google is an open source library by Larry Page and Sergey Brin!</p>
<div>
<button class="copystatus btn">Copy</button>
</div>
</div>
</div>
<div class="block">
<div class="latestatus">
<p class="copytxt">Cats are better than dogs.</p>
<div>
<button class="copystatus btn">Copy</button>
</div>
</div>
<div class="latestatus">
<p class="copytxt">Cats are better than dogs.</p>
<div>
<button class="copystatus btn">Copy</button>
</div>
</div>
</div>
</div>
</div>
Custom alert is the <span> created by JavaScript.
Than in advance

As suggested by #A Haworth in comments below is the code snippet that uses css transformation.
I've updated timeout from 700 to 800 to make the span stay little longer.
var buttons = document.getElementsByClassName('copystatus');
for (let button of buttons) {
button.addEventListener('click', function() {
let statusElement = this.closest('.latestatus');
let textToCopy = statusElement.getElementsByClassName('copytxt')[0].innerHTML;
copyTextToClipboard(textToCopy);
addCopyStatusAlert(this.parentNode);
});
}
function copyTextToClipboard(text) {
const copyText = document.createElement('textarea');
copyText.style.position = "absolute";
copyText.style.display = "none";
copyText.value = text;
document.body.appendChild(copyText);
copyText.select();
document.execCommand('copy');
document.body.removeChild(copyText);
}
function addCopyStatusAlert(element) {
if (!element.getElementsByClassName('status-copy-alert').length) {
let copyAlertElement = document.createElement('span');
let copyMessage = document.createTextNode('Copied!');
copyAlertElement.appendChild(copyMessage);
element.appendChild(copyAlertElement);
copyAlertElement.classList.add('status-copy-alert', 'slide-in');
setTimeout(function() {
element.removeChild(copyAlertElement);
}, 800);
}
}
.slide-in {
animation: slide-in 0.25s forwards;
-webkit-animation: slide-in 0.25s forwards;
}
#keyframes slide-in {
100% {
transform: translateX(0%);
}
}
#-webkit-keyframes slide-in {
100% {
-webkit-transform: translateX(0%);
}
}
.status-copy-alert {
position: absolute;
background-color: #18b495;
color: #ffffff;
padding: 10px 10px;
border-radius: 5px;
left: 65px;
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
.status-copy-alert:before {
content: "";
position: absolute;
height: 10px;
width: 10px;
background-color: #18b495;
left: -5px;
transform: rotate(45deg);
top: 39%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet" />
<div class="mainStatus">
<h2 class="statusHeading">Latest English Status</h2>
<div class="allStatus">
<div class="bock">
<div class="latestatus">
<p class="copytxt">Life is good when you have books</p>
<div>
<button class="copystatus btn">Copy</button>
</div>
</div>
<div class="latestatus">
<p class="copytxt">Google is an open source library by Larry Page and Sergey Brin!</p>
<div>
<button class="copystatus btn">Copy</button>
</div>
</div>
</div>
<div class="block">
<div class="latestatus">
<p class="copytxt">Cats are better than dogs.</p>
<div>
<button class="copystatus btn">Copy</button>
</div>
</div>
<div class="latestatus">
<p class="copytxt">Cats are better than dogs.</p>
<div>
<button class="copystatus btn">Copy</button>
</div>
</div>
</div>
</div>
</div>

Related

How to make infinite Scrolling?

I am creating a Slider with horizontal Scrolling effect But I stuck at a point how Can I make the slider scroll infinitely Like in my code you can see After Item 6 it stops Scrolling and I have to scroll backward but I want it like after Item 6, Item 1 will come again Something like this https://durimel.io/nel Here you can see the scrolling is infinite?
So can anyone help in this?
let container = document.querySelector(".container")
let container1 = document.querySelector(".container1")
window.onscroll = ()=>{
container.style.left = `${-window.scrollY}px`
container1.style.right = `${-window.scrollY}px`
}
let currentpos = container.getBoundingClientRect().left
let currentpos1 = container1.getBoundingClientRect().left
let callDisort = () =>{
let newPos = container.getBoundingClientRect().left;
let newPos1 = container1.getBoundingClientRect().left;
let diff = newPos - currentpos;
let speed = diff * 0.50
container.style.transform = `skewX(${speed}deg)`
currentpos = newPos
container1.style.transform = `skewX(${speed}deg)`
currentpos = newPos
requestAnimationFrame(callDisort)
}
console.log(currentpos)
callDisort()
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: arial;
}
html,body{
height:3000px;
overflow-X:hidden;
}
.container{
position:fixed;
display:flex;
justify-content: space-between;
top:30vh;
width: 3000px;
transition:transform 0.15s;
will-change:transform;
border:2px solid green;
}
.container1{
position:fixed;
display:flex;
justify-content: space-evenly;
top:45vh;
width: 3000px;
transition:transform 0.15s;
will-change:transform;
border:2px solid green;
}
.box{
position:relative;
}
.box h2{
font-size:4em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="box one">
<h2>Item 1</h2>
</div>
<div class="box two">
<h2>Item 2</h2>
</div>
<div class="box three">
<h2>Item 3</h2>
</div>
<div class="box four">
<h2>Item 4</h2>
</div>
<div class="box five">
<h2>Item 5</h2>
</div>
<div class="box six">
<h2>Item 6</h2>
</div>
</div>
<div class="container1">
<div class="box one">
<h2>Item 1</h2>
</div>
<div class="box two">
<h2>Item 2</h2>
</div>
<div class="box three">
<h2>Item 3</h2>
</div>
<div class="box four">
<h2>Item 4</h2>
</div>
<div class="box five">
<h2>Item 5</h2>
</div>
<div class="box six">
<h2>Item 6</h2>
</div>
</div>
</body>
</html>

The method the example (https://durimel.io/nel) uses differs and is not really infinite. It is limited to the max values the css properties left and transform: translate3d() support. But its enough for a normal use.
It changes the position of each box as soon as it is out of view depending on the direction and moving it behind the "last" or before the "first" using transform: translate3d() and left: ....
Overall here is version of the method i mentioned. I recommend testing it in on jsfiddle or run the snippet in "Full Page"-View because of the mouse-wheel-scrolling behavior from unscrollable iframe-childs and a scrollable parents can't be prevented.
Update:
Added a simple speed detection routine to allow faster/slower scrolling.
Also fixed the selector for the observer at the end of the js part
const eventHandler = (e) => {
document.querySelectorAll(".boxes-container").forEach(container => {
const cur = +container.dataset.cur || 0;
container.dataset.before = container.dataset.cur;
container.dataset.scrollspeed = (+container.dataset.scrollspeed || 0) +1;
setTimeout(() => {
container.dataset.scrollspeed = +container.dataset.scrollspeed -1;
}, 33 * +container.dataset.scrollspeed);
let moveByPixels = Math.round(e.deltaY / (6 - Math.min(+container.dataset.scrollspeed,5)));
if (container.dataset.direction == "invert") {
moveByPixels *= -1;
}
container.style.left = `${cur + -moveByPixels}px`;
container.dataset.cur = cur + -moveByPixels;
});
};
window.addEventListener("wheel", eventHandler);
window.addEventListener("mousewheel", eventHandler);
const observer = new IntersectionObserver((entries, opts) => {
entries.forEach(entry => {
entry.target.classList.toggle('visible', entry.isIntersecting);
});
document.querySelectorAll(".boxes-container").forEach(container => {
const before = (+container.dataset.before || 0),
current = (+container.dataset.cur || 0),
diff = before - current,
boxes = [...container.querySelectorAll(".box")],
visible = [...container.querySelectorAll(".box.visible")],
first = boxes.indexOf(visible[0]),
last = boxes.indexOf(visible[visible.length - 1]),
adjust = (by) => {
container.dataset.cur = +container.dataset.cur + by;
container.dataset.before = +container.dataset.before + by;
container.style.left = +container.dataset.cur + 'px';
};
if (diff >= 0) {
if (first > 0) { // move the first to the end
const box = boxes[0];
box.parentNode.append(box);
adjust(box.clientWidth);
}
} else {
if (last == 0 || first == 0) { // move the to first
const box = boxes[boxes.length - 1];
box.parentNode.prepend(box);
adjust(-box.clientWidth);
}
}
})
}, { // trigger on any percent value
threshold: new Array(101).fill(0).map((n, i) => +(i / 100).toFixed(2))
});
document.querySelectorAll(".boxes-container .box").forEach(el => observer.observe(el));
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Sans-Serif;
}
.boxes-container {
position: fixed;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
white-space: nowrap;
min-width: -min-content;
}
.v30 {
top: 30vh;
}
.v60 {
top: 60vh;
}
.box {
position: relative;
margin: 0 !important;
padding: 0 50px;
}
.box h2 {
font-size: 5rem;
}
<div class="boxes-container">
<div class="box">
<h2>0</h2>
</div>
<div class="box">
<h2>1</h2>
</div>
<div class="box">
<h2>2</h2>
</div>
<div class="box">
<h2>3</h2>
</div>
<div class="box">
<h2>4</h2>
</div>
<div class="box">
<h2>5</h2>
</div>
<div class="box">
<h2>6</h2>
</div>
</div>
<div class="boxes-container v30" data-direction="invert">
<div class="box">
<h2>A</h2>
</div>
<div class="box">
<h2>B</h2>
</div>
<div class="box">
<h2>C</h2>
</div>
<div class="box">
<h2>D</h2>
</div>
<div class="box">
<h2>E</h2>
</div>
<div class="box">
<h2>F</h2>
</div>
<div class="box">
<h2>G</h2>
</div>
</div>
<div class="boxes-container v60">
<div class="box">
<h2>0</h2>
</div>
<div class="box">
<h2>1</h2>
</div>
<div class="box">
<h2>2</h2>
</div>
<div class="box">
<h2>3</h2>
</div>
<div class="box">
<h2>4</h2>
</div>
<div class="box">
<h2>5</h2>
</div>
<div class="box">
<h2>6</h2>
</div>
</div>

A few comments on this solution.
If the container is set to display:flex; justify-content:space-around; then the space between the items will change as you scroll (the more items, the closer packed they are). Changing to justify-content:flex-start; with a fixed width for each .box delivers the best result.
Adding a debounce fn greatly improved (and simplified) the job. At least, the console logs are underwhelming(!).
If you scroll the scroll wheel very fast, you might hit the end of the carousel before it re-populates. To make that easier to see, change the delay from 50 to 500 (milliseconds).
The debounce is saying, "only plunk more boxes into the container when 50ms has elapsed since the last scroll event. You might prefer a throttle function instead, where it will run at most one re-population every 50ms (or as you set the debounceDelay value).
The HTML,Body height needs to be set to a very large number - in this demo it is now set to 30,000. The .container width should be auto, and it (the .container width) will increase every time new items are plonked into the container.
Most important: the $ and $$ are not jQuery. They are pure vanilla javaScript shorthand for document.querySelector() and document.querySelectorAll()
The demo is best viewed full page (link at top right of demo window).
const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);
let kontainer = $(".container");
const boxes = $$('.box');
const debounceDelay = 50; //change to 100 for better performance
const updateCarousel = debounce(function(e){
console.log(scrollY +' // '+ kontainer.getBoundingClientRect().right)
const currKontainerWidth = kontainer.getBoundingClientRect().right;
if ( currKontainerWidth - scrollY < 300 ){
for (let i=0, j=boxes.length; j > i; i++){
kontainer.appendChild(boxes[i].cloneNode(true));
}
}
}, debounceDelay);
window.addEventListener('scroll', updateCarousel, false);
window.onscroll = () => {
kontainer.style.left = `${-window.scrollY}px`;
}
function debounce(func, wait, immediate) {
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);
};
};
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: arial;
}
html,body{
height:30000px;
overflow-X:hidden;
}
.container{
position:fixed;
display:flex;
justify-content: flex-start;
top:30vh;
width: auto;
transition:transform 0.15s;
will-change:transform;
border:2px solid green;
}
.box{
position:relative;
min-width:250px;
}
.box h2{
font-size:4em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="box one">
<h2>Item 1</h2>
</div>
<div class="box two">
<h2>Item 2</h2>
</div>
<div class="box three">
<h2>Item 3</h2>
</div>
<div class="box four">
<h2>Item 4</h2>
</div>
<div class="box five">
<h2>Item 5</h2>
</div>
<div class="box six">
<h2>Item 6</h2>
</div>
</div>
</body>
</html>
Best viewed "full page" (top right link after clicking Run Code Snippet)

Why javascript is creating it's own elements?

Hey am a new web developer and I am writing a html, css and javascript. I have created a "copy" button to copy the text inside the <p> element and a alert that the text is copied.
buttons.forEach((copystatus) => {
copystatus.addEventListener('click', (e) => {
const copylatest = e.target.closest(".latestatus").querySelector("p").innerText;
const copyText = document.createElement('textarea');
copyText.style.width = "0";
copyText.style.height = "0";
copyText.style.outline = "none";
copyText.style.border = "none";
copyText.value = copylatest;
document.body.appendChild(copyText);
copyText.select();
document.execCommand('copy');
document.body.removeChild(copyText);
copyalert.style.visibility = "visible"
e.target.closest(".latestatus").querySelector("p").appendChild(copyalert);
setTimeout(function() {
copyalert.style.visibility = "hidden"
}, 700);
})
})
.randomStatusCopyAlert {
position: relative;
background-color: #18b495;
color: #ffffff;
padding: 10px 10px;
border-radius: 5px;
z-index: 2;
visibility: hidden;
height: 45px;
float: right;
bottom: 2px;
left: 4%;
}
.randomStatusCopyAlert:before {
content: "";
position: absolute;
height: 10px;
width: 10px;
background-color: #18b495;
left: -5px;
z-index: 1;
transform: rotate(45deg);
top: 39%;
}
<div class="mainStatus">
<h2 class="statusHeading">Latest English Status</h2>
<div class="allStatus">
<div class="block">
<div class="latestatus">
<p>Life is good when you have books</p>
<div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert show">Copied!</span></div>
</div>
<div class="latestatus">
<p>Google is a open source library by Larry Page and Sergey Brin!</p>
<div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
</div>
</div>
<div class="block">
<div class="latestatus">
<p>Cats are better than dogs.</p>
<div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
</div>
<div class="latestatus">
<p>Ferrets are better than rats</p>
<div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
</div>
</div>
</div>
</div>
My main intention is to make visible the respective <span class="randomStatusCopyAlert">Copied!</span> when respective <button class="copystatus btn">Copy</button> is clicked. Although the code is working correctly but the javascript creats itself span and display it.
See I will share some pics so that if I make ". randomStatusCopyAlert" myself visible.
[![See Now the the span is place correctly][1]][1]
Now the span is placed correctly.
When it is done by the above javascript
[![the span change its position and goes into elements when I used html code inspection tool][2]][2]
The span position is changed.
[1]: https://i.stack.imgur.com/aNevS.png
[2]: https://i.stack.imgur.com/b0az4.png

I tried to replicate your code into a simpler structure just for demonstration purpose
Here is the HTML
<div class="statuses-container">
<h2 class="statuses-heading">Latest English Status</h2>
<div class="statuses">
<div class="status">
<p class="status-text">Life is good when you have books</p>
<div class="status-copy-btn-container">
<button class="status-copy-btn btn">Copy</button>
</div>
</div>
<div class="status">
<p class="status-text">Google is an open source library by Larry Page and Sergey Brin!</p>
<div class="status-copy-btn-container">
<button class="status-copy-btn btn">Copy</button>
</div>
</div>
<div class="status">
<p class="status-text">Cats are better than dogs.</p>
<div class="status-copy-btn-container">
<button class="status-copy-btn btn">Copy</button>
</div>
</div>
</div>
</div>
Feel free to change the class names as you wish, I've changed them because I find it easier to read like this. Some of the divs were removed, because I think they were not really necessary in achieving this result.
Please notice that I've removed the span which indicated that the text was copied to clipboard. It is not necessary, because maybe at some point you will decide to change the message, and you will have to change it everywhere. Now, that label saying that the text was copied will be inserted using JS.
Here is the CSS:
status-copy-alert {
position: relative;
background-color: #18b495;
color: #ffffff;
padding: 10px 10px;
border-radius: 5px;
left: 8px;
}
.status-copy-alert:before{
content:"";
position: absolute;
height: 10px;
width: 10px;
background-color: #18b495;
left: -5px;
transform: rotate(45deg);
top: 39%;
}
Some of the properties here were removed as well, because they were not necessary. Since we are adding the span dynamically using the JS, there is no need for the span to be hidden in the beginning.
Here is the JS:
var buttons = document.getElementsByClassName('status-copy-btn');
for (let button of buttons) {
button.addEventListener('click', function() {
let statusElement = this.closest('.status');
let textToCopy = statusElement.getElementsByClassName('status-text')[0].innerHTML;
copyTextToClipboard(textToCopy);
addCopyStatusAlert(this.parentNode);
});
}
function copyTextToClipboard(text) {
const copyText = document.createElement('textarea');
copyText.style.position="absolute";
copyText.style.display="none";
copyText.value = text;
document.body.appendChild(copyText);
copyText.select();
document.execCommand('copy');
document.body.removeChild(copyText);
}
function addCopyStatusAlert(element) {
if (!element.getElementsByClassName('status-copy-alert').length) {
let copyAlertElement = document.createElement('span');
copyAlertElement.classList.add('status-copy-alert')
let copyMessage = document.createTextNode('Copied!');
copyAlertElement.appendChild(copyMessage);
element.appendChild(copyAlertElement);
setTimeout(function() {
element.removeChild(copyAlertElement);
}, 700);
}
}
I've taken all of the buttons and added a click listener on them. When it gets clicked, we take the entire status element and get the p element inside it. We pass the text of the p element to copyTextToClipboard function. Here is only the logic needed for copying the text to clipboard and nothing else.
The addCopyStatusAlert function is used just to append a newly created span as a sibling to the button. And after a short timeout, it gets completely deleted from the DOM.
Here is the link to the pen i've created on CodePen for this. Feel free to experiment with it there.

Add or Remove class on click - Javascript

I am trying to add a class when you click on a box then remove the class when you click the button. But no class os added or removed.
var leftBox = document.getElementsByClassName("left");
var rightBox = document.getElementsByClassName("right");
function expandLeft() {
leftBox.className = leftBox.className + "zero-width";
rightBox.className = rightBox.className + "full-width";
}
function expandRight() {
leftBox.className = leftBox.className + "full-width";
rightBox.className = rightBox.className + "zero-width";
}
function originalLeft(){
leftBox.removeClass(leftBox, "zero-width");
rightBox.removeClass(rightBox, "full-width");
}
function originalRight(){
leftBox.removeClass(rightBox, "full-width");
rightBox.removeClass(leftBox, "zero-width");
}
<div class="row">
<div class="wrapper flex full-width">
<div class="form_wrapper flex full-width">
<div class="left">
<div class="form_wrapper--left" onclick="expandRight()">
<div><button id="shrink" onclick="originalLeft()">click here</button> .
</div>
</div>
</div>
<!-- END OR RIGHT BOX --
<!-- START OR RIGHT BOX -->
<div class="right">
<div class="form_wrapper--right" onclick="expandLeft()">
<div>
<button id="shrink" onclick="originalLeft()">click here</button>
</div>
</div>
</div>
<!--- END of Right Box --->
</div>
</div>
</div>
The effect should be that when you click one box it expands left and you can click a button and it returns. Vice versa for the other side.

You can use .toggleClass() in jQuery.
maybe this link helps:
https://api.jquery.com/toggleclass/

try this:
document.getElementById("test").addEventListener("click", enlarge);
document.getElementById("btn").addEventListener("click", resume);
function enlarge() {
document.getElementById("test").classList.add("enlarge");
}
function resume() {
document.getElementById("test").classList.remove("enlarge");
}
#test {
width: 100px;
height: 100px;
background-color: green;
margin-bottom: 20px;
}
.enlarge {
transform: scaleX(2);
}
<div id="test"></div>
<button id="btn">
Resume
</button>

Typing effect with JavaScript: How to remove cursor once all the text is "typed"

I'm making a personal webpage and I'm using JavaScript to create a typing effect under a header called "My Story". The text types fine, but once it is done typing the cursor remains at the bottom. What do I need to change/add in my code to fix this?
I want the cursor to disappear once the text is type. No error messages are present.
// Displays "My Story" with a typing effect
var _CONTENT = ["When I was 15, I took a Robotics Honors course at my high school. We designed and built robots using VEX robotics kits. To me, the most interesting part was building the drag-and-drop code and uploading it to the robot to control it. This is what inspired me to code. Before long, I was researching software development and decided the best language for me to start with would be Python. That was a year ago, and since then I've worked in HTML, CSS, JavaScript, and Java, and plan to further expand my developer capabilities from this point on."];
var _PART = 0;
var _PART_INDEX = 0;
var _INTERVAL_VAL;
var _ELEMENT = document.querySelector("#text");
var _CURSOR = document.querySelector("#cursor");
function Type() {
var text = _CONTENT[_PART].substring(0, _PART_INDEX + 1);
_ELEMENT.innerHTML = text;
_PART_INDEX++;
if (text === _CONTENT[_PART]) {
_CURSOR.style.display = "none";
clearInterval(_INTERVAL_VAL);
setTimeout(function() {
_INTERVAL_VAL = setInterval(Delete, 50);
}, 1000);
}
}
_INTERVAL_VAL = setInterval(Type, 100);
body {
background: dodgerblue !important;
color: white !important;
}
h3 {
border-left: 6px solid whitesmoke;
background-color: lightslategray;
}
p5 {
text-align: justify;
}
p4 {
text-align: justify;
}
#container {
text-align: center;
}
#text {
display: inline-block;
vertical-align: middle;
color: white;
letter-spacing: 2px;
}
#cursor {
display: inline-block;
vertical-align: middle;
width: 3px;
height: 50px;
background-color: white;
animation: blink .75x step-end infinite;
}
#keyframes blink {
from,
to {
background-color: transparent;
}
50% {
background-color: black;
}
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: whitesmoke;
}
::-webkit-scrollbar-thumb {
background: grey;
}
::-webkit-scrollbar-thumb:hover {
background: dodgerblue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row align-items-start">
<div class="col">
<nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Me</a>
</li>
</ul>
</nav>
<header>
<title>
Robert Smith
</title>
</header>
<body>
<p class="bg-primary text-white">
</div>
<div class="col ml-auto"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col">
<h1>
<b>
<div class = "p-4 mt-5 align-baseline border bg-light text-dark" style = "width:300px" > Robert Smith </div>
</b>
</h1>
<h2 class="display-4 ml-3"> I want to make a difference.
</h2>
<h3>
<div class="ml-3">
My Story
</div>
</h3>
<divT>
<p1>
<div id="container">
<div id="text"></div>
<div id="cursor"></div>
</div>
<span class="border border-dark">
<div class = "ml-3" >
<br>
</div>
</span>
</p1>
<p6>
<div class="ml-3">
I love to code, whether it's building websites like this <br> or turning my ideas into a reality. <br> I hope I can also do the same for yours.
</div>
</p6>
</divT>
<h4>
Contact me
</h4>
<p6>
<ul3>
<li>Email: robertethansmith#yahoo.com</li>
<li>GitHub: roberto257</li>
</ul3>
</p6>
</div>
<div class="col">
<script language="javascript">
//Changes images when clicked
function changeImage() {
if (document.getElementById("imgClickAndChange").src == "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG") {
document.getElementById("imgClickAndChange").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith3.JPG";
} else {
document.getElementById("imgClickAndChange").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG";
}
}
function changeImage2() {
if (document.getElementById("imgClickAndChange2").src == "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG") {
document.getElementById("imgClickAndChange2").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith1.JPG";
} else {
document.getElementById("imgClickAndChange2").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG";
}
}
</script>
<p2>
<img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG" class="img-fluid rounded img-thumbnail" alt="Me" id="imgClickAndChange" onclick="changeImage()" />
<img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG" class="img-fluid rounded img-thumbnail" alt="Me" id="imgClickAndChange2" onclick="changeImage2()" />
</p2>
</div>
<div class="col mt-5">
<p5>
<br> I have been coding for over a year now and am comfortable coding and building applications and developing programs on my own.
<br><b>I am not afraid to tackle <ins>any</ins> challenge a client presents me and will only decline if I
truly feel that I cannot complete the proposed task to the sufficient expectations of the client.</b> <br>
</p5>
<img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/python.png" alt="Python">
<p4>
<br> My current skills include but are not limited to:
<ul2>
<li>Python</li>
<li>Web Development</li>
<li>JavaScript</li>
<li>Java</li>
</ul2>
I am <i> always </i> working to improve my current skills in languages, frameworks, libraries, and APIs and hope to continue to learn new ones. <br>
</p4>
</div>
</div>
<div class="row">
<div class="col">
</div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>

Maybe, try this? I'm adding pseudo-class:after, with content: '|' and removing the class at the end.
(function(){
/* cut the text for demo */
let text = "When I was 15, I took a Robotics Honors course at my high school."
let bubu = document.getElementById('bubu');
for( let i = 0; i < text.length; i++ ){
setTimeout( function(){
bubu.innerText += text.charAt(i);
}, i*100);
}
setTimeout(function(){
document.getElementById('bubu').classList.remove('bubu');
}, (text.length)*100); /* Set removing Timeout, synchronous to the end of typing */
})();
#bubu {
text-align: center;
width: 400px;
font-size: 20px;
}
.bubu:after {content: '|'; color: red;}
<div id="bubu" class="bubu"></div>
P.s. I've used text.split('') - to sort each character into array...
Changed → text.charAt(i); due to comment*

Just like you are inserting text from array, insert the cursor as well after the text/innerHtml. Try running the snippet, is that what you are expecting?
Only change made - _ELEMENT.appendChild(_CURSOR);
// Displays "My Story" with a typing effect
var _CONTENT = ["When I was 15, I took a Robotics Honors course at my high school. We designed and built robots using VEX robotics kits. To me, the most interesting part was building the drag-and-drop code and uploading it to the robot to control it. This is what inspired me to code. Before long, I was researching software development and decided the best language for me to start with would be Python. That was a year ago, and since then I've worked in HTML, CSS, JavaScript, and Java, and plan to further expand my developer capabilities from this point on."];
var _PART = 0;
var _PART_INDEX = 0;
var _INTERVAL_VAL;
var _ELEMENT = document.querySelector("#text");
var _CURSOR = document.querySelector("#cursor");
function Type() {
var text = _CONTENT[_PART].substring(0, _PART_INDEX + 1);
_ELEMENT.innerHTML = text;
_ELEMENT.appendChild(_CURSOR);
_PART_INDEX++;
if (text === _CONTENT[_PART]) {
_CURSOR.style.display = "none";
clearInterval(_INTERVAL_VAL);
setTimeout(function() {
_INTERVAL_VAL = setInterval(Delete, 50);
}, 1000);
}
}
_INTERVAL_VAL = setInterval(Type, 100);
body {
background: dodgerblue !important;
color: white !important;
}
h3 {
border-left: 6px solid whitesmoke;
background-color: lightslategray;
}
p5 {
text-align: justify;
}
p4 {
text-align: justify;
}
#container {
text-align: center;
}
#text {
display: inline-block;
vertical-align: middle;
color: white;
letter-spacing: 2px;
}
#cursor {
display: inline-block;
vertical-align: middle;
width: 3px;
height: 50px;
background-color: white;
animation: blink .75x step-end infinite;
}
#keyframes blink {
from,
to {
background-color: transparent;
}
50% {
background-color: black;
}
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: whitesmoke;
}
::-webkit-scrollbar-thumb {
background: grey;
}
::-webkit-scrollbar-thumb:hover {
background: dodgerblue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row align-items-start">
<div class="col">
<nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Me</a>
</li>
</ul>
</nav>
<header>
<title>
Robert Smith
</title>
</header>
<body>
<p class="bg-primary text-white">
</div>
<div class="col ml-auto"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col">
<h1>
<b>
<div class = "p-4 mt-5 align-baseline border bg-light text-dark" style = "width:300px" > Robert Smith </div>
</b>
</h1>
<h2 class="display-4 ml-3"> I want to make a difference.
</h2>
<h3>
<div class="ml-3">
My Story
</div>
</h3>
<divT>
<p1>
<div id="container">
<div id="text"> </div>
<div id="cursor"></div>
</div>
<span class="border border-dark">
<div class = "ml-3" >
<br>
</div>
</span>
</p1>
<p6>
<div class="ml-3">
I love to code, whether it's building websites like this <br> or turning my ideas into a reality. <br> I hope I can also do the same for yours.
</div>
</p6>
</divT>
<h4>
Contact me
</h4>
<p6>
<ul3>
<li>Email: robertethansmith#yahoo.com</li>
<li>GitHub: roberto257</li>
</ul3>
</p6>
</div>
<div class="col">
<script language="javascript">
//Changes images when clicked
function changeImage() {
if (document.getElementById("imgClickAndChange").src == "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG") {
document.getElementById("imgClickAndChange").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith3.JPG";
} else {
document.getElementById("imgClickAndChange").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG";
}
}
function changeImage2() {
if (document.getElementById("imgClickAndChange2").src == "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG") {
document.getElementById("imgClickAndChange2").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith1.JPG";
} else {
document.getElementById("imgClickAndChange2").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG";
}
}
</script>
<p2>
<img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG" class="img-fluid rounded img-thumbnail" alt="Me" id="imgClickAndChange" onclick="changeImage()" />
<img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG" class="img-fluid rounded img-thumbnail" alt="Me" id="imgClickAndChange2" onclick="changeImage2()" />
</p2>
</div>
<div class="col mt-5">
<p5>
<br> I have been coding for over a year now and am comfortable coding and building applications and developing programs on my own.
<br><b>I am not afraid to tackle <ins>any</ins> challenge a client presents me and will only decline if I
truly feel that I cannot complete the proposed task to the sufficient expectations of the client.</b> <br>
</p5>
<img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/python.png" alt="Python">
<p4>
<br> My current skills include but are not limited to:
<ul2>
<li>Python</li>
<li>Web Development</li>
<li>JavaScript</li>
<li>Java</li>
</ul2>
I am <i> always </i> working to improve my current skills in languages, frameworks, libraries, and APIs and hope to continue to learn new ones. <br>
</p4>
</div>
</div>
<div class="row">
<div class="col">
</div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>

Unless I'm misunderstanding what you are asking for, it looks like you are just missing a Delete function to get triggered, once the typing is done. Something like this should do the trick:
function Delete() {
_CURSOR.style.display = "none";
}

I like OPTIMUS PRIME idea(+1), but it also should better works with setInterval
I have some remarks:
1 - using textContent is more apopriate (if you don't use html tags)
2 - using arrow function to impact local vars
3 - you don't need CSS to set a Blinking Cursor
So I made this (It use html tags)
It works also if JS is disabled (no animation, but the text is shown)
Text_Typed('bubu');
function Text_Typed( eID, delay = 100)
{
let
element = document.getElementById(eID),
txt = element.innerHTML,
Text_Sz = txt.length,
sItv_id = null,
Text_html = '',
loop_i = -1,
Cursor_i = 1;
element.textContent = '▮'; // or '|';
sItv_id = setInterval(_=>{
loop_i++;
if (loop_i < Text_Sz)
{
let n, inC = txt.charAt(loop_i);
switch (inC) {
case '<':
n = txt.indexOf('>',loop_i);
if (n>0)
{
inC = txt.substring(loop_i,++n);
loop_i = --n;
}
break;
case '&':
n = txt.indexOf(';',loop_i);
if (n>0)
{
inC = txt.substring(loop_i,++n);
loop_i = --n;
}
break;
}
Cursor_i = (Cursor_i+1) % 2;
Text_html += inC;
element.innerHTML = Text_html + ((Cursor_i)?'▮':'▯'); // or '|'   ▉
}
else {
element.innerHTML = Text_html;
clearInterval(sItv_id);
}
}, delay);
}
#bubu {
text-align : center;
width : 400px;
font-size : 20px;
}
<div id="bubu" >
<p>When I was 15, I took a Robotics Honors course at my high school.</p>
<p>We designed and built robots using <span style="color:crimson">VEX robotics kits</span>.</p>
<p>To me, the most interesting part was building the drag-and-drop code and uploading it to the robot to control it.</p>
<p>This is what inspired me to code.</p>
<p>Before long, I was researching software development and decided the best language for me to start with would be Python.</p>
<p>That was a year ago, and since then I've worked in HTML, CSS, JavaScript, and Java, and plan to further expand my developer
<b>capabilities</b> from this point on.</p>
</div>

How to get animate between elements moving using javascript?

When click CLICK HERE div id photo will set css to top: 300px; left: -400px; transform: rotate(-60deg) how can i add animate into this process ?
<script type="text/javascript">
function swipeLike() {
document.getElementById("photo").style.top = "300px";
document.getElementById("photo").style.left = "-400px";
document.getElementById("photo").style.transform = "rotate(-60deg)";
}
</script>
<br><br><br><br><br><br>
<div onclick="swipeLike()">
CLICK HERE
</div>
<div class="content">
<div id="photo">
MOVING
</div>
</div>

You can simply add transition:
<script type="text/javascript">
function swipeLike() {
var photo = document.getElementById("photo");
photo.style.top = "300px";
photo.style.transition = "0.4s";
photo.style.left = "-400px";
photo.style.transform = "rotate(-60deg)";
}
</script>
<br><br><br><br><br><br>
<div onclick="swipeLike()">
CLICK HERE
</div>
<div class="content">
<div id="photo">
MOVING
</div>
</div>

It depends on which type of animation you want. You can use css3 transition property to animate things.
W3Schools Transition property

Easiest is to define a class with the elements that need to be animated. See below, hope this helps.
function swipeLike() {
document.getElementById("photo").classList.add("anim");
}
#photo {
transition: all 3s;
}
.anim {
top: 300px;
left: -400px;
transform: rotate(-60deg);
}
<div onclick="swipeLike()">
CLICK HERE
</div>
<div class="content">
<div id="photo">
MOVING
</div>
</div>

<script type="text/javascript">
function swipeLike() {
document.getElementById("photo").style.top = "300px";
document.getElementById("photo").style.left = "-400px";
document.getElementById("photo").style.transform = "rotate(-60deg)";
}
</script>
<br><br><br><br><br><br>
<div onclick="swipeLike()">
CLICK HERE
</div>
<div class="content">
<div style="transition:all 1s linear;" id="photo">
MOVING
</div>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

How to create animation in html css and js? - javascript

Related

How to make infinite Scrolling?

Why javascript is creating it's own elements?

Add or Remove class on click - Javascript

Typing effect with JavaScript: How to remove cursor once all the text is "typed"

How to get animate between elements moving using javascript?

Categories

Resources