search

JunilHwang / blog-comment

TIL comments
1 stars 0 forks source link

http://junil-hwang.com/blog/css-slide-animation/ #6

Open utterances-bot opened 4 years ago

utterances-bot commented 4 years ago

[CSS] 다양한 CSS Slide Animation - 개발자 황준일

보통 slide를 만들 때 javascript를 사용합니다. 하지만 javascript 없이도 간단한 슬라이드를 제작할 수 있습니다. keyframes을 이용할 수도 있고, input radio를 이용할 수도 있습니다. 다양한 슬라이드 제작 방법에 대해 소개합니다.

http://junil-hwang.com/blog/css-slide-animation/

jnijesangzs commented 4 years ago

슬라이드 스타일 ul안에 100% 4개를 8개로 바꾸어 li태그를 8개로 늘려서 자동 슬라이드 형식으로 바꿀수있는건가요?

jnijesangzs commented 4 years ago 
*{margin:0;padding:0;}
ul,li{list-style:none;}
.slide{ height:500px;overflow:hidden;}
.slide ul{width:calc(100% * 8);display:flex;animation:slide 8s infinite;} /* slide를 8초동안 진행하며 무한반복 함 */
.slide li{width:calc(100% / 8);height:500px;}
.slide li:nth-child(1){background-image: url(img1.jpg);width: 1080px;height: 500px;}
.slide li:nth-child(2){background-image: url(img2.jpg);width: 1080px;height: 500px;}
.slide li:nth-child(3){background-image: url(img3.jpg);width: 1080px;height: 500px;}
.slide li:nth-child(4){background-image: url(img4.jpg);width: 1080px;height: 500px;}
.slide li:nth-child(5){background-image: url(img1.png);width: 1080px;height: 500px;}
.slide li:nth-child(6){background-image: url(img1s.png);width: 1080px;height: 500px;}
.slide li:nth-child(7){background-image: url(img2.jpg);width: 1080px;height: 500px;}
.slide li:nth-child(8){background-image: url(img2s.jpg);width: 1080px;height: 500px;}
@keyframes slide {
  0% {margin-left:0;} /* 0 ~ 10  : 정지 */
  10% {margin-left:0;} /* 10 ~ 25 : 변이 */
  25% {margin-left:-100%;} /* 25 ~ 35 : 정지 */
  35% {margin-left:-100%;} /* 35 ~ 50 : 변이 */
  50% {margin-left:-200%;}
  60% {margin-left:-200%;}
  75% {margin-left:-300%;}
  85% {margin-left:-300%;}
  100% {margin-left:0;}
}
ehddnjs123 commented 4 years ago

안녕하세요. 피드 잘 봤습니다. 그런데 궁금한 점이 있습니다. 기본적으로 자동 슬라이드이나 손가락으로 슬라이드를 넘기면 다음 이미지가 나오도록은 어떻게 하는지 알 수 있을까요??

jnijesangzs commented 3 years ago

기본적인 자동슬라이드는 위에있는 내용으로 충분한 결과값을 만들수있고 손가락으로 슬라이드를 넘긴다는것을 말하는건 수동 슬라이드라는 뜻입니다. 위에 나와있는 CSS 내용을 보면 BACKGROUND에 이미지값을 넣어야 이미지가 자동적으로 나오는것으로 생각됩니다. 재가 위에 올린 코딩을 보신다면 백그라운드에 이미지를 넣어서 자동 이미지 슬라이드 코딩을 하도록 나오게한 코딩이며 수동은 슬라이드 동작값을 얼마나 빠르게 할껀지 크기와 넓이 값은 어느정도로 지정을하여 정해진다면 그크기를 정한 값에 사진 PNG,JPG등에 크기를 아까 정한 높이와 넓이값으로 맞춰서 그사진들에 경로들을 코딩값에 지정해준다면 수동과 자동 슬라이드를 실행할수있다고생각됩니다.

kkkz7 commented 3 years ago

안녕하세요 자동 가로 슬라이드 코드에서 width, height 비율 width:100% height:300px 가닌 꽉찬 비율로 하게 하려면 어느부분에 코드를 수정해야될까요? ㅠㅠ

likeconstellation commented 3 years ago

