jQuery 화면전환 효과 참고 사이트

https://tympanus.net/Development/PageLoadingEffects/index6.html

 

Page Loading Effects | Demo 6

To start the page loading animation, click the following link: Show Page Loader If you enjoyed this demo you might also like: Fullscreen Overlay Effects Shape Hover Effect

tympanus.net

https://tympanus.net/Development/PageTransitions/

 

A Collection of Page Transitions

A collection ofPage Transitions A collection ofPage Transitions A collection ofPage Transitions A collection ofPage Transitions A collection ofPage Transitions A collection ofPage Transitions

tympanus.net

https://github.com/codrops/PageTransitions

 

codrops/PageTransitions

A showcase collection of various page transition effects using CSS animations. - codrops/PageTransitions

github.com

 

Posted by 홍반장水 홍반장水
switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
     day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
}

[javascript] Switch case else

switch(expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

 

 

Posted by 홍반장水 홍반장水

.

https://jsfiddle.net/user/mill01/fiddles/

 

kim hongwan's Fiddles - JSFiddle - Code Playground

 

jsfiddle.net

 

Posted by 홍반장水 홍반장水

Project Deadline - SVG animation with CSS3

 

#2 - Project Deadline - SVG animation with CSS3

...

codepen.io

 

.

Posted by 홍반장水 홍반장水
TAG animation, SVG

Build and edit SVGs in the browser http://jxnblk.com/paths

 

Paths

 

jxnblk.com

 

SVG Path Commands

The path element is used to create complex shapes based on a series of commands. Each command begins with a letter and is followed by numbers representing x/y coordinates according to the SVG’s viewBox attribute. Uppercase letters represent absolute coordinate movements, and lowercase letters represent relative movements. For simplicity, the Paths app only supports absolute movements.

For a more in-depth introduction, see the MDN Path Tutorial.

M x y

The Moveto command moves the current point without drawing. Paths must begin with a Moveto command to determine where the drawing starts.

L x y

The Lineto command draws a straight line from the previous command to its x/y coordinates.

H x

The Horizontal Lineto command draws a horizontal line.

V y

The Vertical Lineto command draws a vertical line.

C x1 y1 x2 y2 x y

The Curveto command draws a cubic Bézier curve with control points for the beginning and end of the curve. The final x/y coordinate pair determines where the line ends.

S x2 y2 x y

The Shorthand/Smooth Curveto command draws a cubic Bézier curve with a control point for the end of the curve. The first control point is a reflection of the control point from the previous command.

Q x1 y1 x y

The Quadratic Bézier Curveto command draws a quadratic Bézier curve with a single control point for both points on the curve.

T x y

The Shorthand/Smooth Quadratic Bézier Curveto command draws a quadratic Bézier curve, using a reflection of the previous command’s control point.

Z

The Closepath command draws a line to the intial point to close a path.

A rx ry x-axis-rotaion large-arc-flag sweep-flag x y

Note: The Arc command is currently not supported in the Paths app

The Elliptical Arc command draws an elliptical arc to the x/y coordinates.

How-To Use the App

Unlike other vector drawing applications, Paths has no tool palette or modes. Instead it exposes the path command syntax in a reactive user interface.

  • Use the form to the right to manually adjust the type and parameters for each command.
  • Add new points with the button below the form.
  • Remove points with the × button next to the command.
  • Click to select points on the canvas.
  • Click and drag to move points.
  • Use the arrow keys to nudge points.
  • Click anywhere on the canvas to add a new point after the selected point.
  • Click the blue × button to the right of the command syntax tooltip to remove a point.
  • Click outside of the canvas to deselect all points.
  • Use the toolbar below the canvas to toggle the following:
    • Grid visibility
    • Snap to grid
    • Path preview mode
  • Use the Download link to save the SVG.
  • Use the + & - buttons to zoom in and out.
  • Copy and paste the URL (along with the parameters) to share links with others.

 

Posted by 홍반장水 홍반장水

 promise  개체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.

Promise는 프로미스가 생성될 때 꼭 알 수 있지는 않은 값을 위한 대리자로, 비동기 연산이 종료된 이후의 결과값이나 실패 이유를 처리하기 위한 처리기를 연결할 수 있도록 합니다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하지는 않고, 대신 프로미스를 반환해서 미래의 어떤 시점에 결과를 제공합니다.

Promise는 다음 중 하나의 상태를 가집니다.

  • 대기(pending): 이행하거나 거부되지 않은 초기 상태.
  • 이행(fulfilled): 연산이 성공적으로 완료됨.
  • 거부(rejected): 연산이 실패함.

대기 중인 프로미스는 값과 함께 이행할 수도, 어떤 이유(오류)로 인해 거부될 수 있습니다. 이행이나 거부될 때, 프로미스에 연결한 처리기는 그 프로미스의 then 메서드에 의해 대기열에 오릅니다. 이미 이행했거나 거부된 프로미스에 연결한 처리기도 호출하므로, 비동기 연산과 처리기 연결 사이에 경합 조건race condition은 없습니다.

Promise.prototype.then()  Promise.prototype.catch() 메서드의 반환 값은 다른 프로미스이므로, 서로 연결할 수 있습니다.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

 

Promise

Promise 개체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.

developer.mozilla.org

https://jsfiddle.net/mill01/x3n274tq/

 

고급 예제 - JSFiddle

 

jsfiddle.net

 

 

Posted by 홍반장水 홍반장水

생활코딩 Node.js 재생목록 : https://www.youtube.com/playlist?list=PLuHgQVnccGMA9QQX5wqj6ThK7t2tsGxjm

 

WEB2 - Node.js - YouTube

 

www.youtube.com

생활코딩 Node.js 튜토리얼 & 소스코드 : https://opentutorials.org/module/3549

초보자를 위한 Node.js 200제

http://www.infopub.co.kr/new/include/detail.asp?sku=05000261

 

[정보문화사] IT 도서의 새로운 패러다임

지은이 | 김경록백엔드 웹 프론트엔드 개발을 주로 하고 있습니다. Spring Boot + JPA를 이용한 크롤러를 개발하고 있으며, 이전에는 React + Webpack을 이용한 웹 프론트엔드 개발을 하였습니다. ‘경록김의 뷰티플 프로그래밍’과 Udemy 스프링 강좌를 하고 있으며, 패스트캠퍼스에서 프로그래밍 강사로 활동하고 있습니다.지은이 | 정지현IBM Korea Watson and Cloud Platform팀에서 Cognitive Technical

www.infopub.co.kr

샘플소스 다운로드 : http://www.infopub.co.kr/new/down1/05000261.zip

WebStorm : https://www.jetbrains.com/webstorm/

 

Posted by 홍반장水 홍반장水

https://a11y.gitbook.io/graphics-aria/svg-graphics

 

SVG 그래픽

 

a11y.gitbook.io

SVG는 많은 웹 접근성 이점을 제공하는 강력한 웹 기술입니다. 접근성을 염두에 두고 구조화 된 방식으로 만들 수 있기 때문에 SVG를 사용하여 콘텐츠용 이미지, 그래프를 만듭니다. 또한 SVG는 모든 최신 데스크톱 및 모바일 브라우저에서 지원됩니다.

Posted by 홍반장水 홍반장水
TAG gitbook, SVG

JavaScript animation engine https://animejs.com

 

anime.js

Javascript animation engine

animejs.com

 

https://github.com/juliangarnier/anime

 

juliangarnier/anime

JavaScript animation engine. Contribute to juliangarnier/anime development by creating an account on GitHub.

github.com

 

Posted by 홍반장水 홍반장水

길찾기 알고리즘 : Pathfinding.js https://github.com/qiao/PathFinding.js

A comprehensive path-finding library for grid based games.

이 프로젝트의 목적은 웹 게임에 쉽게 통합 될 수있는 경로 찾기 라이브러리를 제공하는 것입니다. Node.js 또는 브라우저에서 실행될 수 있습니다.

온라인 데모와 함께 알고리즘 실행 방법을 보여줍니다. (길 찾기 속도가 데모에서 느려집니다)

이 프로젝트는 2D 공간에 대한 경로 찾기 알고리즘 만 제공합니다. 3D 환경에서 작업해야한다면 @ schteppe의 포크를 사용할 수 있습니다.

PathFinding.js에 대한 새로운 문서가 작성되었습니다. 여기에서 읽을 수 있습니다. 이것은 매우 초기 단계이며 완벽하지 않으므로 실수로 눈을 뜨고 주저하지 말고 풀 요청을 열어 주면됩니다.

예제 : https://qiao.github.io/PathFinding.js/visual/

 

PathFinding.js

 

qiao.github.io

 

Posted by 홍반장水 홍반장水