2일차 사진 갤러리 로직 및 CSS 완료

Modal.js

framer-motion 라이브러리를 이용하여 이미지가 opacity 0->1 으로 변화하고 상단에서 아래로 떨어지도록 했다.

import React from "react";
import styled from "styled-components";
import { motion } from "framer-motion";
import Chatroom from "./Chatroom";

const Modal = ({ selectedImg, setSelectedImg, user }) => {
  const handleClick = (e) => {
    // console.log(e.target.classList);
    if (e.target.classList.contains("backdrop")) {
      setSelectedImg(null);
    }
  };

  return (
    <Backdrop
      className="backdrop"
      onClick={handleClick}
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      // transition={{ duration: 1 }}
    >
      <MainImg
        src={selectedImg.url}
        alt="enlarged img"
        initial={{ y: "-100vh" }}
        animate={{ y: 0 }}
      />
      {user ? <Chatroom user={user} selectedImgId={selectedImg.id} /> : null}
    </Backdrop>
  );
};

 

도움 받은 사이트

motion library with react: www.framer.com/motion/

visible effect: stackoverflow.com/questions/3331353/transitions-on-the-css-display-property

Scroll effect: www.w3schools.com/howto/tryit.asp?filename=tryhow_js_scroll_to_top

Smooth scroll:

www.w3schools.com/howto/tryit.asp?filename=tryhow_css_smooth_scroll

stackoverflow.com/questions/55472649/how-to-change-scroll-behavior-e-g-speed-acceleration-on-website

사진 크롤링 다운: hogni.tistory.com/81