DAY25-问答页面设计

前言：

几个基本的页面都设计得差不多啦～这次的挑战也快接近尾声了！今天就让阿森来介绍一个有点小特效的问答页面要怎麽写吧！

效果：

可以看到当我们滑下来的时候，会先飘出问题，在出现回答，这就是我在问答页面加入的小特效，可以让整个网页看起来活泼一些。

那怎麽达成这样的效果呢？

实作：

这里我们一样先创一个faq的资料夹在components资料夹里，并创建一个index.js，内容是这样的：

import React, { useEffect } from 'react'
import feet from '../../../images/feet.png'
import './Sub.css'
import AOS from 'aos'
import 'aos/dist/aos.css'
import { Container, Para, Para2, FaqTitle } from './FaqElements'

function Faq() {  
    useEffect(()=>{
        AOS.init();
    });
    
    return(

    <Container >
        <FaqTitle id="FAQs">FAQS</FaqTitle>
          <div data-aos="fade-up" data-aos-delay="200"><Para><img src={feet} className ="feet" />What is "The Dinomension" NFT?</Para></div>
          <Para2 data-aos="fade-up" data-aos-delay="600">
          It is a collection of 10,000 ERC-721 NFTs tokens hosted on IPFS. Every NFT is unique and created by some of the 180+ hand-drawn elements.
          </Para2>

          <div data-aos="fade-up" data-aos-delay="200"><Para><img src={feet} className ="feet" />What's special about "The Dinomension"?</Para></div>
          <Para2 data-aos="fade-up" data-aos-delay="600">
          It is the first NFT project based on an interactive comic story and aiming at the integration of the metaverse and real lives. The NFT itself doubles as the DNMS citizenship. Citizens can enjoy a series of exclusive events and interactive experience through "The DNMS Journal."
          </Para2>

          <div data-aos="fade-up" data-aos-delay="200"><Para><img src={feet} className ="feet" />What will be given to our NFT holder?</Para></div>
          <Para2 data-aos="fade-up" data-aos-delay="600">
            ． The ownership and the commercial right of the NFT. <br /><br />

            ． The DNMS citizenship to enjoy benefits from and beyond the roadmap.<br /><br />

            ． The permanent membership of DNMS' future plannings.<br /><br />
          </Para2>

          <div data-aos="fade-up" data-aos-delay="200"><Para><img src={feet} className ="feet" />Is there a limited number of the NFT collectibles?</Para></div>
          <Para2 data-aos="fade-up" data-aos-delay="600">
          A total amount of 10K NFTs is written in the smart contract.
          </Para2>

          <div data-aos="fade-up" data-aos-delay="200"><Para><img src={feet} className ="feet" />Is there any rarity difference ?</Para></div>
          <Para2 data-aos="fade-up" data-aos-delay="600">
          There are five rarity levels in each trait category but this will not affect any of your experience on the journey. Every holder enjoys equal rights.
          </Para2>          
          
    </Container>

    )}

export default Faq

这些就是这个页面的主架构，再来我们用styled components的方式补完，也就是创建一个faqElements.js：

import styled from "styled-components";

export const Container = styled.section`
    display: flex;
    height: 1350px;
    
    overflow: hidden;
    flex-direction: column;
    justify-content: top;
    align-items: center;
    background: transparent;
    
    @media screen and (max-width: 1311px) {
    padding-top: 0vh;
    height: fit-content;
    }

    @media screen and (max-width: 1050px) {
    
    height: fit-content;
    }

    @media screen and (max-width: 930px) {
    
    height: fit-content;
    }

    @media screen and (max-width: 790px) {
    
    height: fit-content;
    margin-top: -50px;
    }

    @media screen and (max-width: 705px) {
    
    height: fit-content;
    }

`

export const Para = styled.p`
    color: white;
    width: 60vw;
    height: fit-content;
    font-size: 40px;
    margin: 0% 0;
    margin-bottom: 0px;
    font-family: 'Gemunu Libre', sans-serif;

    @media screen and (max-width: 1311px) {
    font-size: 35px;
    }
    @media screen and (max-width: 920px) {
    font-size: 30px;
    }
`

export const Para2 = styled.p`
    color: #00ffff;
    width: 60vw;
    height: fit-content;
    font-size: 25px;
    font-family: 'Titillium Web', sans-serif;
    margin-bottom: 60px;
    @media screen and (max-width: 1311px) {
    font-size: 20px;
    margin-bottom: 20px;
    }
    @media screen and (max-width: 920px) {
    font-size: 18px;
    }

`

export const FaqTitle = styled.h1`
    display: absolute;
    
    font-size: 60px;
    color: white;
    margin-top: 0%;
    font-family: 'Gemunu Libre', sans-serif;
    font-weight: 100;

    @media screen and (max-width: 768px) {
    
    margin-top: 10%;
    font-size: 2em;
    
    }
`

都完成後，我们要来使用一个很好用的套件叫aos，全名animation of scrolling。

他的demo和首页在此：

https://michalsnik.github.io/aos/

这里有教安装的指令：

截图 2021-10-07 下午5.10.56.png

再来阿森是运用不同的delay来达成分批出现的效果的，看看这几行应该马上就能理解：

<div data-aos="fade-up" data-aos-delay="200"><Para><img src={feet} className ="feet" />Is there any rarity difference ?</Para></div>
          <Para2 data-aos="fade-up" data-aos-delay="600">
          There are five rarity levels in each trait category but this will not affect any of your experience on the journey. Every holder enjoys equal rights.
          </Para2>

问题的部分delay time设为200，同时回答的部分设为600，这样就可以达成在滚动时分批出现的效果了！

有兴趣的人也可以多试试看 data-aos="" 这中间的各种指令，说不定有意想不到的效果哦！