안녕하세요 자동페이드 슬라이드 코드에서 백그라운드 컬러를 이미지로 코드를 수정하고 실행시켜보았더니 설정한 이미지로 나타나지 않는데, 이미지 설정을 css에서 .slide li:nth-child(1){background-image:url(img.jpg");animation-delay:0s} 이와 같은 방식으로 이미지들을넣었는데 이부분이 잘못된건가요?

JunilHwang commented 3 years ago

@likeconstellation 

 .slide li:nth-child(1){background-image:url(img.jpg"); animation-delay:0s} /* 따옴표 때문에 안나옴 */
 .slide li:nth-child(1){background-image:url(img.jpg); animation-delay:0s} /* 이렇게 수정 */

잘 보면 url은 따옴표를 넣어주거나 혹은 아예 안넣어주거나 해야한답니다! 지금은 오른쪽에만 따옴표가 들어간 상태네요

hyun-young-luadmia-ParkKim commented 3 years ago

지금 자동세로슬라이드는 위에서 아래로 향하는데, 아래에서 위로 가게끔 하는건 없나요?

hyun-young-luadmia-ParkKim commented 3 years ago

저 혼자서 아래에서 위로 가게끔 코드를 나름 고쳐보았는데 안되더라고요

hyun-young-luadmia-ParkKim commented 3 years ago

어떻게 하면 되나요?

JunilHwang commented 3 years ago

@hyun-young-luadmia-ParkKim 안녕하세요!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{margin:0;padding:0;}
    ul,li{list-style:none;}
    .slide{height:300px;overflow:hidden;}
    .slide ul{height:calc(100% * 4);animation:slide 8s infinite;}
    .slide li{height:calc(100% / 4);}
    .slide li:nth-child(1){background:#ffa;}
    .slide li:nth-child(2){background:#faa;}
    .slide li:nth-child(3){background:#afa;}
    .slide li:nth-child(4){background:#aaf;}
    @keyframes slide {
      0% {margin-top:-900px;}
      10% {margin-top:-900px;}
      25% {margin-top:-600px;}
      35% {margin-top:-600px;}
      50% {margin-top:-300px;}
      60% {margin-top:-300px;}
      75% {margin-top: 0;}
      85% {margin-top: 0;}
      100% {margin-top: -900px;}
    }
  </style>
</head>
<body>
  <div class="slide">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</body>

이렇게 작성하면 될 것 같습니다. 다만 li 태그의 순서를 역순으로 변경하셔야 된답니다!

hyun-young-luadmia-ParkKim commented 3 years ago

넵! 감사합니다

hyun-young-luadmia-ParkKim commented 3 years ago

여기에 있는 위에서 아래로 가는 슬라이드 처럼 하려고 하는데 어떻게 css를 변경하면 좋을까요?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>베이커리</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
<script src="javascript/script.js" defer="defer" type="text/javascript"></script>
<script src="javascript/jquery-1.12.3.js" type="text/javascript"></script>
</head>

<body>

<header class="all">
<div id="header_logo" class="wrap">
    <div class="logo">
    <a href="#"><img src="common/logo/LOGO.jpg" alt="no"></a>
    </div>
    <nav>
      <ul class="nav">
       <li><a href="#">DD 소개</a></li>
       <li><a href="#">빵 만들기</a>
         <ul class="submenu">
           <li><a href="#">제빵 재료</a></li>
           <li><a href="#">제빵 도구</a></li>
           <li><a href="#">제빵 포장도구</a></li>
         </ul>
       </li>
       <li><a href="#">커뮤니티</a>
         <ul class="submenu">
           <li><a href="#">나만의 레시피</a></li>
           <li><a href="#">내가 만든 방</a></li>
           <li><a href="#">제빵 노하우</a></li>
         </ul>
       </li>
        <li class="clear"></li>
      </ul>
    </nav>
</div>
</header>
<div class="clear"></div>

<div id="imageslide" class="wrap">
  <div class="imgs"> 
  <img src="common/slide/images(1).jpg" alt="no">  
  <img src="common/slide/images(2).jpg" alt="no"> 
  <img src="common/slide/images(3).jpg" alt="no">
  <img src="common/slide/images(4).jpg" alt="no">
  <img src="common/slide/images(5).jpg" alt="no">
  </div>
   <div class="welcome">
      <h1>
      <span>베이커리 카페</span>
      </h1>
      <h3> 
      <span>세상에 하나뿐인 베이커리</span>
      </h3>
   </div>
</div>
<div class="clear"></div>

<div id="contents" class="wrap">
    <div class="notice">
        <h2>공지사항</h2>
        <table class="table">
            <tr>
                <th>내용</th>
                <th>날짜</th>
            </tr>
            <tr>
                <td><a href="#">제1회 DD 베이커리 워크숍에 초대합니다(서울권).</a></td>
                <td>2017-12-12</td>
            </tr>
            <tr>
                <td><a href="#">올림픽공원 카페 초보 여성 창업을 추천받습니다.</a></td>
                <td>2017-12-10</td>
            </tr>
            <tr>
                <td><a href="#">맛과 영양, 환경문제까지 생각하는 베이커리!</a></td>
                <td>2018-03-09</td>
            </tr>
            <tr>
                <td><a href="#">고품질 크림으로 만든 디저트로 달콤하게 겨울나기</a></td>
                <td>2018-03-07</td>
            </tr>
            <tr>
                <td><a href="#">온가족이 함께 즐기는 베이킹 체험 교실</a></td>
                <td>2018-03-05</td>
            </tr>
        </table>
    </div>

    <div class="partner">
      <h2>Partner</h2>
      <div class="partner_info">
           <img src="common/partner/PARTNER.jpg" alt=" "><br>
           <img src="common/partner/PARTNER_UP.png" alt=" ">
      </div>
    </div>
    <div class="clear"></div>

    <div id="partner_up">
     <div class="body">
       <div class="partner_img">
           <img src="common/partner/PARTNER.jpg" alt=" " width="300">
           <img src="common/partner/PARTNER_UP.png" alt=" " width="500">
       </div>
       <div class="button"><br>
       <button type="button" id="btn-close">닫기</button>
       </div>
     </div>    
    </div>

    <div class="icon">
       <div class="icons">
           <div class="btn">
             <img src="common/icons/icon1.png" alt=" "><br>
             <button>고수의 레시피</button>
           </div>
           <div class="btn">
             <img src="common/icons/icon2.png" alt=" "><br>
             <button>모임 일정</button>
           </div>
           <div class="btn">
             <img src="common/icons/icon3.png" alt=" "><br>
             <button>식품안전관리</button>
           </div>
       </div>
    </div>
</div>
<div class="clear"></div>

<footer> 
<div class="wrap">
    <ul>
      <li><a href="#">법적고지</a></li>
      <li><a href="#">개인정보취급방침</a></li>
      <li><a href="#">개인정보처리방침</a></li>
    </ul>
<p>사업자번호:228-81-03754<br>
상호명:(주)디디베이커리<br>
대표자:다진<br>
개인정보관리책임자:윤준우<br>
상담전화:1588-0789<br>
사업장주소:서울특별시 금천구 가산동 가산디지털2로<br>
E-mail : master@ddbb.com</p>
</div>
<div class="clear"></div>
</footer>

</body>
</html>
@charset "utf-8";
/* CSS Document */

*{
    margin: 0 auto;
    padding: 0;
    list-style: none;
    font-family: "맑은 고딕";
 }
a{color:inherit; text-decoration:none;}
button{cursor:pointer;}
body,html{min-width:960px}
.all{width:100%; float:left;}
.wrap{width:960px;}
.clear{clear:both; position:inherit;}

header{height:130px;}
#header_logo{padding-top:20px;}
.logo{height:100px;overflow:hidden;float:left}
.logo>a>img{width:250px;}

nav{float:right;margin-top:30px;padding:10px;}
.nav{width:600px;height:20px}
.nav>li{float:left;width:200px;text-align:center;position:relative;transition:all 0.4s;padding:5px 0}
.nav>li:hover{background-color: #7b422e;color: #FFF}

.submenu{display:none;background-color:rgba(255,255,255,0.8);position:absolute;z-index:1;width:100%;margin-top:5px}
.submenu>li{padding:5px 0;transition:all 0.4s;color:#000}
.submenu>li:hover{background-color:#bb692d;color:inherit}

#imgslide{height:400px;}
.imgs{position:relative;overflow:hidden;height:400px;background-color:#bb692d}
.imgs>img{width:100%;position:absolute;transition:all 2s}

.welcome{
   position: absolute;
   margin: -50px 0 0 -150px !important;
   text-align: center;
   width: 300px;
   height: 100px;
   line-height: 50px;
   background-color: rgba(255,255,255,0.8);
   border-radius: 10px;
   left: 50%;
   top: 50%;
}
.welcome h1 span{color:#bb692d;}
.welcome h3 span{color:#6a6a6a;}

#contents{height:500px;}

.notice{width:480px;margin-top:20px;float:left}
.notice h2{text-align:center;padding-bottom:10px;border-bottom:1px solid #666}
.table{border-collapse:collapse;font-size:0.9em;color:#666666;width:430px;}
.table tr>th{padding:5px 0}
.table tr>td{padding:5px}
.table tr:nth-child(2n){background-color:rgba(153,153,102,0.5)}

.partner{margin-top: 20px;float: right;width: 480px;}
.partner h2{text-align:center}

.partner_info{margin-top:10px;padding-left:20%;}
.partner_info img:nth-child(1){width:60%;cursor:pointer;}
.partner_info img:nth-child(2){width:40%;cursor:pointer;}

#partner_up{width:100%; height:100%; position:fixed; left:0; top:0; background:rgba(0,0,0, 0.6); z-index:1; display:none; opacity:0;}
#partner_up .body{padding:20px; position:fixed; left:50%; top:-20%; opacity:0; transform:translate(-50%, -50%); background:white;}
#partner_up.active{display:block; opacity:1;}
#partner_up.active .body{top:25%; opacity:1;}
#partner_up .body img{display:block; margin-bottom:20px;}
#partner_up .body .button{margin-top:20px; text-align:center;}
#partner_up .body .button button{padding:6px 12px; border:none; border-radius:6px;background:#009688; color:white;}

img{max-width:100%;}
.icon{margin-top:20px}
.icons{text-align:center}

.btn{width:160px; margin:0 20px; display:inline-block;}
.btn>button:hover{background-color: #9C6}
.btn button{padding:10px;background-color:#bb692d;color:#FFF;border:none;border-radius:10px;font-size:20px}

footer{
    height:150px;
    max-width: 100%;
    margin-top: 30px;
    background-color: #bb692d;
    color: #FFFFFF;
    overflow: hidden;
}
footer .wrap{padding:10px 20px;}
footer ul{width:50%;float:left}
footer ul>li{float:left;margin-left:20px;margin-top:30px}
footer p{width:50%;font-size:12px;float:right;color:#ffffff;}
// JavaScript Document

var imgs = 4;
var now = 0;

jQuery(document).ready(function() {
   $(".nav>li").mouseover(function(){
    $(this).children(".submenu").stop().slideDown();
    });
   $(".nav>li").mouseleave(function(){
    $(this).children(".submenu").stop().slideUp();
   });

   start(); 

   $(".partner img").click(function (){
      $("#partner_up").addClass("active");
   });
   $("#partner_up button").click(function (){
      $("#partner_up").removeClass("active");
   });

});

function start(){
   $(".imgs>img").eq(0).siblings().css({"margin-top":"-800px"});
   setInterval(function(){slide();},2000);
}
function slide(){
   now = now==imgs?0:now+=1;
   $(".imgs>img").eq(now-1).css({"margin-top":"-800px"});   
   $(".imgs>img").eq(now).css({"margin-top":"0px"});
}
hyun-young-luadmia-ParkKim commented 3 years ago

다시 html 올립니다...

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>베이커리</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
<script src="javascript/script.js" defer="defer" type="text/javascript"></script>
<script src="javascript/jquery-1.12.3.js" type="text/javascript"></script>
</head>

<body>

<header class="all">
<div id="header_logo" class="wrap">
    <div class="logo">
    <a href="#"><img src="common/logo/LOGO.jpg" alt="no"></a>
    </div>
    <nav>
      <ul class="nav">
       <li><a href="#">DD 소개</a></li>
       <li><a href="#">빵 만들기</a>
         <ul class="submenu">
           <li><a href="#">제빵 재료</a></li>
           <li><a href="#">제빵 도구</a></li>
           <li><a href="#">제빵 포장도구</a></li>
         </ul>
       </li>
       <li><a href="#">커뮤니티</a>
         <ul class="submenu">
           <li><a href="#">나만의 레시피</a></li>
           <li><a href="#">내가 만든 방</a></li>
           <li><a href="#">제빵 노하우</a></li>
         </ul>
       </li>
        <li class="clear"></li>
      </ul>
    </nav>
</div>
</header>
<div class="clear"></div>

<div id="imageslide" class="wrap">
  <div class="imgs"> 
  <img src="common/slide/images(1).jpg" alt="no">  
  <img src="common/slide/images(2).jpg" alt="no"> 
  <img src="common/slide/images(3).jpg" alt="no">
  <img src="common/slide/images(4).jpg" alt="no">
  <img src="common/slide/images(5).jpg" alt="no">
  </div>
   <div class="welcome">
      <h1>
      <span>베이커리 카페</span>
      </h1>
      <h3> 
      <span>세상에 하나뿐인 베이커리</span>
      </h3>
   </div>
</div>
<div class="clear"></div>

<div id="contents" class="wrap">
    <div class="notice">
        <h2>공지사항</h2>
        <table class="table">
            <tr>
                <th>내용</th>
                <th>날짜</th>
            </tr>
            <tr>
                <td><a href="#">제1회 DD 베이커리 워크숍에 초대합니다(서울권).</a></td>
                <td>2017-12-12</td>
            </tr>
            <tr>
                <td><a href="#">올림픽공원 카페 초보 여성 창업을 추천받습니다.</a></td>
                <td>2017-12-10</td>
            </tr>
            <tr>
                <td><a href="#">맛과 영양, 환경문제까지 생각하는 베이커리!</a></td>
                <td>2018-03-09</td>
            </tr>
            <tr>
                <td><a href="#">고품질 크림으로 만든 디저트로 달콤하게 겨울나기</a></td>
                <td>2018-03-07</td>
            </tr>
            <tr>
                <td><a href="#">온가족이 함께 즐기는 베이킹 체험 교실</a></td>
                <td>2018-03-05</td>
            </tr>
        </table>
    </div>

    <div class="partner">
      <h2>Partner</h2>
      <div class="partner_info">
           <img src="common/partner/PARTNER.jpg" alt=" "><br>
           <img src="common/partner/PARTNER_UP.png" alt=" ">
      </div>
    </div>
    <div class="clear"></div>

    <div id="partner_up">
     <div class="body">
       <div class="partner_img">
           <img src="common/partner/PARTNER.jpg" alt=" " width="300">
           <img src="common/partner/PARTNER_UP.png" alt=" " width="500">
       </div>
       <div class="button"><br>
       <button type="button" id="btn-close">닫기</button>
       </div>
     </div>    
    </div>

    <div class="icon">
       <div class="icons">
           <div class="btn">
             <img src="common/icons/icon1.png" alt=" "><br>
             <button>고수의 레시피</button>
           </div>
           <div class="btn">
             <img src="common/icons/icon2.png" alt=" "><br>
             <button>모임 일정</button>
           </div>
           <div class="btn">
             <img src="common/icons/icon3.png" alt=" "><br>
             <button>식품안전관리</button>
           </div>
       </div>
    </div>
</div>
<div class="clear"></div>

<footer> 
<div class="wrap">
    <ul>
      <li><a href="#">법적고지</a></li>
      <li><a href="#">개인정보취급방침</a></li>
      <li><a href="#">개인정보처리방침</a></li>
    </ul>
<p>사업자번호:228-81-03754<br>
상호명:(주)디디베이커리<br>
대표자:다진<br>
개인정보관리책임자:윤준우<br>
상담전화:1588-0789<br>
사업장주소:서울특별시 금천구 가산동 가산디지털2로<br>
E-mail : master@ddbb.com</p>
</div>
<div class="clear"></div>
</footer>

</body>
</html>
hyun-young-luadmia-ParkKim commented 3 years ago

앗 왜 이렇게 올려지는지 잘 모르겠네요 ㅠㅠ

fbwogus12 commented 2 years ago

감사합니다.

fbwogus12 commented 2 years ago

맨땅에 헤딩하는 격이라 고민이 많았는데, 좋은 코드 내용 공유해주셔서 정말 감사합니다.