90³â´ë ÃÊ¹Ý ´Ü¼øÇÑ ÇÏÀÌÆÛ ¸µÅ©·Î ±¸¼ºµÈ À¥»çÀÌÆ®¿¡¼ºÎÅÍ È¸éÀ» ±¸¼ºÇÏ´Â °Í¿¡ ´ëÇÑ °í¹ÎÀº Ç×»ó ÀÖ¾î¿Ô´Ù. ´ç½Ã¿£ ±×°ÍÀ» Áß¿äÇÏ°Ô »ý°¢ÇÏÁö´Â ¾Ê¾ÒÁö¸¸ ¸»ÀÌ´Ù. À¥ ±â¼úÀº Ç×»ó ÁøÈÇß°í ÁøÈÇÏ¸é¼ »ç¿ëÀÚ°¡ À¥¿¡¼ ÇൿÇÏ´Â ¹æ½ÄÀ» ¹Ù²Ù¾î ¿Ô´Ù.
JavaScript ÇÁ·¹ÀÓ¿öÅ©Áß ÇϳªÀÎ jQuery°¡ ³Î¸® ¾²À̱⠽ÃÀÛÇÏ¸é¼ À̸¦ Ȱ¿ëÇÑ jQuery Ç÷¯±×ÀεéÀÌ À¥ µðÀÚÀÎÀÇ Å« ºÎºÐÀ» Â÷ÁöÇϱ⠽ÃÀÛÇß´Ù. ´Ü¼øÇÑ ±×·¡ÇÈ È¤Àº css style¿¡ jQuery°¡ °³ÀÔÇÏ¸é¼ À¥ ÆäÀÌÁö°¡ »ç¿ëÀÚÀÇ Çൿ¿¡ Á¦°¢±â ¹ÝÀÀÇÏ´Â ÀÌÀü¿¡ ¾ø´ø »ç¿ëÀÚ °æÇèÀ» ¸¸µé¾î ³»±â ½ÃÀÛÇÑ °ÍÀÌ´Ù.
ÆÐ·²·º½º Ç÷¯±×ÀÎÀº ¿©·¯°³ÀÇ ·¹À̾ °ãÃÄµÎ°í »ç¿ëÀÚÀÇ ¸¶¿ì½º Æ÷ÀÎÅÍ À§Ä¡¿¡ µû¶ó, ȤÀº ½ºÅ©·ÑÀÌ ³»·Á°¡°Å³ª ¿Ã¶ó°¨¿¡ µû¶ó ¿©·¯°³ÀÇ °ãÃĵР·¹À̾ Á¦À۱⠴ٸ¥ ¼Óµµ·Î ¿òÁ÷À̸ç ÀÔüÀûÀÎ È¿°ú¸¦ ÁØ´Ù. ƯÈ÷ ¼¼·Î·Î ±æÂßÇÑ ÇÑ ÆäÀÌÁö µðÀÚÀο¡ ÀûÇÕÇÏ´Ù. ÆÐ·²·º½º ½ºÅ©·ÑÀº ¿©·¯°¡Áö jQuery Ç÷¯±×Àΰú ¼¯¿© ½Ã³ÊÁö¸¦ ¹ßÈÖÇÑ´Ù. ¿ÀºêÁ§Æ®ÀÇ Å©±â¸¦ ¸ð´ÏÅÍÀÇ Å©±â¿¡ ¸Â°Ô Ç¥ÇöÇÏ¿© ¸ðµç ¸ð´ÏÅÍ¿¡¼ µ¿ÀÏÇÑ °æÇèÀ» ¾È°ÜÁÖ°Ô µÈ´Ù.
ÆÐ·²·º½º ½ºÅ©·ÑÀº ´Ü¼øÈ÷ À§¿¡¼ ¾Æ·¡·Î, ȤÀº ¿ÞÂÊ¿¡¼ ¿À¸¥ÂÊÀ¸·Î ¸¶¿ì½ºÀÇ ÈÙÀ» µ¹¸®¸ç ÆäÀÌÁöÀÇ ÄÁÅÙÃ÷¸¦ ¼ÒºñÇÏ´Â ´ë½Å ³×ºñ°ÔÀ̼ÇÀ» Ŭ¸¯Çϰųª ½ºÅ©·Ñ¹Ù¸¦ ¸¶¿ì½º·Î Ŭ¸¯Çϰí õõÈ÷ ³»¸®´Â ÇüÅÂÀÇ »ç¿ëÀÚ °æÇèÀ» ¸¸µé¾î ³Â´Ù. ÈÙÀ» µ¹·Á ÆäÀÌÁö¸¦ ³»¸®¸é ÁÁÀº »ç¿ëÀÚ °æÇèÀ» ¾ò±â°¡ ½±Áö ¾Ê´Ù. ÈÙÀ» µ¹¸®¸é ȸéÀ» ±¸¼ºÇÏ´Â ¿ÀºêÁ§Æ®µéÀÌ Àǵµ¿¡ ¸ÂÁö ¾Ê°Ô ¶Ò¶Ò ²÷°Ü Ç¥ÇöµÇ´Â °æ¿ì°¡ ¸¹±â ¶§¹®ÀÌ´Ù.
¿©·¯ ÇØ»óµµ¸¦ °¡Áø ¿©·¯¸íÀÇ »ç¿ëÀÚ¿¡°Ô °°Àº »ç¿ëÀÚ °æÇèÀ» ¾È°ÜÁÖ±â À§Çؼ ´Ü¼øÇÏ°Ô 1024px ȤÀº 960pxµîÀÇ °¡·Î °ø°£À» °íÁ¤ÇÏ´Â ¹æ¹ýÀ» »ç¿ëÇÏ´ø À¥ ȸéÀÌ ¿©·¯°¡Áö Ç÷¯±×ÀÎÀ» »ç¿ëÇÏ¸é¼ »ç¿ëÀÚ°¡ ÀÛÀº ¸ð´ÏÅ͸¦ »ç¿ëÇÏ´ø Å« ¸ð´ÏÅ͸¦ »ç¿ëÇÏ´ø, ±æÂßÇÑ ¸ð´ÏÅ͸¦ »ç¿ëÇÏ´ø ³ÐÀûÇÑ ¸ð´ÏÅ͸¦ »ç¿ëÇÏ´ø ²Ë Âù ȸéÀ» Á¦°øÇÔÀ¸·Î½á ÄÁÅÙÃ÷¸¦ È¿°úÀûÀ¸·Î Àü´ÞÇÒ ¼ö ÀÖ°Ô µÇ¾ú´Ù. À¥»çÀÌÆ®¸¦ ±¸¼ºÇÏ´Â ¹æ¹ýÀº ¿©·¯°¡Áö ±â¼ú¿¡ ÀÇÇØ ´Ù¾ç¼ºÀÌ »ý°å´Ù. ÁÁÀº »ç¿ëÀÚ °æÇèÀ» ³»±â À§ÇØ, ÄÁÅÙÃ÷¸¦ È¿°úÀûÀ¸·Î Àü´ÞÇϱâ À§ÇØ À¥ ȸéÀ» Àß ±¸¼ºÇÏ¸é »çÀÌÆ®¿¡ ´ëÇÑ ½Å·Ú°¡ »ý±æ°ÍÀÌ¸ç ¾î¶² ¹æ½ÄÀ¸·Îµç »ç¿ëÀÚ¿Í »çÀÌÆ® ¸ðµÎ¿¡°Ô ±àÁ¤ÀûÀÎ ¿µÇâÀ» ¹ÌÄ¥ °ÍÀÌ´Ù.
ÆÐ·²·º½º È¿°ú Á¦´ë·Î ³»±â
MediumÀÇ µðÀÚÀ̳Ê, Dave Gamache°¡ Á¦¾ÈÇÏ´Â ÆÐ·²·º½º Á¦´ë·Î ¾²´Â ¹ý. °£´ÜÇÑ °Í¸¸ ¼Ò°³ÇÏ¿´À¸´Ï, º»¹®À» ²À È®ÀÎÇϽñæ.
ÇØ¾ß ÇÒ °Í :
- ºê¶ó¿ìÀú°¡ ¾Ö´Ï¸ÞÀÌ¼Ç Çϱâ ÁÁÀº È¿°úµéÀ» ½á¶ó. translate3d, scale, rotation, opacity¸¦ Á¦¿ÜÇϸé 60ÇÁ·¹ÀÓ ÀÌ»óÀÌ ³ª¿ÀÁö ¾ÊÀ» °¡´É¼ºÀÌ ³ô´Ù.
- JS·Î ¾Ö´Ï¸ÞÀ̼ÇÀ» ÁÖ±â Àü¿¡, window.requestAnimationFrameÀ» ¸ÕÀú »ç¿ëÇØ¶ó. ÀÌ·¸°Ô ÇÏ¸é ºê¶ó¿ìÀú°¡ »õ·Î ±×¸®±â Àü¿¡ ¾Ö´Ï¸ÞÀ̼ÇÀ» ÁÙ ¼ö ÀÖ´Ù.
- ¹Ý¿Ã¸²À» Á¦´ë·Î ÇØ¶ó. 54.2356345234578px °°Àº °ªÀº ºÒÇÊ¿äÇÏ´Ù. ¼Ò¼ýÁ¡ µÑ° ÀÚ¸®·Îµµ ÃæºÐÈ÷ È¿°ú¸¦ º¼ ¼ö ÀÖ´Ù.
- ºäÆ÷Æ® ¾È¿¡ ÀÖ´Â ¿ä¼Òµé¸¸ ¾Ö´Ï¸ÞÀÌÆ®Çضó. È¸é ¹Ù±ù¿¡ ÀÖ´Â ³à¼®µéÀ» ¿òÁ÷¿©ºÁ¾ß ¹«½¼ ¼Ò¿ëÀΰ¡?
- fixed, absolute positionÀÎ ¿ä¼Òµé¸¸ ¾Ö´Ï¸ÞÀÌÆ®Çضó. ÇÊÀÚ º»Àεµ ÀÌÀ¯´Â Àß ¸ð¸£Áö¸¸ ±×·¸°Ô ÇÏ¸é ÆÛÆ÷¸Õ½º°¡ È® ¿Ã¶ó°¡´Â °É °æÇèÇß´Ù°í.
- ¿ÀºêÁ§Æ® ¾È¿¡ ¸ðµç ¾Ö´Ï¸ÞÀ̼ÇÀ» Á¤ÀÇÇØ¶ó. ¹¹ ÀÌ·±´Ù°í ÇØ¼ ÆÛÆ÷¸Õ½º°¡ ¿Ã¶ó°¡´Â °Ç ¾Æ´ÏÁö¸¸ ÀÌ·¸°Ô ÇÏ¸é ¸ðµç °Ô ÇÑ°á ½¬¿öÁø´Ù.
ÇÏÁö ¸»¾Æ¾ß ÇÒ °Í :
- background-size:cover´Â ÇÇÇØ¶ó. ƯÈ÷ ¾Ö´Ï¸ÞÀÌÆ® ÇÏ·Á´Â °æ¿ì¿¡´Â.
- ½ºÅ©·Ñ À̺¥Æ®¿¡ ¹Ù·Î bindÇÏÁö ¸¶¶ó. Æ÷Áö¼Ç ¾÷µ¥ÀÌÆ® ÇÒ ¶§¿¡´Â ÀÎÅ͹úÀ» Á¶±Ý µÖ¶ó, ¾È±×·¯¸é ¹ÌÄ£µíÀÌ Æ÷Áö¼Ç º¯°æ ½ÅÈ£°¡ °¡¼ ÆÛÆ÷¸Õ½º¿¡ ¾Ç¿µÇâÀ» ÁØ´Ù. ¸Å 10ms Á¤µµ¸¶´Ù ¾÷µ¥ÀÌÆ® ÇØµµ ÃæºÐÇÏ´Ù.
- ¾öû³ª°Ô Å« À̹ÌÁö¸¦ ¾Ö´Ï¸ÞÀÌÆ® Çϰųª, Å©±â¸¦ È® ÁÙÀÌÁö ¸¶¶ó.
- (°¡±ÞÀû) Çѹø¿¡ ³Ê¹« ¸¹Àº °É µ¹¸®Áö ¸¶¶ó. ½ÇÁ¦·Î ¹º°¡ ¹®Á¦°¡ ¹ß»ýÇÑ ÀûÀº ¾ø¾úÁö¸¸, °¡´É¼ºÀÌ ³ô´Ù°í »ý°¢ÇÑ´Ù. parent¿Í child¿¡ ÇѲ¨¹ø¿¡ ¾Ö´Ï¸ÞÀ̼ÇÀ» ÁÙ ¶§ ¹ö¹÷ÀÌ´Â °æ¿ì°¡ ÀÖ¾ú´Ù.
Parallax´Â(Æä·²·¢½º) °Å¸®¿Í °¢µµ¿¡ µû¶ó »ç¹°ÀÌ ´Ù¸£°Ô º¸ÀÌ´Â Â÷À̸¦ ¸»ÇÕ´Ï´Ù. ¸»·Î´Â ÀÌÇØ°¡ Àß ¾ÈµÇ½Å´Ù±¸¿ä? ¾Æ·¡ ¿¹Á¦¸¦(¼Ò½º: wikipedia) º¸½Ã¸é ÀÌÇØ°¡ Á¶±Ý ´õ Àß µÇ½Ç °Í°°³×¿ä. “»ç¹°°ú ½Ã¼±ÀÇ °¢µµ” ±×¸®°í “»ç¹°°ú ½Ã¼±ÀÇ °Å¸®“¿¡ µû¶ó »ç¹°ÀÇ ¸ð½ÀÀÌ ´Ù¸£°Ô º¸ÀÌ´Â °ÍÀ» º¸¿©ÁÖ´Â ¿¹ÀÔ´Ï´Ù.
ÀÌ·¯ÇÑ ½Ã°¢ÀûÀÎ È¿°ú¸¦ À¥»çÀÌÆ®¿¡ Àû¿ëÇϸé À¥»çÀÌÆ®¸¦ ½ºÅ©·ÑÇÒ ¶§¸¶´Ù ½Ã½Ã°¢°¢À¸·Î º¯Çϴ ȸéÀ» º¼ ¼ö Àֱ⠶§¹®¿¡ »ç¿ëÀÚµéÀº ÀÔü°¨À» ´À³¥ ¼ö ÀÖ½À´Ï´Ù.
°£´ÜÇÑ ¿¹·Î ¹é±×¶ó¿îµå À̹ÌÁö´Â(background image) ¸Ö¸® ÀÖ´Ù°í °¡Á¤Çϰí õõÈ÷ ¿òÁ÷À̵µ·Ï ÇÏ°í ¹é±×¶ó¿îµå À§¿¡ ÀÖ´Â Æ÷±×¶ó¿îµå À̹ÌÁö´Â(foreground image) ½Ã¼±°ú °¡±õ´Ù°í °¡Á¤ÇÏ¿© ¹é±×¶ó¿îµå º¸´Ù´Âºü¸£°Ô ¿òÁ÷ÀÎ´Ù¸é ¸¶¿ì½º·Î ȸéÀ» ½ºÅ©·ÑÀ» ÇÒ ¶§¸¶´Ù µÎ°¡Áö ·¹À̾ ´Ù¸¥ ¼Óµµ·Î ¿òÁ÷À̱⠶§¹®¿¡ ÀÔü°¨À» ´À³¥ ¼ö ÀÖ´Â °ÍÀÔ´Ï´Ù.
Æ©Å丮¾ó,¼Ò½º
ÆÐ·²·º½º ½ºÅ©·Ñ¸µÀ¸·Î Á¦ÀÛµÈ À¥»çÀÌÆ®¸¦ º¸½Ã·Á¸é ¾Æ·¡ Á¦¸ñÀ» Ŭ¸¯Çϼ¼¿ä.
|