Skip to content

Commit 6719c4f

Browse files
AangPerAangPer
committed
se añadio efecto parallax
1 parent e10cfbc commit 6719c4f

16 files changed

+3994
-1953
lines changed

Diff for: ‎package-lock.json

+800-1,187
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎package.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,13 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@svgr/core": "^4.3.3",
67
"react": "^16.11.0",
78
"react-dom": "^16.11.0",
89
"react-feather": "^2.0.3",
9-
"react-scripts": "3.2.0"
10+
"react-plx": "^1.3.14",
11+
"react-scripts": "3.2.0",
12+
"react-scroll-parallax": "^2.2.0"
1013
},
1114
"scripts": {
1215
"start": "react-scripts start",

Diff for: ‎src/assets/img/logo-NodeSchoolTabasco.svg

+1,979
Loading

Diff for: ‎src/assets/img/parallax-hexagon.svg

+10
Loading

Diff for: ‎src/assets/img/parallax-hexagons.svg

+16
Loading

Diff for: ‎src/components/About.js

+31-10
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,42 @@
11
import React from 'react';
22
import console from '../assets/img/Terminal.gif';
3+
import hexagon from '../assets/img/parallax-hexagon.svg';
4+
import hexagons from '../assets/img/parallax-hexagons.svg';
5+
import { Parallax } from 'react-scroll-parallax';
6+
37

48
const About = () => {
59
return (
6-
<div className="section-about">
7-
<div className="section-about__text-box">
8-
<h2 className="heading-secondary">
9-
Estas a un <span className="u-underline">npm</span>&nbsp; <span className="u-underline">install</span> de aprender cualquier cosa
10+
<section className="section-about">
11+
<div className="section-about__wrapper">
12+
<div className="section-about__text-box">
13+
<h2 className="heading-secondary">
14+
Estas a un <span className="u-underline">npm</span>&nbsp; <span className="u-underline">install</span> de aprender cualquier cosa
1015
</h2>
11-
<p className="paragraph">
12-
<strong className="u-strong"> NodeSchool </strong> es el lugar donde puedes comenzar en el increíble camino de <strong className="u-strong">JavaScript </strong> y <strong className="u-strong">Node.js </strong> y donde estudiantes y mentores comparten lo que han aprendido juntos, tanto mentores como alumnos están dispuestos a ayudar a progresar a la comunidad de <strong className="u-strong">NodeSchool</strong>.
16+
<p className="paragraph">
17+
<strong className="u-strong"> NodeSchool </strong> es el lugar donde puedes comenzar en el increíble camino de <strong className="u-strong">JavaScript </strong> y <strong className="u-strong">Node.js </strong> y donde estudiantes y mentores comparten lo que han aprendido juntos, tanto mentores como alumnos están dispuestos a ayudar a progresar a la comunidad de <strong className="u-strong">NodeSchool</strong>.
1318
</p>
19+
</div>
20+
<div className="section-about__console-box">
21+
<img src={console} className="section-about__console" srcset="" alt="Logo" />
22+
</div>
1423
</div>
15-
<div className="section-about__console-box">
16-
<img src={console} className="section-about__console" srcset="" alt="Logo" />
17-
</div>
18-
</div>
24+
<Parallax y={[-20, 20]} tagOuter="div" tagInner="div" className="parallaxHexagon parallaxHexagon--1">
25+
<div className="parallaxHexagon__contain parallaxHexagon__contain--bunch">
26+
<img src={hexagons} alt="" className="parallaxHexagon__img" />
27+
</div>
28+
</Parallax>
29+
<Parallax y={[-60, 60]} tagOuter="div" tagInner="div" className="parallaxHexagon parallaxHexagon--5">
30+
<div className="parallaxHexagon__contain">
31+
<img src={hexagon} alt="" className="parallaxHexagon__img" />
32+
</div>
33+
</Parallax>
34+
<Parallax y={[-50, 50]} tagOuter="div" tagInner="div" className="parallaxHexagon parallaxHexagon--6">
35+
<div className="parallaxHexagon__contain">
36+
<img src={hexagon} alt="" className="parallaxHexagon__img" />
37+
</div>
38+
</Parallax>
39+
</section>
1940
)
2041
}
2142

Diff for: ‎src/components/Events.js

+7
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
11
import React from 'react';
22
import NextEvent from './NextEvent';
33
import EventCard from './EventCard';
4+
import hexagon from '../assets/img/parallax-hexagon.svg';
5+
import { Parallax } from 'react-scroll-parallax';
46

57
const Events = () => {
68
return (
79
<section className="section-events">
810
<div className="section-events__wrapper">
11+
<Parallax y={[-50, 50]} tagOuter="div" tagInner="div" className="parallaxHexagon parallaxHexagon--2">
12+
<div className="parallaxHexagon__contain">
13+
<img src={hexagon} alt="" className="parallaxHexagon__img" />
14+
</div>
15+
</Parallax>
916
<div className="section-events__next-event u-margin-top-big">
1017
<h2 className="heading-secondary u-align-center">
1118
Proximo evento

Diff for: ‎src/components/Header.js

+11-4
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,31 @@
11
import React from 'react';
22
import logo from '../assets/img/logo-NodeSchoolTabasco.png';
3+
import { Parallax } from 'react-scroll-parallax';
34
import Foto from '../assets/img/slide-1.jpg';
45

56
const Slide = () => {
67
return (
78
<header className="header">
89
<div className="header header__wrapper">
9-
<div className="header__text-box">
10+
<Parallax className="header__text-box" y={[-50, 50]} tagOuter="figure">
11+
{/* <div className="header__text-box"> */}
1012
<h1 className="heading-primary">
1113
<span className="heading-primary--main">¡Asiste, aprende y comparte!</span>
1214
<span className="heading-primary--sub">NodeSchoool es el lugar donde puedes conocer a la comunidad de developers en Tabasco.</span>
1315
</h1>
14-
</div>
15-
<div className="header__logo-box">
16+
{/* </div> */}
17+
</Parallax>
18+
<Parallax className="header__logo-box" y={[-20, 20]} tagOuter="figure">
19+
{/* <div className="header__logo-box"> */}
1620
<img src={logo} className="header__logo" srcset="" alt="Logo" />
17-
</div>
21+
{/* </div> */}
22+
</Parallax>
1823
</div>
24+
{/* <Parallax className="header__slider" y={[-20, 30]} tagOuter="figure"> */}
1925
<div className="header__slider">
2026
<img src={Foto} alt="" className="header__slider__img" />
2127
</div>
28+
{/* </Parallax> */}
2229
</header>
2330
)
2431
}

Diff for: ‎src/components/Mentors.js

+32
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React from 'react';
22
import MentorCard from './MentorCard';
3+
import hexagon from '../assets/img/parallax-hexagon.svg';
4+
import { Parallax } from 'react-scroll-parallax';
35

46

57
const Mentors = () => {
@@ -14,8 +16,38 @@ const Mentors = () => {
1416
<MentorCard />
1517
<MentorCard />
1618
<MentorCard />
19+
<MentorCard />
20+
<MentorCard />
21+
<MentorCard />
22+
<MentorCard />
23+
<MentorCard />
1724
</div>
1825
</div>
26+
<Parallax y={[-20, 20]} tagOuter="div" tagInner="div" className="parallaxHexagon parallaxHexagon--3">
27+
<div className="parallaxHexagon__contain">
28+
<img src={hexagon} alt="" className="parallaxHexagon__img" />
29+
</div>
30+
</Parallax>
31+
<Parallax y={[-50, 50]} tagOuter="div" tagInner="div" className="parallaxHexagon parallaxHexagon--4">
32+
<div className="parallaxHexagon__contain">
33+
<img src={hexagon} alt="" className="parallaxHexagon__img" />
34+
</div>
35+
</Parallax>
36+
<Parallax y={[-50, 50]} tagOuter="div" tagInner="div" className="parallaxHexagon parallaxHexagon--7">
37+
<div className="parallaxHexagon__contain">
38+
<img src={hexagon} alt="" className="parallaxHexagon__img" />
39+
</div>
40+
</Parallax>
41+
<Parallax y={[-50, 50]} tagOuter="div" tagInner="div" className="parallaxHexagon parallaxHexagon--8">
42+
<div className="parallaxHexagon__contain">
43+
<img src={hexagon} alt="" className="parallaxHexagon__img" />
44+
</div>
45+
</Parallax>
46+
<Parallax y={[-50, 50]} tagOuter="div" tagInner="div" className="parallaxHexagon parallaxHexagon--9">
47+
<div className="parallaxHexagon__contain">
48+
<img src={hexagon} alt="" className="parallaxHexagon__img" />
49+
</div>
50+
</Parallax>
1951
</section >
2052
)
2153
}

Diff for: ‎src/css/style.css

+84-13
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
display: flex;
33
justify-content: space-between;
44
height: 100vh;
5-
position: relative; }
5+
position: relative;
6+
max-height: 900px;
7+
min-height: 500px; }
68
.header__wrapper {
79
margin-left: auto;
810
margin-right: auto;
@@ -333,7 +335,11 @@ body {
333335
transform: translateX(0rem); }
334336
.card__mentor {
335337
width: 18rem;
338+
max-width: 18rem;
339+
min-width: 18rem;
336340
height: 24rem;
341+
max-height: 24rem;
342+
min-height: 24rem;
337343
margin-bottom: .8rem;
338344
margin-left: 8em;
339345
margin-right: .4rem;
@@ -398,12 +404,22 @@ body {
398404

399405
.section-about {
400406
display: flex;
401-
justify-content: space-between;
407+
justify-content: center;
408+
align-items: center;
402409
margin-top: 200px;
403410
height: 100vh;
404-
margin-left: auto;
405-
margin-right: auto;
406-
max-width: 1110px; }
411+
max-height: 900px;
412+
min-height: 500px;
413+
width: 100%;
414+
position: relative;
415+
z-index: 15; }
416+
.section-about__wrapper {
417+
display: flex;
418+
justify-content: space-between;
419+
align-items: center;
420+
margin-left: auto;
421+
margin-right: auto;
422+
max-width: 1110px; }
407423
.section-about__console-box {
408424
display: flex;
409425
align-items: center;
@@ -429,7 +445,8 @@ body {
429445
.section-events {
430446
display: flex;
431447
width: 100%;
432-
background-color: #F7F7F7; }
448+
background: #F7F7F7;
449+
position: relative; }
433450
.section-events__wrapper {
434451
display: flex;
435452
justify-content: space-between;
@@ -470,7 +487,10 @@ body {
470487
align-items: center;
471488
justify-content: flex-start;
472489
height: 100vh;
473-
background-color: #151718; }
490+
max-height: 720px;
491+
min-height: 500px;
492+
background-color: #151718;
493+
position: relative; }
474494
.section-mentors__wrapper {
475495
display: flex;
476496
flex-direction: column;
@@ -479,14 +499,14 @@ body {
479499
margin-right: auto;
480500
max-width: 1110px;
481501
box-sizing: border-box;
482-
background-color: #151718; }
502+
z-index: 5; }
483503
.section-mentors__box {
484504
display: flex;
485-
width: 100%;
486505
overflow-x: scroll;
487506
flex-direction: row;
488507
align-items: flex-start;
489-
justify-content: flex-start; }
508+
justify-content: flex-start;
509+
z-index: 5; }
490510

491511
.section-contact {
492512
display: flex;
@@ -528,7 +548,7 @@ body {
528548
display: flex;
529549
flex-direction: column;
530550
align-items: center;
531-
justify-content: flex-start;
551+
justify-content: center;
532552
background-color: #151718; }
533553
.footer__wrapper {
534554
display: flex;
@@ -558,8 +578,9 @@ body {
558578
display: flex;
559579
width: 100%;
560580
flex-direction: row;
561-
align-items: flex-start;
562-
justify-content: flex-start; }
581+
align-items: center;
582+
justify-content: center;
583+
flex-wrap: wrap; }
563584
.community__box {
564585
display: flex;
565586
width: 100%;
@@ -592,3 +613,53 @@ body {
592613
flex-direction: row;
593614
justify-content: space;
594615
align-items: center; }
616+
617+
.parallaxHexagon {
618+
display: block;
619+
box-sizing: border-box;
620+
position: absolute; }
621+
.parallaxHexagon__contain {
622+
display: flex;
623+
flex-direction: column;
624+
align-items: center;
625+
align-content: center;
626+
max-width: 200px;
627+
min-width: 150px; }
628+
.parallaxHexagon__contain--bunch {
629+
max-width: 410px;
630+
min-width: 310px; }
631+
.parallaxHexagon__img {
632+
display: block;
633+
width: 100%;
634+
height: auto;
635+
position: relative; }
636+
.parallaxHexagon--1 {
637+
top: 30%;
638+
left: -6%;
639+
z-index: -5; }
640+
.parallaxHexagon--2 {
641+
top: 45%;
642+
left: 30%; }
643+
.parallaxHexagon--3 {
644+
top: -10.5%;
645+
left: 23%; }
646+
.parallaxHexagon--4 {
647+
top: 74.8%;
648+
left: 6%; }
649+
.parallaxHexagon--5 {
650+
top: 30%;
651+
left: 50%;
652+
z-index: -5; }
653+
.parallaxHexagon--6 {
654+
top: 74.8%;
655+
left: 80%;
656+
z-index: -5; }
657+
.parallaxHexagon--7 {
658+
top: 40%;
659+
left: 0%; }
660+
.parallaxHexagon--8 {
661+
top: 78%;
662+
right: 30%; }
663+
.parallaxHexagon--9 {
664+
top: 20%;
665+
right: 0%; }

Diff for: ‎src/pages/home/App.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
import React from 'react';
22
import Home from './Home';
3+
import { ParallaxProvider } from 'react-scroll-parallax';
34

45
function App() {
56
return (
6-
<Home />
7+
<ParallaxProvider>
8+
<Home />
9+
</ParallaxProvider>
710
);
811
}
912

Diff for: ‎src/sass/components/_card.scss

+5-1
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,11 @@
8181

8282
&__mentor{
8383
width: 18rem;
84+
max-width: 18rem;
85+
min-width: 18rem;
8486
height: 24rem;
87+
max-height: 24rem;
88+
min-height: 24rem;
8589
margin-bottom: .8rem;
8690
margin-left: 8em;
8791
margin-right: .4rem;
@@ -92,7 +96,7 @@
9296
width: 100%;
9397
height: 100%;
9498
border-radius: .8rem;
95-
overflow: hidden;
99+
overflow: hidden;
96100
}
97101

98102
&__img {

0 commit comments

Comments
 (0)