답변 4개
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
캐시 새로고침해도 변경 안 되면, 인터넷 임시파일 제거하세요.
인터넷임시파일 제거해도 변경이 안 되는 거면, 잘못된 선택자에 적용한 가능성이 큽니다.
댓글을 작성하려면 로그인이 필요합니다.
html, css, js를 일반문으로 변환하여 카피하고 상단의 settings눌러 js에 보면 cdn으로 인클루드하는 js를 표기해주어야하네요.
이건은
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
입니다.
예시입니다.
</p>
<p><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;
}</p>
<p>.snow {
height: 100%;
position: absolute;
width: 100%;
}
</style>
<script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script></a>
<script>
const Snow = (canvas, count, options) => {
const ctx = canvas.getContext("2d");
const snowflakes = [];</p>
<p> const add = (item) => snowflakes.push(item(canvas));</p>
<p> const update = () => _.forEach(snowflakes, (el) => el.update());</p>
<p> const resize = () => {
ctx.canvas.width = canvas.offsetWidth;
ctx.canvas.height = canvas.offsetHeight;</p>
<p> _.forEach(snowflakes, (el) => el.resized());
};</p>
<p> const draw = () => {
ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
_.forEach(snowflakes, (el) => el.draw());
};</p>
<p> const events = () => {
window.addEventListener("resize", resize);
};</p>
<p> const loop = () => {
draw();
update();
animFrame(loop);
};</p>
<p> const init = () => {
_.times(count, () => add((canvas) => SnowItem(canvas, null, options)));
events();
loop();
};</p>
<p> init(count);
resize();</p>
<p> return { add, resize };
};</p>
<p>const defaultOptions = {
color: "orange",
radius: [0.5, 3.0],
speed: [1, 3],
wind: [-0.5, 3.0]
};</p>
<p>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");</p>
<p> const updateData = () => {
params.x = _.random(0, canvas.offsetWidth);
params.y = _.random(-canvas.offsetHeight, 0);
};</p>
<p> const resized = () => (params.isResized = true);</p>
<p> const drawDefault = () => {
ctx.beginPath();
ctx.arc(params.x, params.y, params.radius, 0, 2 * Math.PI);
ctx.fillStyle = params.color;
ctx.fill();
ctx.closePath();
};</p>
<p> const draw = drawFn ? () => drawFn(ctx, params) : drawDefault;</p>
<p> const translate = () => {
params.y += params.speed;
params.x += params.wind;
};</p>
<p> const onDown = () => {
if (params.y < canvas.offsetHeight) return;</p>
<p> if (params.isResized) {
updateData();
params.isResized = false;
} else {
params.y = 0;
params.x = _.random(0, canvas.offsetWidth);
}
};</p>
<p> const update = () => {
translate();
onDown();
};</p>
<p> return {
update,
resized,
draw
};
};</p>
<p>const el = document.querySelector(".container");
const wrapper = document.querySelector("body");
const canvas = document.getElementById("snow");</p>
<p>const animFrame =
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;</p>
<p>Snow(canvas, 150, { color: "white" });
</script></p>
<p>답변에 대한 댓글 3개
height: 100%;
position: absolute;
width: 100%;
}
여기서 position:fixed; 이걸로 바꾸시면됩니다.
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 2개
그런데 head 부분만 아니라 페이지 전체에 내리게 하고싶은데 그 부분은 어떻게 해야할까요ㅠㅠ ?
position:fixed;
width: 100%;
height: 100%;
이렇게 주면 됩니다. ㅎ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인