How build a Spritesheet with pure CSS and JS in React js

2018-10-11 19:53 Emmanuel Garcia Martinez imported from Stackoverflow

I have a Spritesheet of a bottle of beer and when Scroll down the bottle turns I use the library react-responsive-spritesheet but

but it looks slow because I have other things that change in the Onscroll method. I've been thinking about replacing the spritesheet with pure css

something like putting all the images on top of each other and changing the z-index of each of them in such a way that you see a fluid turn.

Somebody now what is the best way for build this animation ?

See also questions close to this topic

Cant get Value out of HTML with document.getElementById();

i am new to JavaScript and not the best at HTML but have to do the following for school: I found a Stopwatch HTML-Code and i made a javascript for it, which shall calculate the laborunits(LU) out of the stopped time. 1 LU = 15 minutes (900 seconds) The problem is, that i cant get the stopped time from the HTML-Site into my JavaScirpt, to calculate the "LU".

I tried document.getElementById and document.getElementsByClassName

with document.getElementsByClassName i always get something like "object htmldivelement" and with document.getElementById all the variables stay null and i cant figur out, how i can fix that. do i need to use some other command or what am i doing wrong?


<div class="container">
        <!-- controls -->
        <input id="start" name="controls" type="radio" />
        <input id="stop" name="controls" type="radio" />
        <input id="reset" name="controls" type="radio" />

        <div class="timer">
                <div class="cell">
                        <div class="numbers tenhour moveten">0 1 2 3 4 5 6 7 8 9</div>
                </div>
                <div class="cell">
                        <div class="numbers hour moveten">0 1 2 3 4 5 6 7 8 9</div>
                </div>
                <div class="cell divider"><div class="numbers">:</div></div>
                <div class="cell">
                        <div class="numbers tenminute movesix">0 1 2 3 4 5 6</div>
                </div>
                <div class="cell">
                        <div class="numbers minute moveten">0 1 2 3 4 5 6 7 8 9</div>
                </div>
                <div class="cell divider"><div class="numbers">:</div></div>
                <div class="cell">
                        <div class="numbers tensecond movesix">0 1 2 3 4 5 6</div>
                </div>
                <div class="cell">
                        <div class="numbers second moveten">0 1 2 3 4 5 6 7 8 9</div>
                </div>
                <div class="cell divider"><div class="numbers">:</div></div>
                <div class="cell">
                        <div class="numbers milisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
                </div>
                <div class="cell">
                        <div class="numbers tenmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
                </div>
                <div class="cell">
                        <div class="numbers hundredmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
                </div>
        </div>

JAVASCRIPT:

var ae;
var zs = document.getElementById('cell');
var es = document.getElementById('cell');
var zm = document.getElementById('cell');
var em = document.getElementById('cell');
var zsek = document.getElementById('cell');
var esek = document.getElementById('cell');
document.write("<center><h2>Erfasste AEs: </h2></center> <h2>");

document.getElementById('stop').onclick = function() {
    zs = zs * 36000;
    es = es * 3600;
    zm = zm * 600;
    em = em * 60;
    zsek = zsek * 10;
    ae = ((zs + es + zm +em + zsek + esek) / 900) + 1;
    document.write(ae);
};

If the stop-button is pressed it shall tell me the calculated LaborUnits. the problem that if the Stop-Button is pressed, the JavaScript posts the answer on a "new" blank site, will i try to solve.

i would appreciate every kind of help and sorry for my patchy english

How to permanently rotate a pdf in base64 string format by 90 degrees using javascript

I'm building a web application using quasar and am trying to permanently rotate a pdf base64 string I get back on the client from the server by 90 degrees. The PDF renders perfectly fine but I need to be able to print them out sideways because the paper my company uses are half legal size and they don't want to change any paper. I already have a silent printing environment set up and working already using cross domain iframes which was quite hard to do. All that is left to do is to rotate the PDF. Is there any libraries or functions I can use to accomplish this using Javascript?
Dynamic table of contents fundamental question

I have a requirement to add a table of contents to pages that display content. The content displayed is rendered in through a markdown file and through a custom algorithm to display properly. Whilst being computed, id's are added to the section headers from the markdown files and then are pulled into an array to display as the table of contents. There are many markdown files so this all had to be done dynamically.

The problem lies with the table of contents. Currently there is a scroll listener that identifies which section is at the top of the page and appends an "active" class to that table of contents item, which highlights it blue. So, when a user is scrolling through a page, the TOC highlights the active section they are looking at. The problem lies with small sections at the bottom of the page. If there is one or multiple sections at the very bottom of the page, the Table of Contents will never highlight their sections as active because their headers will never reach the top of the page. I could use an onclick to just highlight them blue, but now I am curious if its actually possible to make this work as intended. I am leaning towards no, but I figured I'd ask.

Thanks!
How to avoid overlapping text in two paragraphs side by side

I have 2  tags. How can I let the 2nd  tag overflow but not overlap the 1st  tag.

Below is an example of what I a want to do

Heading - Text text text text text text text text text text
How can I make this element's width match that of the site content?
I'm working on a website and want to change the look of the search dropdown. The website is here: https://www.nopl.org/beta/

If I change the width to 100%, it matches the width of the parent element, the search icon above it. If I specify a width, it won't be responsive. Here's some of the current css for that element:
```
.fusion-custom-menu-item-contents {
    display: block;
    width: 250px;
    position: absolute;
    left: auto;
    right: 0;}
```
I'd like the dropdown to match the width of the site contents and be fully responsive.

Use redux in initialRouteName in tabNavigator on stateless

