아보카도 갠홈 배경 css

아보카도 갠홈 배경 css

QA

아보카도 갠홈 배경 css

본문

아보카도로 갠홈을 만드는 중인데

https://codepen.io/ivanodintsov/pen/KVgwRG

해당 소스를 사용하고 싶은데 어디에 어떻게 적용해야할지 감이 안잡힙니다ㅠㅠ ;;; 

 

이 질문에 댓글 쓰기 :

답변 4

https://www.haenong.kr/   요렇게요 ?

html, css, js를 일반문으로 변환하여 카피하고 상단의 settings눌러 js에 보면 cdn으로 인클루드하는 js를 표기해주어야하네요.

이건은 

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
입니다.

 

예시입니다.


<div class="snow-wrapper">
        <canvas class="snow" id="snow"></canvas>  
</div>
<style>
body {
    margin: 0;
    padding: 0;
}
.snow-wrapper {
  background-color: #111;
  height: 50vh;
  width: 100vw;
}
.snow {
  height: 100%;
  position: absolute;
  width: 100%;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script>
const Snow = (canvas, count, options) => {
  const ctx = canvas.getContext("2d");
  const snowflakes = [];
  const add = (item) => snowflakes.push(item(canvas));
  const update = () => _.forEach(snowflakes, (el) => el.update());
  const resize = () => {
    ctx.canvas.width = canvas.offsetWidth;
    ctx.canvas.height = canvas.offsetHeight;
    _.forEach(snowflakes, (el) => el.resized());
  };
  const draw = () => {
    ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
    _.forEach(snowflakes, (el) => el.draw());
  };
  const events = () => {
    window.addEventListener("resize", resize);
  };
  const loop = () => {
    draw();
    update();
    animFrame(loop);
  };
  const init = () => {
    _.times(count, () => add((canvas) => SnowItem(canvas, null, options)));
    events();
    loop();
  };
  init(count);
  resize();
  return { add, resize };
};
const defaultOptions = {
  color: "orange",
  radius: [0.5, 3.0],
  speed: [1, 3],
  wind: [-0.5, 3.0]
};
const SnowItem = (canvas, drawFn = null, opts) => {
  const options = { ...defaultOptions, ...opts };
  const { radius, speed, wind, color } = options;
  const params = {
    color,
    x: _.random(0, canvas.offsetWidth),
    y: _.random(-canvas.offsetHeight, 0),
    radius: _.random(...radius),
    speed: _.random(...speed),
    wind: _.random(...wind),
    isResized: false
  };
  const ctx = canvas.getContext("2d");
  const updateData = () => {
    params.x = _.random(0, canvas.offsetWidth);
    params.y = _.random(-canvas.offsetHeight, 0);
  };
  const resized = () => (params.isResized = true);
  const drawDefault = () => {
    ctx.beginPath();
    ctx.arc(params.x, params.y, params.radius, 0, 2 * Math.PI);
    ctx.fillStyle = params.color;
    ctx.fill();
    ctx.closePath();
  };
  const draw = drawFn ? () => drawFn(ctx, params) : drawDefault;
  const translate = () => {
    params.y += params.speed;
    params.x += params.wind;
  };
  const onDown = () => {
    if (params.y < canvas.offsetHeight) return;
    if (params.isResized) {
      updateData();
      params.isResized = false;
    } else {
      params.y = 0;
      params.x = _.random(0, canvas.offsetWidth);
    }
  };
  const update = () => {
    translate();
    onDown();
  };
  return {
    update,
    resized,
    draw
  };
};
const el = document.querySelector(".container");
const wrapper = document.querySelector("body");
const canvas = document.getElementById("snow");
const animFrame =
  window.requestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.msRequestAnimationFrame;
Snow(canvas, 150, { color: "white" });
</script>

1.

html과 script는 body요소 안에, 

css는 head 요소 안에 넣으시면 될 듯.

 

2.

외부스타일이나 외부스크립트 형태로 넣으실 경우, 절대주소 형태로 넣으시면 될 듯.

https://homzzang.com/b/html-166

 

3.

혹시나 요소가 겹치는 경우 발생 시, 아래 글들 참고해서 z-index 값 조정하시면 됩니다.

https://homzzang.com/b/css-113

 

4.

글자색 변경이 필요한 경우, 아래 글 참고해서 선택자 찾아 color 값 조정하세요.

https://homzzang.com/b/css-251

 

5. 

css 변경 해줬는데, 반영이 안 되는 경우 아래 게시글 참고해 캐시 새로고침 해주세요.

https://homzzang.com/b/css-248

캐시 새로고침해도 변경 안 되면, 인터넷 임시파일 제거하세요.

인터넷임시파일 제거해도 변경이 안 되는 거면, 잘못된 선택자에 적용한 가능성이 큽니다.

 

답변을 작성하시기 전에 로그인 해주세요.
전체 10,639
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT