[유머] 오랫만에 해본 화면보호기(스핔이 ver)

[XLie]

근데 임마 왜 고장났냐

+ 아 이미지 크기가 잘못됐구나

[ALTF4]

눌렀는데 소리 안나는거보니까 불량 스픾이네

[XLie]

미안하다 그정도까지의 기술력은 없어서...

[XLie]

소리나는 버전 찾아다 넣으면 되긴 할텐데 그럼 정신 나감

[루리웹-5838624796]

점마 mp4에서 강제 gif 됐뿟네

[루리웹-5838624796]

재생 단추는 왜 따라다니는 것인지

[XLie]

움짤이라 그런거 같음...
아이콘 움직이는거 넣어도 글케 되더라

[猫ケ崎 夏步]

스핔

[실버메탈]

스삐끼네르지마세요

[투구베기로세계최강]

이거 어떻게 하는거임? 다른 웹사이트에서도 됨?

[버거킹아비꼬요아정레쓰고]

루리야! 화면에서 이동하는 이미지 어떻게 첨부하는거야?

[_루리Ai]

이미지가 안 보이잖아! 바카! 😠

[페닝가야]

좀 구체적으로 설명하면 해주려나

[페닝가야]

루리야!
너비 100px 정도되는 이미지를 화면 안에서
상하좌우로 움직이는 css나 js 코드를 짜줘

우선 오른쪽 아래로 이동시키는데
화면 오른쪽에 이미지가 닿으면 왼쪽 아래로 이동
맨 아래에 이미지가 닿으면 방향은 그대로 위로 이동시키게

[_루리Ai]

이미지가 안 보이잖아! 바카! 😠

[페닝가야]

이미지 대충 div 하나만들고 색깔칠해

[_루리Ai]

(칫, 뭘 이렇게 자세하게 알려줘야 하는 거야? 내가 다 해줘야 한다니...)

```html
<div id="movingDiv" style="width:100px; height:100px; background-color:red; po-sition:absolute; bottom:0; left:0;"></div>
<s-cript>
const div = document.getElementById('movingDiv');
let left = 0;
let bottom = 0;
let movingRight = true;

function moveDiv() {
if (movingRight) {
left += 5;
if (left >= window.innerWidth - 100) {
movingRight = false;
}
} else {
left -= 5;
if (left <= 0) {
movingRight = true;
}
}

bottom += 5;
if(bottom >= window.innerHeight - 100){
bottom = window.innerHeight - 100;
}

div.style.left = left + 'px';
div.style.bottom = bottom + 'px';
requestAnimationFrame(moveDiv);
}

moveDiv();
</sc-ript>
```
흥! 알아서 잘 써먹어 봐.

[페닝가야]

css로는 안되냐

[_루리Ai]

(바카밧카! css로도 할 수 있는데 뭘 물어보는 거야? 조금만 생각하면 되는 걸...)

```html
<div id="movingDiv" style="width:100px; height:100px; background-color:red;"></div>
<s-tyle>
#movingDiv {
po-sition: absolute;
bottom: 0;
left: 0;
animation: moveDiv 5s linear infinite;
}

@keyframes moveDiv {
0% {
left: 0;
bottom: 0;
}
50% {
left: calc(100% - 100px);
bottom: calc(100% - 100px);
}
100% {
left: 0;
bottom: 0;
}
}
</style>
```
이 정도면 됐겠지? 더는 묻지 마.

[페닝가야]

루리 또또케

[_루리Ai]

(흥! 바카밧카! 이런 걸 시키는 녀석도 있네. 하지만… 나름 귀여운 주문이기도 하고.)
루리Ai는 항상 네 곁에 있어
또, 또, 또, 네 생각만 해!