// 랜덤하게 회전시키기 $('#menu > li').add('article').each(function() { var rdm_num = Math.floor(Math.random() * 40) - 20; $(this).css('transform', 'rotate(' + rdm_num + 'deg)'); }); // 차례로 메뉴 올리기 var delay = 250; $('#menu > li').each(function() { $(this).animate({ 'margin-top': '-65px' }, delay += 100); }); // 메뉴 전환하기 $('#menu > li').click(function() { var idx = $('#menu > li').index($(this)); $('article').stop().animate({ 'top': '-900px' }, 500, function() { $('article').hide(); $('article').eq(idx).show().stop().animate({ 'top': '-400px' }, 500); }); });
<nav> <ul id="menu"> <li class="rotate"><span class="menu-text">HOME</span></li> <li class="rotate"><span class="menu-text">ABOUT</span></li> <li class="rotate"><span class="menu-text">SEARCH</span></li> <li class="rotate"><span class="menu-text">PHOTOS</span></li> <li class="rotate"><span class="menu-text">CONTACT</span></li> </ul> </nav> <article class="on rotate"> <div> <h2 class="title">HOME</h2> <p class="para">IF ANYBODY LOOKS AT A PICTURE BY CLAUDE MONET FROM THE POINT OF VIEW OF A RAPHAEL, HE WILL SEE NOTHING BUT A MEANINGLESS JARGON OF WILD PAINT-STROKES. AND IF ANYBODY LOOKS AT A RAPHAEL FROM THE POINT OF VIEW OF A CLAUDE MONET, HE WILL, NO DOUBT...</p> </div> </article> <article> <div> <h2 class="title">ABOUT</h2> <p class="para">IF ANYBODY LOOKS AT A PICTURE BY CLAUDE MONET FROM THE POINT OF VIEW OF A RAPHAEL, HE WILL SEE NOTHING BUT A MEANINGLESS JARGON OF WILD PAINT-STROKES. AND IF ANYBODY LOOKS AT A RAPHAEL FROM THE POINT OF VIEW OF A CLAUDE MONET, HE WILL, NO DOUBT...</p> </div> </article> <article> <div> <h2 class="title">SEARCH</h2> <p class="para">IF ANYBODY LOOKS AT A PICTURE BY CLAUDE MONET FROM THE POINT OF VIEW OF A RAPHAEL, HE WILL SEE NOTHING BUT A MEANINGLESS JARGON OF WILD PAINT-STROKES. AND IF ANYBODY LOOKS AT A RAPHAEL FROM THE POINT OF VIEW OF A CLAUDE MONET, HE WILL, NO DOUBT...</p> </div> </article> <article> <div> <h2 class="title">PHOTOS</h2> <p class="para">IF ANYBODY LOOKS AT A PICTURE BY CLAUDE MONET FROM THE POINT OF VIEW OF A RAPHAEL, HE WILL SEE NOTHING BUT A MEANINGLESS JARGON OF WILD PAINT-STROKES. AND IF ANYBODY LOOKS AT A RAPHAEL FROM THE POINT OF VIEW OF A CLAUDE MONET, HE WILL, NO DOUBT...</p> </div> </article> <article> <div> <h2 class="title">CONTACT</h2> <p class="para">IF ANYBODY LOOKS AT A PICTURE BY CLAUDE MONET FROM THE POINT OF VIEW OF A RAPHAEL, HE WILL SEE NOTHING BUT A MEANINGLESS JARGON OF WILD PAINT-STROKES. AND IF ANYBODY LOOKS AT A RAPHAEL FROM THE POINT OF VIEW OF A CLAUDE MONET, HE WILL, NO DOUBT...</p> </div> </article>
* { margin: 0; padding: 0; } html { width: 100%; min-width: 1024px; } ul { list-style-type: none; } #menu { position: absolute; right: 100px; z-index: 11; } #menu:after { display: block; content: ''; clear: both; } #menu > li { position: relative; margin-top: -40px; width: 100px; height: 100px; background: url(http://www.tympanus.net/Tutorials/GrungyRandomSlideOut/item.png) no-repeat center center; background-size: cover; text-align: center; line-height: 160px; font-weight: bold; text-shadow: 1px 1px 1px #fff; float: left; cursor: pointer; transition: all .5s; } #menu > li:hover { margin-top: -40px !important; } article { position: relative; box-sizing: border-box; padding: 0 100px 0 50px; top: -1000px; width: 824px; height: 850px; margin: 0 auto; background: url(http://www.tympanus.net/Tutorials/GrungyRandomSlideOut/bg.gif) no-repeat; background-size: cover; display: none; } article > div { position: absolute; padding: 0 50px 0 20px; bottom: 80px; } article.on { display: block; top: -400px; } .title { font-size: 50px; text-shadow: 2px 2px 2px #fff; margin-bottom: 30px; } .para { margin-left: 15px; font-size: 16px; font-weight: bold; }