데일리 코딩

코딩 37일째

파푸가 2016. 12. 8. 17:52

이미지 캡션


------------------------------------------------------------------------------------------


<!DOCTYPE html>

<html lang="ko">

<head>

 <meta charset="UTF-8">

 <title>이미지와 캡션 표현</title>

 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Play">

 <link rel="stylesheet" href="css/main.css">

 <script src="js/modernizr-custom.js"></script>

 <script src="js/jquery-1.12.4.min.js"></script>

 <script src="js/jquery-ui.min.js"></script>

 <script src="js/photo.js"></script>

</head>

<body>

<!-- header-->

 <header>

  <h1 id="logo">Interactive jQuery</h1>

 </header>

 

<!-- section-->

<!-- section>h2{이미지효과와 캡션}+div.inner>(p>img[src=img/pic_0$.jpg alt=새$ title=새$입니다]+strong{Bird$}+span)*3-->

 <section>

  <h2>이미지효과와 캡션</h2>

  <div class="inner">

  

   <p>

    <img src="img/pic_01.jpg" alt="새1" title="새1입니다">

    <strong>Bird1</strong>

    <span></span>

   </p>

   

   <p>

    <img src="img/pic_02.jpg" alt="새2" title="새2입니다">

    <strong>Bird2</strong>

    <span></span>

   </p>

   

   <p>

    <img src="img/pic_03.jpg" alt="새3" title="새3입니다">

    <strong>Bird3</strong>

    <span></span>

   </p>

  </div>

 </section>

 

<!-- footer-->

 <footer>

  <h3>Copyright &copy; 2016</h3>

 </footer>

</body>

</html>


------------------------------------------------------------------------------------------

@charset "utf-8";
@import url(normalize.css);

/*base*/
body {font-family: play;background: #777}

/*header*/
header {background: #eee}
#logo {
 width: 980px;line-height: 80px;
 margin: auto;
 color: #222;
 cursor: pointer;
 transition: all 1s;
}
#logo:first-letter {
 color: #0af;
}
#logo:hover {
 letter-spacing: 2px;
}

/*section*/
section {background: #f87}
section h2 {
 width: 980px;
 margin: auto;
 padding: 20px 0;
 text-align: center;
}
section > .inner {
 position: relative;
 width: 980px;
 margin: auto;
 padding-bottom: 50px;
}

/*footer*/
footer {
 background: #777;color: #eee
}
footer > h3 {
 width: 980px;line-height: 80px;
 margin: auto;
 text-align: center
}

/*본문내용*/
.inner p {
 position: relative;
 width: 580px;height: 380px;
 margin: auto;
 margin-bottom: 50px;
 cursor: pointer;
 overflow: hidden;
}
.inner p strong {
 position: absolute;
 bottom: 0;
 width: 540px;line-height: 40px;
 font-size: 20px;
 color: #fff;
 letter-spacing: 2px;
 display: block;
 padding: 20px;
 z-index: 2;
}
.inner p span {
 position: absolute;
 top: 0;left: 0;
 width: 100%;height: 100%;
 background: rgba(160, 235, 135, 0.5);
 display: block;
 z-index: 1;
 opacity: 0;
}
.inner p img {display: block;}

.inner p:nth-child(1) strong {
 opacity: 0
}
.inner p:nth-child(2) strong {
 opacity: 0;
 left: -100%
}
.inner p:nth-child(3) strong {
 bottom: -80px;
 background: rgba(50, 50, 50, 1)
}

.inner p:nth-child(3) img {
 position: absolute;
 top: 0
}

------------------------------------------------------------------------------------------


$(function(){

 var sp = 500,

     $pics = $('.inner p');

 /*첫번째 이미지*/

$pics.filter(':nth-child(1)')

  .on('mouseover focus',function(){

  $(this).children().stop().animate({

   //children은 한번만 사용가능

   opacity: 1

  },sp,'easeInExpo');

 })

 .on('mouseout blur',function(){

  $(this).find('strong, span').stop().animate({

   opacity: 0

  },sp,'easeOutExpo');

 });

 

 /*두번째 이미지*/

 $pics.filter(':nth-child(2)')

  .on('mouseover focus', function(){

  $(this).find('span').stop().animate({

   opacity: 1

  },sp,'easeInBounce');

  $(this).find('strong').stop().animate({

   opacity: 1,

   left: 0

  },sp,'easeInBounce');

 })

  .on('mouseout blur', function(){

  $(this).find('span').stop().animate({

   opacity: 0

  },sp*2,'easeOutBounce');

  $(this).find('strong').stop().animate({

   opacity: 0,

   left: '-100%'

  },sp,'easeOutBounce');

 });

  

$pics.filter(':nth-child(2)')

  .on('mouseover focus', function(){

  $(this).find('span').stop().animate({

   opacity: 1

  },sp,'easeInBounce');

  $(this).find('strong').stop().animate({

   opacity: 1,

   left: 0

  },sp,'easeInBounce');

 })

  .on('mouseout blur', function(){

  $(this).find('span').stop().animate({

   opacity: 0

  },sp*2,'easeOutBounce');

  $(this).find('strong').stop().animate({

   opacity: 0,

   left: '-100%'

  },sp,'easeOutBounce');

 });

   //children안 되는 이유: 자식이 아닌 것이 있어서

 

------------------------------------------------------------------------------------------


toggle aside


------------------------------------------------------------------------------------------


<!DOCTYPE html>

<html lang="ko">

<head>

 <meta charset="UTF-8">

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

 <title>toggle aside</title>

 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poiret+One">

 <link rel="stylesheet" href="css/main.css">

 <script src="js/modernizr-custom.js"></script>

 <script src="js/jquery-1.12.4.min.js"></script>

 <script src="js/jquery-ui.min.js"></script>

 <script src="js/aside.js"></script>

</head>

<body>

 <header>

  <h1 id="logo">toggle Side Menu</h1>

 </header>

 

 <section></section>

 

 <aside>

  <h2>toggle Menu</h2>

  <ul>

   <li><a href="#">

    <img src="img/aside_01.png" alt="menu1"></a></li>

   <li><a href="#">

    <img src="img/aside_02.png" alt="menu2"></a></li>

   <li><a href="#">

    <img src="img/aside_03.png" alt="menu3"></a></li>

  </ul>

  <button>

   <img src="img/btn_open.png" alt="메뉴열기">

  </button>

 </aside>

 

 <footer>

  <h3>Copyright &copy; 2016</h3>

 </footer>

</body>

</html>


------------------------------------------------------------------------------------------


@charset "utf-8";

@import url(normalize.css);


body {

 font-family: 'Poiret One';

 color: #333;

 background: #0c0

}


/*header*/

header {

 width: 95%;

 position: fixed;

 background: #fff;

 box-shadow: 0 1px 3px #777;

 padding: 10px 2.5%

}

#logo {

 text-transform: capitalize;

 line-height: 50px;

 text-align: center

}


/*section*/

section {}


/*aside*/

aside {

 width: 192px;height: 100%;

 position: fixed;

 left: ;

 padding: 20px 50px;

 padding-top: 100px;

 background: rgba(255, 255, 135, 0.7)

}

aside > h2 {

 color: #fff;

 text-align: center;

 margin-bottom: 20px;

 text-shadow: 0 0 5px #00f;

 text-transform: capitalize

}

aside > ul {}

aside > ul > li {

 margin-bottom: 10px

}

aside > ul > li img {display: block}

aside > ul > li a {

 display: block;

 border-radius: 100px;

 opacity: 0.7;

 transition: all 0.2s

}

aside > ul > li a:hover,

aside > ul > li.on a{

 opacity: 1;

 transform: scale(1.1);

 box-shadow: 3px 3px 7px #111

}

aside > button {

 position: absolute;

 top: 150px;right: -52px;

 background: rgba(255, 255, 135, 0.7);

 cursor: pointer;

 border-radius: 0 30px 30px 0

}


/*footer*/

footer {

 width: 100%;

 position: fixed;

 bottom: 0;

 background: #777;

 color: #eee;

 box-shadow: 0 -1px 3px #333

}

footer > h3 {

 line-height: 50px;

 text-align: center;

 letter-spacing: 1px

}


/*z-index*/

header {z-index: 1}

aside {z-index: 0}

footer {z-index: 1}


------------------------------------------------------------------------------------------


$(function(){

 //.toggleClass():줬다 뺏는것, hasClass()

 var sp = 1000,

     easing = 'easeInOutSine',

     $aside = $('aside'),

     $btn = $aside.find('button');

 

  $btn.on('click', function(){

   $aside.toggleClass('on');

   if($aside.hasClass('on')){

    $aside.stop().animate({

     left: 0

    }, sp, easing);

    $btn.find('img').attr({

     src: 'img/btn_close.png',

     alt: '닫기버튼',

     title: '닫기'

    });

   }else{

    $aside.stop().animate({

     left: '-292px'

    }, sp, easing);

    $btn.find('img').attr({

     src: 'img/btn_open.png',

     alt: '열기버튼',

     title: '열기'

    });

   }

  });


});




저작자표시 비영리 변경금지 (새창열림)