Commit 562b22fe authored by NERUSU PRANEETH's avatar NERUSU PRANEETH

added animation to every phase,completed all the phases

parent 238b2590
Pipeline #19909 passed with stage
in 1 minute and 48 seconds
......@@ -13,6 +13,8 @@ import Mountain from './components/Mountain';
import Sun from './components/Sun';
import Bird from './components/images/Bird.gif';
import A1up from './components/A1up';
import A2Down from './components/A2Down';
import A2Left from './components/A2Left';
import ReactRain from 'react-rain-animation';
import "react-rain-animation/lib/style.css";
import Flippy, { FrontSide, BackSide } from 'react-flippy';
......@@ -28,36 +30,45 @@ class App extends Component {
this.state = {
sun : false ,
cloud : false ,
cloud3 : false,
rain : false,
arrow : false,
arrow2 : false,
}
}
Phase1() {
this.setState({sun: true});
this.setState({cloud : false});
this.setState({cloud3 : false});
this.setState({rain: false});
this.setState({arrow: true});
this.setState({arrow2 : false});
}
Phase2() {
this.setState({sun: true});
this.setState({cloud : true});
this.setState({cloud3 : false});
this.setState({rain: false});
this.setState({arrow: false});
this.setState({arroe22: false})
}
Phase3() {
this.setState({sun: false});
this.setState({cloud : true});
this.setState({cloud3 : true});
this.setState({rain: true});
this.setState({arrow: false});
this.setState({arrow2: false});
}
Phase4() {
this.setState({sun: false});
this.setState({cloud : false});
this.setState({cloud3 : false});
this.setState({rain: false});
this.setState({arrow: false });
this.setState({arrow2: true});
}
render() {
......@@ -69,50 +80,94 @@ Phase4() {
<Col sm={10}>
<Container className='Container'>
<Row justify='start'>
{
<Row justify='start'>
{
this.state.rain ? <ReactRain numDrops="1000"></ReactRain> : null
}
</Row>
<Row>
<Col xs={0.4} sm={0.4}>
</Row>
{
this.state.sun ? <Sun /> : null
}
</Col>
<Row>
<Col xs={0} sm={0} > { this.state.sun ? <Sun> <Cloud /> </Sun> : null } </Col>
<Col xs={10}>{this.state.cloud ? <Cloud /> : null}
<Row>
<Col xs={2} sm={2}>
{
this.state.cloud ? <Cloud5 /> : null
}
{
this.state.cloud ? <Cloud2 /> : null
}
</Col>
<Col xs={2.2}> {this.state.arrow ? null : null} </Col >
<Col xs={2.4}> {this.state.arrow ? <A1up /> : null} </Col >
<Col xs={2.4}> {this.state.arrow ? <A1up /> : null} </Col >
<Col xs={2.4}> {this.state.arrow ? <A1up />: null} </Col >
<Col xs={2.4}> {this.state.arrow ? <A1up />: null} </Col >
<Col xs={1} sm={1}>
{
this.state.cloud ? <Cloud2 /> : null
}
{
this.state.cloud ? <Cloud /> : null
}
</Row>
<Row>
<Col xs={1}>
{ this.state.cloud3 ? <Cloud5 /> : null}
</Col>
<Col xs={3}>
{ this.state.cloud3 ? <Cloud /> : null} </Col>
</Row>
</Col>
<Col xs={4} sm={4}>
{
this.state.cloud ? <Cloud /> : null
}
</Row>
<Row>
<Col xs={2}>
{this.state.arrow ? <A1up /> : null}
</Col >
<Col xs={2}>
{this.state.arrow ? <A1up /> : null}
</Col>
</Row>
<Col xs={2}>
{this.state.arrow ? <A1up /> : null}
</Col>
<Col xs={2}>
{this.state.arrow ? <A1up /> : null}
</Col>
<Col xs={2}>
{this.state.arrow ? <A1up /> : null}
</Col>
</Row>
<Row>
<Col xs={2}>
{this.state.arrow ? <A1up /> : null}
</Col >
<Col xs={2}>
{this.state.arrow ? <A1up /> : null}
</Col>
<Col xs={2}>
{this.state.arrow ? <A1up /> : null}
</Col>
<Col xs={2}>
{this.state.arrow ? <A1up /> : null}
</Col>
<Col xs={2}>
{this.state.arrow ? <A1up /> : null}
</Col>
</Row>
<Row>
<Col xs={2}>
{this.state.arrow ? <A1up /> : null}
......@@ -180,6 +235,25 @@ Phase4() {
{this.state.arrow ? <A1up /> : null}
</Col>
</Row>
<Row>
<Col xs={7}>
</Col>
<Col xs={3}>
{this.state.arrow2 ? <A2Down /> : null }
</Col>
</Row>
<Row>
<Col xs={10}>
{this.state.arrow2 ? <A2Left /> : null }
</Col>
</Row>
</Container>
......
import React, { Component } from 'react';
import SmoothImage from 'react-smooth-image';
//import logo from './logo.svg';
import a1up from './images/a1up.png';
import 'react-marquee';
import a1up from './images/a2.png';
class A1up extends Component {
render() {
return (
<div >
<header >
<img src={a1up} className="A1up" />
<marquee direction={"up"} scrollamount={"80"} scrolldelay={"200"}><img src={a1up} className="A1up" /></marquee>
</header>
</div>
);
......
import React, { Component } from 'react';
import 'react-marquee';
import a3 from './images/a1down.png';
import './App.css';
class A2Down extends Component {
render() {
return (
<div> <marquee direction={"down"} scrollamount={"15"}>
<img src={a3} />
<img src={a3} />
<img src={a3} /><br />
</marquee>
<marquee direction={"down"} scrollamount={"30"}>
<img src={a3} />
<img src={a3} />
<img src={a3} /> <br />
</marquee>
<marquee direction={"down"} scrollamount={"60"}>
<img src={a3} />
<img src={a3} />
<img src={a3} />
</marquee>
</div>);
}
}
export default A2Down;
\ No newline at end of file
import React, { Component } from 'react';
import 'react-marquee';
import a3 from './images/a1left.png';
import './App.css';
class A2Left extends Component {
render() {
return (
<div>
<marquee direction={"left"} scrollamount={"120"}>
<img src={a3} />
<img src={a3} />
<img src={a3} />
</marquee>
<marquee direction={"left"} scrollamount={"60"}>
<img src={a3} />
<img src={a3} />
<img src={a3} /><br />
</marquee>
<marquee direction={"left"} scrollamount={"30"}>
<img src={a3} />
<img src={a3} />
<img src={a3} /> <br />
</marquee>
<marquee direction={"left"} scrollamount={"15"}>
<img src={a3} />
<img src={a3} />
<img src={a3} />
</marquee>
</div>
);
}
}
export default A2Left;
\ No newline at end of file
.arrow{
padding:0px;
font-size:20px;
}
.Analog{
background-color:grey;
text-align:left;
......
import React, { Component } from 'react';
import cloud from './images/c1.png';
import cloud5 from './images/c6.png';
import './App.css';
import 'react-marquee';
class Cloud extends Component {
render() {
return (
<div>
<img className="Cloud" src={cloud}/>
<marquee behavior={"slide"} direction={"right"} scrollamount={"5"}>
<img className="Cloud" src={cloud}/>
<img className="Cloud" src={cloud}/>
</marquee>
</div>
);
......
import React, { Component } from 'react';
import cloud from './images/c1.png';
import cloud5 from './images/c6.png';
import './App.css';
import 'react-marquee';
class Cloud5 extends Component {
class Cloud extends Component {
render() {
return (
<div>
<img className="Cloud" src={cloud5}/>
<img className="Cloud" src={cloud}/>
<img className="Cloud" src={cloud}/>
</div>
);
}
}
export default Cloud5;
\ No newline at end of file
export default Cloud;
\ No newline at end of file
src/components/images/c6.png

6.91 KB | W: | H:

src/components/images/c6.png

14.5 KB | W: | H:

src/components/images/c6.png
src/components/images/c6.png
src/components/images/c6.png
src/components/images/c6.png
  • 2-up
  • Swipe
  • Onion skin
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment