½ÃÀÛÆäÀÌÁö·Î Áñ°Üã±âÃß°¡
·Î±×ÀÎ
ȸ¿ø°¡ÀÔ l Ã⼮üũ l ¸¶ÀÌÆäÀÌÁö l CGIMALL
happycgi
ÀÚ·á½Ç »çÀÌÆ®µî·Ï ·©Å·100 ÇÁ·Î±×·¥¸®ºä °ü¸®ÀÚÃßõÀÚ·á Ãʺ¸°¡À̵å
Ä¿¹Â´ÏƼ
Àüü ÆîÃ帱â
Äü¸Þ´º¸µÅ© jquery , CSS , PHP , Javascript , ¹«·áÆùÆ® , ASP
»ó¼¼°Ë»ö
Ȩ > CSS > ±âŸȿ°ú > CSS Only Floating Parallax Effect »ó¼¼Á¤º¸
»çÀÌÆ®µî·Ï
Ŭ¶ó¿ìµåű×
javascript
PHP
ASP
CSS
HTML
mysql
jquery
image
API
Mobile
¸Þ´º
slide
°Ô½ÃÆÇ
ÇöÀçÁ¢¼ÓÀÚ ¸í »õ·Î°íħ
CSS Only Floating Parallax Effect
¼Ò½ºÅë°èÁ¤º¸ ¿À·ù½Å°í ¹× ¹®ÀÇ
ÇØÇÇÆÀ
³×ƼÁð
Æ®À§ÅÍ·Î º¸³»±â ÆäÀ̽ººÏÀ¸·Î º¸³»±â
¼Ò½ººÐ·ù ±âŸȿ°ú
´Ù¿î·Îµå Ƚ¼ö 15 ȸ
°£´Ü¼³¸í CSS¸¸ »ç¿ëÇÏ¿© À̹ÌÁö°¡ ÀÚµ¿À¸·Î ¿Ã¶ó°¡´Â È¿°ú ¼Ò½ºÀÔ´Ï´Ù.
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
ȨÆäÀÌÁö¹Ù·Î°¡±â ¼Ò½º´Ù¿î·Îµå µ¥¸ð ¹Ì¸®º¸±â ½ºÅ©·¦Çϱâ


CSS¸¸ »ç¿ëÇÏ¿© À̹ÌÁö°¡ ÀÚµ¿À¸·Î ¿Ã¶ó°¡´Â È¿°úÀÔ´Ï´Ù.

HTML ¼Ò½º

<img src='https://images.unsplash.com/photo-1658250845157-403299ba4564?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1113&q=80' alt=''>
 
<img src='https://images.unsplash.com/photo-1674909072480-ad551618b63e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=627&q=80' alt=''>
 
<img src='https://images.unsplash.com/photo-1683220640666-02a952784e4b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80' alt=''>
 
<img src='https://images.unsplash.com/photo-1683220637474-29d3736704f8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80' alt=''>
 
<img src='https://images.unsplash.com/photo-1681062964770-4d184e490e76?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80' alt=''>
 
<img src='https://images.unsplash.com/photo-1680544888925-529e71ef4c08?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80' alt=''>
 
<img src='https://images.unsplash.com/photo-1552053831-71594a27632d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
 
<img src='https://images.unsplash.com/photo-1674909073640-c3b7ccd2bfd6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=680&q=80' alt=''>
 
<img src='https://images.unsplash.com/photo-1607420574711-b02aa1420e30?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80' alt=''>
<img src='https://images.unsplash.com/photo-1566421890686-3f5d0a362470?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=685&q=80' alt=''>


CSS ¼Ò½º

