What’s on our mind?
Web Inspiration Site 189건이 검색되었습니다.
//화면 설정 var scene = new THREE.Scene(); //카메라 설정 var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 1000); camera.position.z = 400; scene.add(camera); //렌더링 설정 var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setPixelRatio((window.devicePixelRatio) ? window.devicePixelRatio : 1); renderer.setSize(window.innerWidth, window.innerH..
@webs
Three.js
//화면 설정 var scene = new THREE.Scene(); //카메라 설정 var width = window.innerWidth; var height = window.innerHeight; var aspect = width / height; var camera = new THREE.PerspectiveCamera(75, aspect, 1, 1000); camera.position.set(0,0,7); //렌더링 설정 var renderer = new THREE.WebGLRenderer(); renderer.setSize(width, height); document.body.appendChild(renderer.domElement); //모양 설정 //var geometry = new THREE..
@webs
Three.js
//화면 생성 var scene = new THREE.Scene(); //카메라 설정 var width = window.innerWidth; var height = window.innerHeight; var aspect = width / height; var camera = new THREE.PerspectiveCamera(75, aspect, 1, 1000); camera.position.set(0,0,5); //렌더링 설정 var renderer = new THREE.WebGLRenderer(); renderer.setSize(width, height); document.body.appendChild(renderer.domElement); //모양 설정 var geometry = new THREE.D..
@webs
Three.js
//화면 생성 var scene = new THREE.Scene(); //카메라 설정 var width = window.innerWidth; var height = window.innerHeight; var aspect = width / height; var camera = new THREE.PerspectiveCamera(75, aspect, 1, 1000); camera.position.set(0,0,5); //렌더링 설정 var renderer = new THREE.WebGLRenderer(); renderer.setSize(width, height); document.body.appendChild(renderer.domElement); //박스 만들기 var cubeGeometry = new TH..
@webs
Three.js
const canvas = document.querySelector('#testCanvas'); const c = canvas.getContext('2d'); let canvasWidth = window.innerWidth; let canvasHeight = window.innerHeight; canvas.width = canvasWidth; canvas.height = canvasHeight; const colors = [ '#0a3948', '#426165', '#adb0bd', '#d0cdd7', ]; let mouseX; let mouseY; window.addEventListener('mousemove', e => { mouseX = e.clientX; mouseY = e.clientY; });..
@webs
Canvas
class Point { constructor(index, x, y) { this.x = x; this.y = y; this.maxY = y; this.speed = 0.05; this.currentPos = index; this.maxHeight = Math.random() * 100 + 10; } update() { this.currentPos += this.speed; this.y = this.maxY + Math.sin(this.currentPos) * this.maxHeight; } } class Wave { constructor(index, totalPoints, color) { this.index = index; this.totalPoints = totalPoints; this.color =..
@webs
Canvas
const canvas = document.querySelector("#testCanvas"); const ctx = canvas.getContext("2d"); //캔버스 크기 설정 canvas.width = window.innerWidth; canvas.height = window.innerHeight; //캔버스 위치 설정 let centerX = canvas.width / 2; let centerY = canvas.height / 2; //위치 설정 class Point { constructor(x = 0, y = 0, index = 0) { this.x = x; this.y = y; this.originY = y; this.speed = 0.05; this.index = index; this.p..
@webs
Canvas
class Circle { constructor({ x = 0, y = 0, radius = 10, ctx, randomSize, color }) { this.ctx = ctx; this.color = color; this.x = x; this.y = y; this.radius = radius; this.randomSize = randomSize; this.angle1 = 0; this.angle2 = 0; this.circleStartAngle = 0; this.circleEndAngle = Math.PI * 2; this.counterClockWise = false; } update(time, index) { this.angle1 += 0.02; this.angle2 += 0.06; this.ctx...
@webs
Canvas
//three를 선언한다. const scene = new THREE.Scene(); //카메라를 설정한다. const camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 7, 10); //렌더링을 설정하고 안티 에일리어싱을 true로 하여 계단 현상을 막아준다. const renderer = new THREE.WebGLRenderer({ antialias: true }); // 사이즈를 설정하고 body 태그 자식으로 설정 renderer.setSize(window.innerWidth, window.innerHeight); document.body...
@webs
Three.js
2016년에는 정말 다양한 디자인 도구들이 시장에 등장했고, 기존 도구들도 속속 새로운 기능들을 선보였습니다. 디자이너들은 도구들의 풍족함과 그에 수반되는 선택의 어려움을 모두 느꼈을 것이라는 생각이 드네요. 2017년을 맞이하는 시점에서 내년에 더욱 더 기대가 되는 디자인 도구들을 선정해 보았습니다. 디자이너 커뮤니티에서 자주 언급되는 것들을 위주로 선정했어요. 물론 이 리스트에 포함되지 않은 도구들도 많을 것이라고 생각합니다. 가볍게 참고한다는 느낌으로 읽어주시면 감사하겠습니다. ........ 원문보기
@webs
카테고리 없음
코딩 할 때 제일 많이 쓰는 CSS는 font-size?!
마크업 코딩 할 때 CSS를 가장 많이 쓰는건 Font-size입니다. 마이크로소프트 web platform의 의하면 1위는 font-size 2위는 color 3위는 margin이네요. CSS 속성 487개 중에 현재 가장 많은 사용량을 보이는게 font-size 입니다. 이 CSS 사용 데이터는 2,602,016 페이지의 Bing-powered 분석한 자료이며, 이 프로세스는 브라우저에 대해서 올바르게 표현된 CSS 속성을 검색한 결과입니다. Microsoft https://developer.microsoft.com font-size의 속성 값들은 분석해 보면 속성값들이 여러가지 있지만 px를 제일 많이 사용하고 있습니다. 의외뢰 %도 많이 쓰고 있네요. 저는 거의 써본적이 없는 것 같은데~ 아무래도..
@webs
카테고리 없음
아이디어를 시각화하고 개발에 도움을 주는 마인드 맵 도구입니다. 마인드 맵은 마치 그림을 그리는 듯한 효과로 자기의 생각과 방법을 정리 하는 방법 중의 하나입니다. 현재는 마인드 맵 프로그램도 많이 존재하고 효율성이 높은 프로그램을 알아보겠습니다. 마인드마이스터(MindMeister) www.mindmeister.com Basic : 무료 - 개인~비지니스 : 한달에 4.99$ ~ 12.49$ MindMeister는 아이디어를 시작적으로 구성, 개발하고 공유할 수 있는 온라인 마인드맵 도구입니다. MindMeister 모바일 앱에서도 작동이 되며, 여러가지 테마를 선택하여 작업할 수 있습니다. 마인드 맵을 공유하고, 프레젠테이션 기능도 할 수 있습니다. 코글(Coggle) https://coggle.it..
@webs
카테고리 없음
애니메이션을 자유롭게 줄 수 있는 제이쿼리 플러그인입니다. anime.js는 구현을 쉽게 할 수 있도록 제이쿼리입니다. 도큐멘트 역시 보기 좋게 깔끔하게 되어 있어 활용도가 높을 것 같습니다. anime.js See the Pen Anime.js v2.0 logo animation by Julian Garnier (@juliangarnier) on CodePen.
@webs
카테고리 없음
우선 모바일은 데스크톱에 비해 화면의 크기가 작습니다. 데스크톱은 의자에 앉아서 실내에서 사용합니다. 큰 모니터에서 많은 정보를 탐색하고 업무를 봅니다. 포토샵 같은 몰입형 앱의 다양한 기능을 몇 시간 동안 집중해서 사용할 수 있습니다. 그에 비해 모바일은 야외에서 또는 이동 중에 사용합니다. - 횡단보도를 걷다 보면 스마트폰을 보고 걷는 사용자를 자주 볼 수 있습니다. - 사용자는 작은 화면의 스마트 폰으로 SNS를 사용하고 뉴스를 보거나 게임을......... 이 글은 여기서 가져왔습니니다. 원문을 참고해주세요.
@webs
카테고리 없음
지난 2017년 동안 가장 있기 있는 퍼블리셔 툴에 대해서 소개하겠습니다. 적합한 퍼블리셔 툴의 사용은 생산성을 높일 수 있는 좋은 방법입니다. Introduction 퍼블리셔에게 있어 코딩 프로그램은 중요합니다. 편리성, 속도, 기능에 따라 코딩에는 많은 차이가 납니다. 예전에 많이 썻던 에디터플러스, 노트패드, 드림위버를 제외한 현재 많이 사용하고 있는 퍼블리셔 에디터 프로그래에 대해서 알아보겠습니다. Choice! 만약 당신이 설치는 귀찮아도 커스터마이징이 가능하고 쓰기 편하고 빠른 에디터를 원한다면 sublime을 추천합니다. 만약 당신이 편한 사용과 깔끔한 인터페이스를 원한다면 braket 및 atom을 추천합니다. 만약 당신이 설치 없이 사용 가능한 브라우저 에디터를 원한다면 codeanywh..
@webs
카테고리 없음
지난 2017년 동안 가장 있기 있는 디자인 툴에 대해서 소개하겠습니다. 적합한 디자인 툴의 사용은 생산성을 높일 수 있는 좋은 방법입니다. Introduction 우리는 이미 가장 인기있고 현대적인 와이어프레임 및 프로토타입 툴을 사용하고 있습니다. 이제는 한단계 더 나아가 실제 디자인을 만드는데 도움이 되는 툴과 디자인 프로세스를 중심으로 살펴볼 때 입니다. 숙련된 디자이너 또는 초보 디자이너든 가장 중요한 건 자기한테 맞는 디자인을 툴을 사용하여 효율성을 높이는 것입니다. Choice! 만약 당신이 Mac OS를 사용하고 UI디자인에 관심이 많다면 Sketch를 추천합니다. 만약 당신이 디자인과 프로토타입을 같이 하고 싶다면 Adobe XD를 추천합니다. 만약 당신이 디자이너가 없어 실시간 협업 기..
@webs
카테고리 없음
Cartoons AppCartoons AppCartoons AppCartoons AppCartoons AppCartoons AppCartoons AppCartoons AppCartoons AppCartoons AppCartoons AppCartoons AppCartoons App Cartoons AppCartoons AppCartoons AppCartoons AppCartoons AppCartoons AppCartoons AppCartoons AppCartoons AppCartoons AppCartoons AppCartoons AppCartoons App Cartoons AppCartoons AppCartoons AppCartoons AppCartoons AppCartoons AppCartoons App..
@webs
카테고리 없음