이 프로젝트를 구축하여 첫 번째 개발 업무를 얻습니다#3: 플래시 효과가 있는 Instagram 구독자
안녕하십니까, 극객들!오늘 우리는 아주 좋은 물건을 만들 것이다.나는 이것에 대해 매우 흥분했다.이것은 인스타그램 구독원입니다. 당신이 원하는 누구든지 (그들의 개인 자료가 공개되면 잠시 후에 자세히 소개합니다) 손전등 효과를 추가할 수 있습니다.우리의 마우스는 손전등이 어디에 있는지 표시할 것이다.그럼 니가 미행하는 것 같애.이게 인스타 용도!너무 완벽해!
우리는 HTML, CSS, 순수 Javascript로 그것을 구축할 것이다.
1단계: HTML, CSS 및 Javascript 파일 만들기
HTML 파일, CSS 파일 및 Javascript 파일을 만듭니다.CSS와 Javascript를 HTML에 추가해야 합니다!(나는 모든 강좌에서 너에게 일깨워 줄 것이다. 왜냐하면 나는 항상 이 일을 하는 것을 잊어버리기 때문이다.)
너의 HTML은 좀 이렇게 보일 것이다.
<html>
<head>
<title>Instagram photos under a flashlight</title>
<script type="text/javascript" src="actions.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>
2단계: 인스타그램에 사진 요청
공용 Instagram API는 사용하기 쉬우므로 어떤 페이지에서든 사진을 얻을 수 있습니다!!여기에는 프로필 페이지와 레이블이 포함됩니다.API는 공공이기 때문에 우리는 개발자 계정을 만들 필요가 없지만, 이것은 우리가 신분 검증이 없어서 개인 계정에 접근할 수 없다는 것을 의미한다.URL 끝에
?__a=1만 추가하면 됩니다.저는 이 강좌에서 제 인스타그램 개인 정보 링크를 사용할 것입니다. 하지만 마음대로 사용하세요!https://www.instagram.com/catmcgeecode/?__a=1
await을 사용할 수 있습니다. 이것은 틴의 설명에 따라 실행됩니다. - 우리는 약속이 실현되거나 거절될 때까지 기다릴 것입니다. (즉, 인스타그램에서 유효한 응답을 받거나 허락되지 않음을 알릴 것입니다.) 그리고 다음 작업을 계속할 것입니다.비동기 함수 here.에 대한 추가 정보자바스크립트의
fetch API을 사용합시다. 이것은 데이터를 요청하는 가장 간단하고 가장 좋은 방법입니다.계속해서, 이fetch 문장을 비동기 함수에 넣습니다.
async function getInstaPictures() {
const response = await fetch("https://www.instagram.com/catmcgeecode/?__a=1");
}
const jsonData = await response.json();
console.log(또는) 응답하고 실행하면 우리가 원하는 내용을 볼 수 있고 응답 중 어디에서 사진을 찾을 수 있는지 알 수 있습니다.함수 호출을 잊지 마세요!async function getInstaPictures() {
const response = await fetch("https://www.instagram.com/catmcgeecode/?__a=1");
const jsonData = await response.json();
console.log(jsonData)
}
getInstaPictures()
자세히 살펴보면 다음과 같은 방법으로 이미지 URL을 탐색할 수 있습니다.
jsonData → graphql → user → edge_owner_to_timeline_media → edges그리고 edges 내부에 여러 개의 node이 있습니다. 각 node은 display_url을 포함하고 있습니다. 이것은 우리가 필요로 하는 것입니다.따라서
node의 각 edges을 훑어보고 표시 URL을 가져와야 합니다.const pictures = jsonData.graphql.user.edge_owner_to_timeline_media.edges;
for(i = 0; i < pictures.length ; i++) {
// here we will show the images on the website
}
3단계: 사이트에 사진 표시
데이터를 훑어볼 때마다 HTML에 URL을 이미지 원본으로 표시하기를 원합니다.
따라서 Javascript를 사용하여 이미지 요소 (
document.createElement('img')) 를 만들고 각 교체에 node.display_url 을 가져와 새 이미지 요소의 원본으로 설정한 다음 이미지 요소를 HTML에 추가합니다.for(i = 0; i < pictures.length ; i++) {
let img = document.createElement('img');
img.src = pictures[i].node.display_url;
document.body.appendChild(img);
}
이 모든 것을 함께 놓고 브라우저에서 열면 어떤 사람의 인스타그램 페이지에서 온 모든 사진을 볼 수 있습니다!만약 그것이 여전히 당신에게 어울리지 않는다면,
스타일링을 살짝 바꿔서 예뻐 보여요.영상에서, 나는 방금 폭을 350px로 변경했다. 아래 그림과 같이, 당신은 flexbox 스타일을 사용해서 그것을 매우 좋아 보일 수 있다.
body img {
width: 350px;
}
4단계: 손전등 효과 만들기
이 단계에서 우리는 사진을 인스타그램 사진에 손전등이 있는 것처럼 보일 것이다. 그러나 우리는 아직 그것을 움직일 수 없다.우리는 투명한 원을 제외하고는 모든 것을 검은색으로 만들어야 한다.그럼 우리 CSS를 봅시다!
모든 내용을 검은색으로 만들기 위해 루트 요소(HTML)를 검은색으로 만듭니다.
root에서 위조 요소 (learn more here) 를 사용하고 이 요소가 전체 화면을 덮어씁니다.content attribute along with ::before 은 우리가 이 점을 실현하는 데 도움을 주었다.:root:before {
cursor: none;
content: '';
width: 100%;
height: 100%;
position: fixed;
}
none으로 설정합니다.실행 코드.아무 일도 없었어요.
마술은 다음 부분에서 발생한다. -
radial-gradient.(부언: 아일랜드 발음으로 이 말을 하는 것은 정말 재미있다.)레이디얼 그래디언트를 사용하면 원점에서 그래디언트를 시작하는 그래디언트 형태를 만들 수 있습니다.이 모양은 둥글 수 있다!이거 멋있어.따라서 이곳의 생각은 우리의 배경은 지름 방향의 사다리꼴이고 원색은 검은색이며 우리의 형상은 투명할 것이다.점차적인 변화는 그것에게 희미한 외관을 줄 것이다. 이것은 완벽한 손전등이다.
추가: root: 이전:
background: radial-gradient(
circle 10vmax at var(--cursorX) var(--cursorY),
rgba(0,0,0,0),
rgba(0,0,0,1)
)
circle - 모양을 원형으로 설정합니다.말하지 않아도 안다.10vmax-vmax는 모두 상대적인 것에 관한 것이다.1vmax = 화면의 1%입니다.따라서 우리의 손전등의 크기는 화면의 약 10퍼센트이다.at var(--cursorX) var(--cursorY)-이것이 바로 일이 매우 좋아진 곳이다.이것은 원이 있는 위치의 x와 y 좌표를 설정합니다. 그러나 이것은 같지 않기 때문에 (우리의 손전등은 마우스를 따라 이동합니다.) 변수를 전달하기를 원합니다.나중에 Javascript에서 이 변수를 가져옵니다.첫 번째
rgba(0,0,0,0) - 투명도(마지막 0은 불투명도)이며 이미지 내부의 색상입니다.두 번째
rgba(0,0,0,1)- 이것은 검은색입니다. 이것은 우리의 원형 점차적인 변화가 앞으로 나아갈 색깔입니다. (예를 들어 - 배경의 나머지 부분!)차갑다만약 네가 이 코드를 실행한다면, 너는 칠흑 같은 것을 볼 수 있을 것이다.너는 왜 그런지 알아맞힐 수 있니?이것은 우리가 아직
--cursorX과 --cursorY 변수를 설정하지 않았기 때문이다.CSS에 설정하면 Javascript에 들어가기 전에 제대로 작동하는지 확인할 수 있습니다.CSS는 다음과 같습니다.
:root:before {
--cursorX = 50vw;
--cursorY = 50vh;
cursor: none;
content: '';
width: 100%;
height: 100%;
position: fixed;
background: radial-gradient(
circle 10vmax at var(--cursorX) var(--cursorY),
rgba(0,0,0,0),
rgba(0,0,0,1)
)
}
5단계: 손전등 이동
--cursorX 및 --cursorY 변수를 마우스를 이동할 때마다 마우스 위치로 설정할 때입니다.Javascript를 사용하는 것은 매우 간단합니다.Javascript 파일을 열고 마우스를 이동할 때 실행되는 함수를 만듭니다.
document.addEventListener('mousemove', update)
function update(e) {
}
e은 이벤트를 대표합니다. 마우스 좌표의 위치를 포함하여 다양한 처리 프로그램이 있습니다!우선, 이 함수는 마우스의 X와 Y 좌표를 읽어야 한다.이것은 매우 간단하다. - 너는 e.
clientX과 e.clientY을 사용할 수 있다.let x = e.clientX;
let y = e.clientY;
document.documentElement.style.setProperty('--cursorX', x + 'px');
document.documentElement.style.setProperty('--cursorY', y + 'px');
여러분 지금 같이 있어요!
document.addEventListener('mousemove', update)
function update(e) {
let x = e.clientX;
let y = e.clientY;
document.documentElement.style.setProperty('--cursorX', x + 'px');
document.documentElement.style.setProperty('--cursorY', y + 'px');
}
이제 네 차례야!
나는 모든 강좌에서 이 점을 강조했다.이 점을 충분히 이용하기 위해서는 그 기초 위에서 뭔가를 구축해야 한다(그리고 인터넷을 끊임없이 검색해서 어떻게 하는지 알아야 한다!)나는 네가 창조적인 생각을 가지고 있다고 확신하지만, 만일 네가 없다면, 여기에 약간의 생각이 있다.
Reference
이 문제에 관하여(이 프로젝트를 구축하여 첫 번째 개발 업무를 얻습니다#3: 플래시 효과가 있는 Instagram 구독자), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/catmcgeecode/get-your-first-dev-job-by-building-these-projects-3-instagram-feed-with-a-flashlight-effect-1d81텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
