JavaScript how to create this text background animation [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed last month.
This post was edited and submitted for review last month and failed to reopen the post:
Original close reason(s) were not resolved
Improve this question
While wandering around the web, I found this animation and wondered how this text background animation can be created.
Question:
Im trying to achieve the same animation on my portfolio website, how can I animate this text background animation on my own project?

Review: I took a look at the website that you have linked and they have multiple text rows that fill out the whole screen, that they continuously manipulate.
How to achieve an animation: Select all the text rows with JavaScript and precisely modify the DOM using innerHTML. You need to receive random characters and precisely modify the DOM in order to achieve a planned out animation.
Animation: Set an interval to call your DOM modification function and add some logic to craft a more complex animation.
Example: Here is a simple example that I have created, the animation consists of 1 row and we shift the content to the left and right.
External Playground: https://jsfiddle.net/cjkaqstg/49/
CSS:
text{
font-size:16px;
white-space:pre;
}
HTML:
<text id="text-0"></text>
JS:
const text_element = document.getElementById("text-0");
const text_length = 30;
var shift_left = true;
function receiveRandomCharacter()
{
// Receive a random character
const characters ="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
return characters[Math.floor(Math.random() * characters.length-1) +1];;
}
function modifyText(new_content)
{
// Function to modify the text content
text_element.innerHTML = new_content;
}
function textAnimation()
{
// Add some logic, in this case we will shift the characters to the left and right
var row_content ="";
if(shift_left)
{
for(var x=0;x<text_length;x++)
{
if(x % 2==0)
{
// Even Number, add SPACE as a character
row_content += " ";
}
else
{
// Un-even number, add a random character
row_content += receiveRandomCharacter();
}
}
modifyText(row_content);
shift_left = false;
}
else
{
for(var x=0;x<text_length;x++)
{
if(x % 2 ==0)
{
// Even Number, add a random character
row_content += receiveRandomCharacter();
}
else
{
// Un-even number, add SPACE as a character
row_content += " ";
}
}
modifyText(row_content);
shift_left = true;
}
console.log(row_content);
}
const interval = setInterval(function() {
// Call a function every X milliseconds
textAnimation();
}, 300);

Related

How to make a CSS transform run from its current position [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I’m making a game using HTML, CSS, and JavaScript. When I click the left arrow, the red and yellow box jerks to the original position and runs. I want it to run at the position it is at currently at. Same goes for double tapping the arrows.
I’ve attached a Repl.it. Here it is: https://repl.it/#ritzcrackerz201/cake
Below I have edited your script, Your main issue was you were using two different values for your left and right movement... Also i don't know if this is what you wanted but I made edits to your 'jump' section of code.
Javascript
<script>
let xArrowMovement = 0;
let jumpboxupmovementy = 0;
// let player = null;
// let playerPos = null;
/*setTimeout(function(){
getElements();
}, 100);
function getElements() {
console.log('Entered getElements');
player = document.getElementById("master-cube");
console.log(player);
playerPos = player.style.transform;
console.log(playerPos);
} */
function moveright() {
console.log('Entered moveright');
xArrowMovement += 80;
document.getElementById("master-cube").style.transform = `translate(${xArrowMovement}%, ${jumpboxupmovementy}%)`;
}
function moveleft() {
console.log('Entered moveleft');
xArrowMovement -= 80;
document.getElementById("master-cube").style.transform = `translate(${xArrowMovement}%, ${jumpboxupmovementy}%)`;
}
function movejump() {
console.log('Entered movejump: ' + xArrowMovement + ' ' + jumpboxupmovementy);
jumpboxupmovementy += 80;
document.getElementById("master-cube").style.transform = `translate(${xArrowMovement}%, ${-jumpboxupmovementy}%)`;
//wait for this animation to complete
setTimeout(function(){
jumpboxupmovementy -= 80;
document.getElementById("master-cube").style.transform = `translate(${xArrowMovement}%, ${jumpboxupmovementy}%)`;
}, 500);
}
</script>
HTML
<div id="master-cube"></div>
<img src="arrows/leftarrow.png" alt="Left Arrow" height="80vh" width="80vw" onclick="moveleft()" class="arrowcontrols">
<img src="arrows/middlejumpsquare.png" alt="Jump Square" height="80vh" width="80vw" onclick="movejump()" class="arrowcontrols">
<img src="arrows/rightarrow.png" alt="Right Arrow" height="80vh" width="80vw" onclick="moveright()" class="arrowcontrols">
</body>
Use translate( 0, 0 ) instead of translateX( 0 ), translateY( 0 ). And use one value of x instead of leftarrowmovement and rightarrowmovelock. Now after clicking left function doesn't consider your movement to the right.
But as stated in #Marc's comment, you should use some kind of engine for that. CSS is not the best tool in development of such games.

Button in wrong place in meteor app [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I made a little app and my button shows only on one place. It's all working but on wrong place. See pictures. I'll leave my GitHub repo link. Sorry most of stuff is on Cyrillic but code is, of course, on English Latin.
Here is a video of my problem (22 sec)
Thank you for your help.
You're problem is with id. HTML ids are unique, so when you do document.getElementById('skocko'), you only get back the first element with that id.
Instead, give the button a class of skocko, and access it like this:
Template.myTemplate.events({
"click .glasaj":function(event, template){
template.$(".skocko").toggle();
}
}
This will select the element with class skocko in the current template.
SRC: https://stackoverflow.com/a/27116956/2317712
check div positioning How to position one element relative to another with jQuery? so its position can be relative to button clicked, or assign unique skocko id for every skocko..
Do something like this in your script glasaj.js
if (Meteor.isClient) {
Template.glasajDugme.events({
'click .glasaj': function(){
var g = Meteor.user().profile.неискоришћениГласови;
if (g < 1) {
var pos = $(this).position();
// .outerWidth() takes into account border and padding.
var width = $(this).outerWidth();
//show the menu directly over the placeholder
$("#skocko").css({
position: "absolute",
top: pos.top + "px",
left: (pos.left + width) + "px"
}).show();
document.getElementById('skocko').style.display = "inline-flex";
// return "disabled" ;
}
else {
Predlozi.update(this._id, {$inc: {Број_Гласова: 1}}
);
Meteor.users.update(Meteor.userId(), {$inc: {"profile.неискоришћениГласови": -1}}
);
};
}
});
sakrijskocka = function(){
document.getElementById('skocko').style.display = "none";
};
};

Get a plus score if two conditions are met? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am trying to build a game and I ran into a problem. The idea is to get a score +1 if two conditions are met. I want to get +1 score if a specific random image is shown and a specific button is clicked if both conditions are met the score should increase by one. This is my code so far.
The code does work and increases the score by one if a specific picture is shown but I need the button click with it as well to work properly.
var clicks = 0;
var myPix = ["faces/angry.png", "faces/happy.png", "faces/normal.png","faces /pur.png","faces/sad.png"];
function choosePic() {
var randomNum = Math.floor(Math.random() * myPix.length);
document.getElementById("myPicture").src = myPix[randomNum];
if ([randomNum] == 1) {
clicks++;updateClickCount();
}
}
function startTimer() {
setInterval(choosePic, 1000);
}
Some suggestions:
Add a global variable myPicture which holds the index of the actual image. Change the variable randomNum to myPicture in the function choosePic. Delete in the function the condition.
Add some buttons with an event onclick and an appropriate function to handle the click.
<button onclick="clicked(0);">angry</button>
Add the function for the click event.
function clicked(index) {
// this checks the actual picture index with the index of the button
if (myPicture === index) {
clicks++;
updateClickCount();
}
}
Add the function for the display of the count of the clicks
function updateClickCount() {
document.getElementById('count').innerHTML = clicks;
}
Start the interval
startTimer();
Here the working code without images:
var clicks = 0,
myPix = ["faces/angry.png", "faces/happy.png", "faces/normal.png", "faces /pur.png", "faces/sad.png"],
myPicture;
function choosePic() {
myPicture = Math.floor(Math.random() * myPix.length);
document.getElementById("myPicture").src = myPix[myPicture];
// only to the see the picture name
document.getElementById("myPicture").alt = myPix[myPicture];
}
function startTimer() {
setInterval(choosePic, 1000);
}
function clicked(index) {
if (myPicture === index) {
clicks++;
updateClickCount();
}
}
function updateClickCount() {
document.getElementById('count').innerHTML = clicks;
}
startTimer();
<img id="myPicture" width="100" height="50"/><br />
<button onclick="clicked(0);">angry</button>
<button onclick="clicked(1);">happy</button>
<button onclick="clicked(2);">normal</button>
<button onclick="clicked(3);">pur</button>
<button onclick="clicked(4);">sad</button><br />
Count: <span id="count">0</span>

Trying to make box that i can move if i click on it [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
Trying to make jquery script that allows me to move square according to my mouse movement if i click on it.Basicly it does nothing if i click on the box.it doesn't move the box after clicked and i have no idea why, can anyone help me..
$(function(){
var clicked=1;
var ch,x,y,cy,cx;
$('#box').on("click",function(){
clicked=clicked+1;
var ch=clicked%2;
alert('ch'+ch);
});
alert('ifas');
$('body').mousemove(function(){
if(ch==0)
{
var x=event.pageX;
var y=event.pageY;
var cx=('#box').css("left");
var cy=('#box').css("top");
if(cx==='auto')
{
var cx=0;
}else{
var cx=cx.replace('px','')
}
if(cy==='auto')
{
var cy=0;
}else{
var cy=cy.replace('px','')
}
var cy=y-cy;
var cx=x-cx;
$('#box').css({
top:cy,
left:cx,
});
}
});
});
css is basicly 100x100 box.
https://jsfiddle.net/pL72en07/8/
Your main problems are :
Missing $ in :
var cx=$('#box').css("left");
^ // missing
var cy=$('#box').css("top");
^
Setting local var for ch in first click handler. This means the higher level ch is never defined and never changes
$('#box').on("click",function(){
clicked=clicked+1;
ch=clicked%2; // remove `var`
alert('ch'+ch);
});
The box now moves although not smoothly and I don't know what your expectations are.
If you want to move a element with the cursor when the mouse is pressed and release it at mouse position with another mouse press you can do something like this:
HTML
// Set the position attribute for the CSS style to absolute
<div class="moveAble" style="position:absolute;">
This div is movable!
</div>
JS
// Wait for the dom to be ready
$(document).ready(function(){
// declare variable for the element
var moveable = $('.moveAble'),
// variables for x,y position
x,y,
// bool that indicates wether the element should move or not.
isMoving = false;
// When the element is clicked
moveable.on('click', function() {
// Set the bool to be not the value it currently is, making it a toggle
isMoving = !isMoving;
// Use mousemove method and capture the event (e)
$(document).mousemove(function(e){
// set the x and y variables
x = e.pageX;
y = e.pageY;
// if isMoving is true, alter its top and left CSS attributes to the x and y coordinates for top and left
if (isMoving) {
moveable.css({'top': y,'left': x});
}
});
});
});

How do I create 9 images on the same page that switch every 5 seconds between 3 images. I can do one but can not do multiple [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
<script type="text/javascript">
var currPic = 1;
var totPics = 3;
var keepTime;
function setupPicChange() {
keepTime = setTimeout("changePic()", 5000);
}
function changePic() {
currPic++;
if (currPic > totPics) currPic = 1;
document.getElementById("picture1").src = "advert" + currPic + ".jpg";
setupPicChange();
}
</script>
Hello this is my script to have an image that changes three times after 5 seconds, it works perfectly, but can somebody in very simple terms show me how to make this apply to 9 different images, all changing 3 times, at the same time, but to different images?
eg advert 1, will change to advert 2, and then to advert 3................
below it................. advert 4 will change to advert 5 and then to advert 6................ below that ........................ advert 7 will change to advert 8 and then to advert 9......... all the way up to advert 27. They wont actually be adverts, thats just a good example of what I need to know.
Thanks once again guys!!!!
You should think about abstracting the logic you're currently using to apply to a set of images in general. Here's an example:
<script type="text/javascript">
var rotators = [
{ id: 'picture1', images: ['pic1.jpg', 'pic2.jpg', 'pic3.jpg'], selectedIndex: 0 },
{ id: 'picture2', images: ['pic4.jpg', 'pic5.jpg', 'pic6.jpg'], selectedIndex: 0 },
{ id: 'picture3', images: ['pic7.jpg', 'pic8.jpg', 'pic9.jpg'], selectedIndex: 0 }
];
var updateImages = function() {
for (var i=0; i < rotators.length; i++) {
var rotator = rotators[i];
rotator.selectedIndex++;
if (rotator.selectedIndex >= rotator.images.length) {
rotator.selectedIndex = 0;
}
document.getElementById(rotator.id).src = rotator.images[rotator.selectedIndex];
}
};
var timer = setInterval(updateImages, 5000);
</script>
This makes the components you're currently operating on (the id of the image you want to change, the images you want to rotate through, and your current position in those images) properties of objects that are placed in an array. Then the function that does the updating (like your changePic method) can loop over all of those objects in the array and use the same logic to update each of them.
I also changed the setTimeout call to setInterval, which will call the provided function every X ms, instead of calling it just once and then having to reset the timer.

Categories