:root {
  --duration: 20s;
  --delay: 20s;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  position: relative;
  background-color: #141414;
  margin: 0 auto;
  padding: 0 1rem;
  height: 100vh;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 25rem;
}
img {
  --duration: 40s;
  --name: float-up-1;
  position: absolute;
  top: 0;
  left: 0;
  width: 33vw;
  transform: translateY(200vh);
  animation: var(--name) var(--duration) linear infinite;
  box-shadow: 1px 3px 15px rgba(0, 0, 0, 0.5);
  z-index: 1;
}
img:nth-child(1) {
  animation-delay: 0s;
}
img:nth-child(2) {
  animation-delay: -3s;
}
img:nth-child(3) {
  animation-delay: -6s;
}
img:nth-child(4) {
  animation-delay: -15s;
}
img:nth-child(5) {
  animation-delay: -12s;
}
img:nth-child(6) {
  animation-delay: -15s;
}
img:nth-child(7) {
  animation-delay: -18s;
}
img:nth-child(8) {
  animation-delay: -21s;
}
img:nth-child(9) {
  animation-delay: -24s;
}
img:nth-child(10) {
  animation-delay: -27s;
}
img:nth-child(1) {
  --name: float-up-1;
  --duration: calc(20s * 1);
  left: 0vw;
  z-index: -1;
}
img:nth-child(2) {
  --name: float-up-3;
  --duration: calc(20s * 3);
  left: 10vw;
  z-index: -3;
}
img:nth-child(3) {
  --name: float-up-2;
  --duration: calc(20s * 2);
  left: 90vw;
  z-index: -2;
}
img:nth-child(4) {
  --name: float-up-1;
  --duration: calc(20s * 1);
  left: 36vw;
  z-index: -1;
}
img:nth-child(5) {
  --name: float-up-3;
  --duration: calc(20s * 3);
  left: 62vw;
  z-index: -3;
}
img:nth-child(6) {
  --name: float-up-2;
  --duration: calc(20s * 2);
  left: 15vw;
  z-index: -2;
}
img:nth-child(7) {
  --name: float-up-2;
  --duration: calc(20s * 2);
  left: 55vw;
  z-index: -2;
}
img:nth-child(8) {
  --name: float-up-3;
  --duration: calc(20s * 3);
  left: -20vw;
  z-index: -3;
}
img:nth-child(9) {
  --name: float-up-1;
  --duration: calc(20s * 1);
  left: 68vw;
  z-index: -1;
}
img:nth-child(10) {
  --name: float-up-2;
  --duration: calc(20s * 2);
  left: 0vw;
  z-index: -2;
}
@keyframes float-up-3 {
  from {
    transform: translateY(200vh) translateZ(-50vh);
  }
  to {
    transform: translateY(-200vh) translateZ(-50vh);
  }
}
@keyframes float-up-2 {
  from {
    transform: translateY(150vh) translateZ(-25vh);
  }
  to {
    transform: translateY(-150vh) translateZ(-25vh);
  }
}
@keyframes float-up-1 {
  from {
    transform: translateY(100vh);
  }
  to {
    transform: translateY(-100vh);
  }
}
 

ÇØ´ç»çÀÌÆ® ¶Ç´Â ÷ºÎÆÄÀÏÀ» ´Ù¿î·Îµå ¹Þ¾Æ¼­ ¼Ò½º¸¦ Á÷Á¢ È®ÀÎÇÒ ¼ö ÀÖ½À´Ï´Ù.

³×ƼÁð ÀÇ°ß   ÀÌ¿ëÇϽŠÀÚ·áÀÇ Èı⸦ ÀÚÀ¯·Ó°Ô ÀÛ¼ºÇϼ¼¿ä. (»ó¾÷ÀûÀÎ ±¤°í ¹× µµ¹è¼º ±Û µîÀº »çÀüÅ뺸¾øÀÌ »èÁ¦µÉ ¼ö ÀÖ½À´Ï´Ù.)
³»¿ë ¾ÆÀ̵ð ÀÇ°ß³²±â±â
µî·ÏµÈ ÀÇ°ßÀÌ ¾ø½À´Ï´Ù.
1
À̸§
³»¿ë
:³×¸Â¾Æ¿ä: :È­³ª´Â±º¿ä: :Àá¿Í: :¿ì¿ïÇØ: :À̰ǾƳÄ: :¿ÕÇÏÇÏ: ¿Õ¿ôÀ½~ ³î·¥~
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
µµ¹è¹æÁöÅ°
 21206447 º¸ÀÌ´Â µµ¹è¹æÁöÅ°¸¦ ÀÔ·ÂÇϼ¼¿ä.