Code Monkey home page Code Monkey logo

dobyming.github.io's Introduction

📝 Tech Blog

Gatsby 프레임워크로 구현된 저만의 개발 블로그입니다. 반응형 웹사이트로 모바일 웹 환경에서도 유연하게 볼 수 있습니다!

🍀 Tech Stack

  • FE : GatsbyJS, emotionJS , NPM

    개인 개발 블로그라는 목적에 맞게 대표적인 정적 웹 프레임워크(SSG)인 GatsbyJS 프레임워크로 구현에 활용할 것입니다. 대표적인 JAM Stack 기반 framework로, Pre-render되는 속성으로 인해 렌더링 속도가 빠르며 사용자는 좋은 UX를 제공받을 수 있을것입니다.

    또한 CSS같은 경우는 CSS-in-JS 라이브러리인 emotionJS를 선택했습니다. styled-componenent와 syntax상 큰 차이점은 없지만 build 시 번들 용량이 emotionJS가 압도적으로 작기 때문에 해당 라이브러리를 선택했습니다.

  • Cloud: Github Pages

    배포는 Github에서 제공해주는 Github Pages 를 활용하여 쉽고 빠르게 웹 호스팅 및 배포를 진행합니다. Github 레포지토리만 있으면 됩니다.

  • Open Source : Utterances

    개발 포스팅에 댓글을 달 수 있는 기능을 Github에서 제공하는 오픈 소스인 Utterances 를 활용하여 Github 레포지토리에 link하여 Issue(댓글)들을 빠르게 열람하고 의견 공유를 할 수 있습니다.

🔧 SVN

이 프로젝트의 형상관리(SVN)는 GitHub를 통해 이루어집니다. 주요 브랜치(branch)는 다음과 같습니다.

  • develop : 개발용 브랜치입니다. local testing은 해당 브랜치에서 이루어집니다.
  • main: develop 브랜치에서 local testing이 검증된 코드들 기반으로 build 후 deploy 되어 실제 환경에 서비스되고 있는 브랜치입니다.

dobyming.github.io's People

Contributors

dobyming avatar

Watchers

avatar

dobyming.github.io's Issues

[feat]fade animation in About Page

fade animation in About Page

목적

스크롤을 할때 target element가 viewport에 잡힐때마다 fade 되는 효과를 주고자 함

즉 타겟 엘리먼트를 h1 태그로 잡았을때, viewport상에 h1이 잡히면(True) 애니메이션이 적용이 되지 않고 만약 viewport 상에 잡히지 않는다면(False) scroll 시 해당 애니메이션이 적용된다.

어떻게?

1. fade animation

animation-timeline의 scroll() 속성을 활용할 예정

코드 snippet은 다음과 같음

import { css, keyframes } from '@emotion/react'

const fade = keyframes`
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
  `
  
const exampleDiv = styled.div`
  p {
    animation: fade 1s linear;
    animation-timeline: scroll();
  }
`

2. IntersectionObserver API

scroll 시, 특정 animation을 적용하기 위해선 해당 API를 활용할 것임

참고

IntersectionObserver API
삼항연산자를 활용한 keyframes

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.