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

µå·¡±×·Î À̹ÌÁö À̵¿ÀÌ °¡´ÉÇÑ °¶·¯¸® ¿¹Á¦ÀÔ´Ï´Ù.
HTML, CSS, JS¸¦ ÀÌ¿ëÇÏ¿© ±¸ÇöµÇ¸ç À̹ÌÁö¸¦ º¯°æÇÒ ¼ö ÀÖ½À´Ï´Ù.



HTML ±¸Á¶

<div class="Container">

  <!-- last card -->

  <div class="Picture">

    <img class="Picture-img" src="https://media.licdn.com/dms/image/C4D03AQHjPuY9oi3Www/profile-displayphoto-shrink_800_800/0/1579768452204?e=2147483647&v=beta&t=4ZgTgOkSEu2eKRoLWEVtgL8s2zYu80YMxI_0018U9Dk" alt="" />

    <div class="Picture-note"><span>@DeyJordan - <a class="Network" href="https://codepen.io/DeyJordan" target="_top"><img src="https://cdn-icons-png.flaticon.com/512/2111/2111501.png" alt="CodePen" /></a><a class="Network" href="https://twitter.com/DeyJordan" target="_top"><img src="https://www.freepnglogos.com/uploads/twitter-logo-png/twitter-logo-vector-png-clipart-1.png" alt="twitter" /></a></span></div>

  </div>

  <!-- other cards -->

  <div class="Picture">

    <img class="Picture-img" src="https://picsum.photos/id/733/400" alt="" />

    <div class="Picture-note"><span>Over the clouds</span></div>

  </div>

  <div class="Picture">

    <img class="Picture-img" src="https://picsum.photos/id/613/400" alt="" />

    <div class="Picture-note"><span>Golden Gate Bridge - San Francisco</span></div>

  </div>

  <div class="Picture">

    <img class="Picture-img" src="https://picsum.photos/id/40/400" alt="" />

    <div class="Picture-note"><span>Cat nose</span></div>

  </div>

  <div class="Picture">

    <img class="Picture-img" src="https://picsum.photos/id/465/400" alt="" />

    <div class="Picture-note"><span>Mountain</span></div>

  </div>

  <div class="Picture">

    <img class="Picture-img" src="https://picsum.photos/id/1029/400" alt="" />

    <div class="Picture-note"><span>Central Park - New York</span></div>

  </div>

  <div class="Picture">

    <img class="Picture-img" src="https://picsum.photos/id/923/400" alt="" />

    <div class="Picture-note"><span>Autumn</span></div>

  </div>

  <div class="Picture">

    <img class="Picture-img" src="https://picsum.photos/id/425/400" alt="" />

    <div class="Picture-note"><span>Coffee</span></div>

  </div>

  <div class="Picture">

    <img class="Picture-img" src="https://picsum.photos/id/200/400" alt="" />

    <div class="Picture-note"><span>An Irish cow enjoying the wind on the beach</span></div>

  </div>

  <div class="Picture">

    <img class="Picture-img" src="https://picsum.photos/id/244/400" alt="" />

    <div class="Picture-note"><span>pelicans at the water's edge</span></div>

  </div>

  <div class="Picture">

    <img class="Picture-img" src="https://picsum.photos/id/15/400" alt="" />

    <div class="Picture-note"><span>Waterfall</span></div>

  </div>

</div>


<a class="Me" href="https://bit.ly/m/JordanDey" target="_top">CodePen by Jordan Dey</a>



CSS ¼Ò½º

@import url("https://fonts.googleapis.com/css2?family=Caveat");


.Container {

  position: absolute;

  top: 50%;

  left: 50%;

}


.Picture {

  display: inline-block;

  position: absolute;

  top: 0;

  left: 0;

  border: 5px solid #fff;

  border-radius: 3px;

  background: #fff;

  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);

  transform: translate(-50%, -50%);

  user-select: none;

  cursor: pointer;

}


.Picture-img {

  display: block;

  width: 300px;

  height: 300px;

  pointer-events: none;

}


.Picture-note {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 300px;

  height: 70px;

  padding: 12px 24px;

  font-size: 1.5rem;

  text-align: center;

}


.Network {

  display: inline-block;

  padding: 0 5px;

}


.Network img {

  width: 1.5rem;

  aspect-ratio: 1 / 1;

  vertical-align: middle;

}


/* --------------------- */

/* Other styles          */

/* --------------------- */


* {

  box-sizing: border-box;

}


body {

  margin: 0;

  font-family: 'Caveat', serif;

  overflow: hidden;

}


.Me {

  position: fixed;

  z-index: 15;

  bottom: 20px;

  left: 50%;

  color: #111;

  transform: translateX(-50%);

  font-weight: 700;

  text-align: center;

  opacity: 0.7;

}



JS ¼Ò½º

const pictures = document.querySelectorAll('.Picture');

var previousTouch = undefined;


function updateElementPosition(element, event) {

  var movementX, movementY;


  if (event.type === 'touchmove') {

    const touch = event.touches[0];

    movementX = previousTouch ? touch.clientX - previousTouch.clientX : 0;

    movementY = previousTouch ? touch.clientY - previousTouch.clientY : 0;

    previousTouch = touch;

  } else {

    movementX = event.movementX;

    movementY = event.movementY;

  }

  

  const elementY = parseInt(element.style.top || 0) + movementY;

  const elementX = parseInt(element.style.left|| 0) + movementX;


  element.style.top = elementY + "px";

  element.style.left = elementX + "px";

}


function startDrag(element, event) {

  const updateFunction = (event) => updateElementPosition(element, event);

  const stopFunction = () => stopDrag({update: updateFunction, stop: stopFunction});

  document.addEventListener("mousemove", updateFunction);

  document.addEventListener("touchmove", updateFunction);

  document.addEventListener("mouseup", stopFunction);

  document.addEventListener("touchend", stopFunction);

}


function stopDrag(functions) {

  previousTouch = undefined;

  document.removeEventListener("mousemove", functions.update);

  document.removeEventListener("touchmove", functions.update);

  document.removeEventListener("mouseup", functions.stop);

  document.removeEventListener("touchend", functions.stop);

}


pictures.forEach(picture => {

  const range = 100;

  const randomX = Math.random() * (range * 2) - range;

  const randomY = Math.random() * (range * 2) - range;

  const randomRotate = Math.random() * (range / 2) - range / 4;

  const startFunction = (event) => startDrag(picture, event);

  picture.style.top = `${randomY}px`;

  picture.style.left = `${randomX}px`;

  picture.style.transform = `translate(-50%, -50%) rotate(${randomRotate}deg)`;

  picture.addEventListener("mousedown", startFunction);

  picture.addEventListener("touchstart", startFunction);

});


÷ºÎÆÄÀÏÀ» ´Ù¿î·Îµå ¹Þ°Å³ª ÇØ´ç »çÀÌÆ®·Î À̵¿Çؼ­ Àüü ¼Ò½º¸¦ È®ÀÎÇÏ½Ç ¼ö ÀÖ½À´Ï´Ù.

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