Paralaks Web Tasarımı ile daha havalı hale getirilen basit bir React web sitesi

Öğretilebilir kurslarımıza göz atın .

Bu web sayfasını 3 parça halinde oluşturacağız.

1. Top — müşterimiz için selamlama

2. Orta — işimizin misyonu hakkında bilgi için bir yer

3. Alt — bir kayıt seçeneği ve işimiz hakkında bilgi almak için alt bilgi

Üst.

Burada yapacağımız tek şey, bir sürü resim yerleştirmek ve bir selamlama yazmak.

<div className=”section1" >
<img src=”./images/space.png” alt=”” className=”space-background”/>
<img src=”./images/earth.png” alt=”” className=”earth”/>
<img src=”./images/rocket.png” alt=”” className=”rocket-ship”/>
<img src=”./images/planet1.png” alt=”” className=”planet1"/>
<img src=”./images/satellite.png” alt=”” className=”satellite”/>
<div className=”greeting”>[Welcome]</div>
</div>

Bu, daha sonra bu öğeleri farklı hızlarda kaydırmak için Parallax HOC Wrapper'ımızı kullandığımızda önemlidir .

Bu bizim sonucumuz:

Orta.

Bu bölüm için eğri kenarlıklar oluşturacağız ve bölümü sol ve sağ tarafa ayıracağız.

<div className=”section2" >
<svg className=”svg_curve_top” xmlns=”http://www.w3.org/2000/svg" fill=”orange” viewBox=”0 0 100 100" preserveAspectRatio=”none” >
<path d=”M0,100 C65,93 76,10 100,100" />
</svg>
<div className=”section2_container”>
<div className=”left_side”>
// text here
</div>
<div className=”right_side”>
// image here
</div>
</div>
<svg className=”svg_curve_bottom” xmlns=”http://www.w3.org/2000/svg" fill=”orange” viewBox=”0 0 100 100" preserveAspectRatio=”none” >
<path d=”M0,0 C65,20 90,5 100,0" />
</svg>
</div>

Kod oluşturmada bize yardımcı olması için Cubic Bezier Curve Generato r sitesini kullandık .

Alt.

Basit bir metin girişi ve sırasız listeler alt bölümümüzü tamamlıyor.

<div className=”section3" >
Sign up to receive our newsletter!
<input className=”input_email” type=”text” name=”email” id=”email” />
<MyButton text=”Sign Up” />
<div className=”contacts” >
<section className=”contact_section” >
<ul>
// your items here
</ul>
</section>
<section className=”contact_section” >
<ul>
// your items here
</ul>
</section>
<section className=”contact_section” >
<ul>
// your items here
</ul>
</section>
</div>
</div>

Parallaxing'i ele alalım.

Bu HOC Wrapper'ı başka bir eğitimde oluşturduk.

Burada bulabilirsiniz .

Farklı bir hızda hareket ettirmek istediğimiz her şeyi bu sarmalayıcıya saracağız ve yeni bileşeni kodumuza yerleştireceğiz.

Örneğin,

bu :

<img src=”./images/rocket.png” alt=”” className=”rocket-ship”/>

const RocketShip = JSX_withParallax(<img src=”./images/rocket.png” alt=”” className=”rocket-ship” />, 0.04);

<RocketShip />

Bu projede çok daha fazla nüans var.

Özel 'Düğme' bileşenimiz için kod dahil.

Video eğitimimizi aşağıdan izleyebilirsiniz.

Kaynak dosyalara buradan ulaşabilirsiniz .

Tüm uzay görüntüleri Flat Icon'dan toplanmıştır .

Font Awesome'den topladığımız tüm iletişim resmi simgeleri .

Daha ayrıntılı bir kılavuz istiyorsanız, YouTube'daki tam video eğitimime bakın, An Object Is A .

React Paralaks Web Sitesi Tasarımı