后端开发教程 - Java、Spring Boot 实战 - msg200.com
React Parallax 网站设计
React Parallax 网站设计
浏览我们的可教课程。
我们将分 3 个部分构建此网页。
- 顶部-对客户的问候
- 中间- 提供有关我们企业使命的信息的地方
- 底部- 注册选项和页脚，用于提供有关我们业务的信息
顶部。
我们在这里要做的就是放置一堆图像并写下问候语。
<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>
在所有这些图像的 CSS 样式中，重要的是确保它们具有“固定”的位置并使用“顶部”属性进行定位。
这对于我们稍后使用Parallax HOC Wrapper使这些元素以不同的速度滚动时非常重要。
这是我们的结果：
中间。
对于此部分，我们将创建弯曲的边框并将该部分分成左侧和右侧。
<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>
这里的svg元素在此部分的顶部和底部创建了漂亮的曲线效果。
我们使用了Cubic Bezier Curve Generator网站来帮助我们生成代码。
底部。
简单的文本输入和无序列表完成了我们的底部部分。
<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>
“按钮”是一个自定义组件，点击时会有动画。
让我们来处理视差。
我们在另一个教程中创建了这个 HOC Wrapper。
您可以在这里找到它。
我们只需将我们想要以不同速度移动的任何东西包装在这个包装器中，然后将新组件放入我们的代码中。
例如，
这：
<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 />
包装我们想要的所有内容，最终效果如下：
这个项目还有更多的细微差别。
包括我们自定义“按钮”组件的代码。
您可以在下面观看我们的视频教程。
您可以在此处获取源文件。
我们从Font Awesome收集了所有联系人图像图标。