i want to change the tabs when differnet user is logged in. i'm using redux to get the user type (which is a number: 0 or bigger then 0), but when i try to use this.props.id get an error: "Uncaught Error: undefined is not an object (evalutating 'this.props.id').

function mapStateToProps(state) {
  return {
    id: state.usert
  };
}

const HomeStack = createStackNavigator(
  {
    LogIn: LogIn,
    Home: PlayersList,
    Player: PlayerPage,
    Week: Calendar,
    Stat: PlayerStatistic,
    Goal: PlayerGoals,
    Group: GroupStatistic,
    PlayerPPage: PlayerPlayerPage
  },
  {
    mode: "card"
  });

const CoursesStack = createStackNavigator(
  {
    Courses: PlayerGoals,
    Goals: GroupStatistic,
  },
  {
    initialRouteName: this.props.id === 0 ? "Courses" : "Goals"
  }
);



const TabNavigator = createBottomTabNavigator({
  HomeStack,
  CoursesStack,
});

export default connect(mapStateToProps)(TabNavigator);

Props missing after passing to children when using draft-js

I'm kinda new to react and thought that in the constructor function, using super(props) can fully receive the props that passed by parents. But however, I can't get the string test from my parent component.

So in the parent component, I pass the string "test" as props

import React from 'react';
import Post from '../components/post';
import "../components/css/post.css"
class Bulletin extends React.Component  {
  render()
  {
      console.log(this.props);
      return (
       <div>
           <Post test={"sent from parent"}/>
       </div>
      );
  }
}

export default Bulletin;

And then in Post.js, I print the props in two places:

import React, { Component } from 'react';
export default class Edit extends Component {
    constructor(props) {
        super(props);
        console.log(props);
    }
  render() {
    console.log(this.props);
    return (
      <div className="editor" onClick={this.focus}>

      </div>
    );
  }
}

The two outputs are both {className: "editor"} which is not what I need. I need the string {test: "sent from parent"} and don't know why this doesn't works for me.

Can 't redirect to homepage after login whit <Redirect>

i 'm traying to use Redirect from react-router-dom 4.3.1. All the logic i apply into mi app.js and i do a get for the token and if exist i have to redirect the user to the homepage.. Also i try to use history, but i dosn 't work.. where is the problem?

app.js

import  { Redirect } from 'react-router-dom'

async componentDidMount() {

  try{
      const urlToken = new URL(window.location) 
      const authToken = urlToken.searchParams.get('auth_token')
      console.log('MATCH ',authToken)

      const tokenUser = await getTokenUser(authToken)
      console.log('tokenUser', tokenUser.status)

      if(tokenUser.status == 200) {
        return <Redirect to='/' />
        } else {
        console.log('no user')
       }
     }
   catch(error){console.log('NOT')}
  }

How to make multiple animation for an object by multiple image in Corona SDK?
I just learned programming with Corona SDK. Recently I have a problem in animate the object. I have seen all the instructions about animation in corona and I saw it just present about how to make animation for object with a single image( they use one image to make the object have two or more animation) https://www.youtube.com/watch?v=VsA2agBAWho&t=322s . I have followed suit and the problem begin when I find the asset on the Internet, the link here: https://finalbossblues.itch.io/pixel-platformer-pack?download . As you can see, the folder have multiple image for multiple animation. I have no idea and no reference to animate all the animation for my player by multiple image( but I can do that with a single image).

I have found all the way to solve them on the Internet but there no result suitable for me. :((

As the result, i have a dump and poor code:
```
        -----------------------------------------------------------------------------------------
--
-- main.lua
--
-----------------------------------------------------------------------------------------

-- My code here

local sheetData = {
    width = 30,
    height = 44,
    numFrames = 6,
    sheetContentWidth = 181,
    sheetContentHeight = 44 }

local mySheet = graphics.newImageSheet( "walk.png", sheetData )

local sequenceData = {
    { name = "normalrun", start = 1, count = 6, time = 800 } 
  }

local animation = display.newSprite( mySheet, sequenceData )
animation.x=150
animation.y= 300
animation:play()
```
just make 1 animation :((

And now, I just have two ways to choose. One is use some method to animate multiple animation by multiple image ( You will help me in this side, I really need your help!). Two is combine all image to one :)) ( look so cheat ).

Thank you a lot to help me and so sorry because my English is not good, I am Vietnamese I use GG Translate. This is my first step in game development and I dont want to be defeated. I want to integrated all animation into my player( like walk, jump, attack...) and call it to use when I want ( with multiple Image). Please sympathize with me because I was asking so stupid and I be ban for 6 month (This is the first time I have seen the light of freedom ).

Thanks you so much. Hope there will be a way to help me :)) It will be more good if you show me the example.
Convert sprite sheet to gif animation
The frames go in the order left to right, top to bottom, the animations go sequentially, all frames are of the same size.
```
1234
5612
345
```
I need a command that would take frame size, coordinates of the first frame and frame count as input and give an animated gif as output. Preferably without generating intermediate files.

I could do this using a programming language, but isn't there a way to do it easier with a command line tool like ImageMagick or GraphicsMagick? It feels to me like it should be a common task, yet I've found only questions about how to convert gif to sprite sheet, not the other way around.
How to deal with low amount of animation frames on a high FPS game

Simply put: I am working on a 2d Platformer which runs with 80+ fps. I used to use a sprite sheet witch character which has a running animation with 20 pictures (frames) in total. Now I found a collection of characters which looks great but their running animations are about 9 pictures/frames and the gameplay looks super sloppy because of this. I was wondering do you know a way in which I can fake this and make this low frames looks better?

Related questions

How build a Spritesheet with pure CSS and JS in React js

See also questions close to this topic