My FWA Certificates!

awards | March 11, 2014 | Comment   


 
http://www.thefwa.com/gallery/

DESK poster in Google Campus

cm-log | February 24, 2014 | Comment   

Improve masking effect performance on mobile devices

lab | February 12, 2014 | 1 Comment   

If you want to make a masking animation on HTML, usually can make using height transition and overflow: hidden.
It’s fine on your desktop browser, but it’s not smooth on mobile devices.
The performance of animating some elements (such as width, height, left, top and margin..etc) are not that great on mobile devices.
The best things for smooth animation are CSS3 transitions, CSS3 3D transforms, Canvas Drawing and WebGL, because these things are using GPU acceleration.
I’ve tested three ways (Height, ScaleY, Translate) for smooth animations, you can see my demo at below url.
http://lab.cmiscm.com/masking/

1. Height animation

It’s very simple way for the masking animation.
But the performance is bad on mobile devices, the animation is not smooth.

RUNNING ON IPHONE
height
DEMO
http://lab.cmiscm.com/masking/height.html
CSS

HTML

JS

2. Scale animation

So what about using scaleY for the masking animation.
The performance is good, but the image is stretched little bit while animating.

RUNNING ON IPHONE
scale
DEMO
http://lab.cmiscm.com/masking/scale.html
CSS

HTML

JS

3. Translate animation

Actually this is what I want to say at this article.
It only uses CSS transitions with two masking layers, and it’s super smooth on mobile devices.

RUNNING ON IPHONE

translate

LAYER DEPTH

masking

DEMO
http://lab.cmiscm.com/masking/translate.html
CSS

HTML

JS

DDANGA

projects | February 6, 2014 | 4 Comments   
RUNNING ON IPAD
SLIDE SWIPE PROTOTYPE
SLIDE ONLY ITEMS IN VISIBLE AREA
ICON DESIGN
iCON_noline
WEBSITE DESIGN
dd1

dd2

dd2-1

dd3

dd4

dd5

dd6

dd7

dd8

dd10

dd11

dd12

dd13

dd14

CMS
cms1

cms2

cms3

cms4

cms5

DESCRIPTION
Interactive / Mobile / UI Designer, Sanghee Cho’s portfolio website.
URL
CREDIT
Designer : Sanghee Cho
Back-end, Front-end Developer : Jongmin Kim

Sticker.js

lab, projects | February 4, 2014 | Comment   
SITE
DESCRIPTION
Sticker.js is a Javascript library that allows you to create a Sticker Effect.
No dependencies (jQuery not required) and MIT License.
Inspired by Sanghee Cho’s Heroes Project.
URL
http://stickerjs.cmiscm.com
CREDIT
Solo work