본문 : https://velog.io/@si9138/Sprites-animation-nxapfrc4
도미노피자 (픽스버전)
창크기 반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>도미노피자 예제</title>
<style type="text/css">
/*초기화*/
*{margin:0; padding:0;}
ul li,ol li{list-style:none;}
/**/
html,body{
width: 100%;
height: 100%;
}
.bo{
border: 1px solid red; box-sizing: border-box; /*가이드라인*/
}
#wrapper{
width: 400%;
height: 100%;
background: url(/img/pizza_bg.jpg);
overflow: hidden;
position: absolute;/*.center의 포지션이 적용되지 않아서 추가*/
}
#wrapper>section{
width: 25%;
height: 100%;
float: left;
position: relative;/*.center의 포지션이 적용되지 않아서 추가*/
border: 1px solid red; box-sizing: border-box; /*가이드라인*/
}
.center{
position: absolute;
left: 50%;
}
/*각 섹션별*/
#wrapper>section:nth-child(1) .main{
width: 980px;height: 880px;
background: url(img/01village.png) ;
margin-left: -490px;
}
#wrapper>section:nth-child(2) .main{
width: 951px;height: 889px;
background: url(img/02factory.png) ;
margin-left: -475.5px;
}
#wrapper>section:nth-child(3) .main{
width: 968px;height: 756px;
background: url(img/03shop.png) ;
margin-left: -484px;
}
#wrapper>section:nth-child(4) .main{
width: 900px;height: 570px;
background: url(img/04market.png) left/contain no-repeat;
margin-left: -450px;
top: 10%;
}
/*모니터 크기가 작아져도 캐릭터가 메인 컨텐츠를 가리지 않도록 배치함*/
/*도로*/
#wrapper .street{
width: 100%;height: 42px;
background:url(img/street.png);
position: absolute;
bottom: 0px;
}
.bikeman{
width: 100px; height: 85px;
z-index: 1;
position: fixed; bottom: 0px;
background: url(img/bikeman.png);
}
/*각 섹션별 캐릭터*/
#wrapper>section:nth-child(1) .ch1{
width: 238px;
height: 350px;
background: url(img/character01.png);
margin-left: 500px;
bottom: 133px;
}
#wrapper>section:nth-child(1) .ch2{
width: 238px;
height: 300px;
background: url(img/character02.png);
margin-left: -680px;
bottom: 133px;
}
/**/
#wrapper>section:nth-child(2)>.ch1{
width: 304px;
height: 282px;
background: url(img/character03.png);
margin-left: 500px;
bottom: 133px;
}
#wrapper>section:nth-child(2)>.ch2{
width: 240px;
height: 346px;
background: url(img/character04.png);
margin-left: -680px;
bottom: 133px;
}
/**/
</style>
</head>
<body>
<div id="wrapper" class="bo">
<section>
<div class="main center"></div>
<div class="ch1 center bo"></div>
<div class="ch2 center bo"></div>
<div class="bikeman "></div>
</section>
<section>
<div class="main center"></div>
<div class="ch1 center bo"></div>
<div class="ch2 center bo"></div>
</section>
<section>
<div class="main center"></div>
<div class="ch1 center bo"></div>
<div class="ch2 center bo"></div>
</section>
<section>
<div class="main center"></div>
<div class="ch1 center bo"></div>
<div class="ch2 center bo"></div>
</section>
<div class="street"></div>
</div>
</body>
</html>도미노 피자 (스티키 버전)
fixed를 사용하기 위해 오버플로우 히든을 없앴고 바이크맨의 부모를 만들어 fixed가 잘 적용되면서 위치를 조정할수 있게 했다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>도미노피자 예제</title>
<style type="text/css">
/*초기화*/
*{margin:0; padding:0;}
ul li,ol li{list-style:none;}
/**/
html,body{
width: 100%;
height: 100%;
}
.bo{
border: 1px solid red; box-sizing: border-box; /*가이드라인*/
}
#wrapper{
width: 400%;
height: 100%;
background: url(/img/pizza_bg.jpg);
/* overflow: hidden; */
position: absolute;/*.center의 포지션이 적용되지 않아서 추가*/
}
#wrapper>section{
width: 25%;
height: 100%;
float: left;
position: relative;/*.center의 포지션이 적용되지 않아서 추가*/
border: 1px solid red; box-sizing: border-box; /*가이드라인*/
}
.center{
position: absolute;
left: 50%;
}
/*각 섹션별*/
#wrapper>section:nth-child(1) .main{
width: 980px;height: 880px;
background: url(img/01village.png) ;
margin-left: -490px;
}
#wrapper>section:nth-child(2) .main{
width: 951px;height: 889px;
background: url(img/02factory.png) ;
margin-left: -475.5px;
}
#wrapper>section:nth-child(3) .main{
width: 968px;height: 756px;
background: url(img/03shop.png) ;
margin-left: -484px;
}
#wrapper>section:nth-child(4) .main{
width: 900px;height: 570px;
background: url(img/04market.png) left/contain no-repeat;
margin-left: -450px;
top: 10%;
}
/*모니터 크기가 작아져도 캐릭터가 메인 컨텐츠를 가리지 않도록 배치함*/
/*도로*/
#wrapper .street{
width: 100%;height: 42px;
background:url(img/street.png);
position: absolute;
bottom: 0px;
}
.bikeparent{
border: 1px solid red; box-sizing: border-box; /*가이드라인*/
width: 200%; height: 80px;
position: absolute; left: 500px; bottom: 0px;
}
.bikeman{
width: 100px; height: 85px;
z-index: 1;
position: sticky; bottom: 0px; left:0;
background: url(img/bikeman.png);
}
/*각 섹션별 캐릭터*/
#wrapper>section:nth-child(1) .ch1{
width: 238px;
height: 350px;
background: url(img/character01.png);
margin-left: 500px;
bottom: 133px;
}
#wrapper>section:nth-child(1) .ch2{
width: 238px;
height: 300px;
background: url(img/character02.png);
margin-left: -680px;
bottom: 133px;
}
/**/
#wrapper>section:nth-child(2)>.ch1{
width: 304px;
height: 282px;
background: url(img/character03.png);
margin-left: 500px;
bottom: 133px;
}
#wrapper>section:nth-child(2)>.ch2{
width: 240px;
height: 346px;
background: url(img/character04.png);
margin-left: -680px;
bottom: 133px;
}
/**/
</style>
</head>
<body>
<div id="wrapper" class="bo">
<section>
<div class="main center"></div>
<div class="ch1 center bo"></div>
<div class="ch2 center bo"></div>
<div class="bikeparent">
<div class="bikeman "></div>
</div>
</section>
<section>
<div class="main center"></div>
<div class="ch1 center bo"></div>
<div class="ch2 center bo"></div>
</section>
<section>
<div class="main center"></div>
<div class="ch1 center bo"></div>
<div class="ch2 center bo"></div>
</section>
<section>
<div class="main center"></div>
<div class="ch1 center bo"></div>
<div class="ch2 center bo"></div>
</section>
<div class="street"></div>
</div>
</body>
</html>sprites 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_sprotes이미지 가져오기</title>
<style type="text/css">
/*초기화*/
*{margin:0; padding:0;}
ul li,ol li{list-style:none;}
/**/
.home{
width: 44.666px;
height: 44px;
background: url(images/img_navsprites.gif);
}
.left{
width: 43px;
height: 44px;
background: url(images/img_navsprites.gif) -47px 0;
}
.right{
width: 43px;
height: 44px;
background: url(images/img_navsprites.gif) -90.9px 0;
}
ul li{
float: left;
}
ul{
width: 959px;
height: 190px;
}
ul li:nth-child(1){
width: 322px;
height: 190px;
background: url(images/menu.png);
}
ul li:nth-child(2){
width: 316px;
height: 190px;
background: url(images/menu.png)-322px 0;
}
ul li:nth-child(3){
width: 321px;
height: 190px;
background: url(images/menu.png)-638px 0;
}
ul li:nth-child(1):hover{
width: 322px;
height: 190px;
background: url(images/menu.png) 0px 179px;
}
ul li:nth-child(2):hover{
width: 316px;
height: 190px;
background: url(images/menu.png)-322px 179px;
}
ul li:nth-child(3):hover{
width: 321px;
height: 190px;
background: url(images/menu.png)-638px 179px;
}
</style>
</head>
<body>
<div class="combination"></div>
<div class="home"></div>
<div class="left"></div>
<div class="right"></div>
<hr>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>02_sprites animation
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02_sprites animation</title>
<style type="text/css">
/*초기화*/
.frame {
border: 1px solid red;
box-sizing: border-box;
/*가이드라인*/
width: 99.8px;
height: 203px;
overflow: hidden;
}
/*5프레임 애니메이션*/
.film {
width: 499px;
height: 203px;
background: url(images/film.png)no-repeat;
animation-name: movie;
animation-duration: 3s;
animation-timing-function: steps(5);
animation-iteration-count: infinite;
}
@keyframes movie {
/*0인경우 생략가능*/
from {background-position: 0}
to {background-position: -498.1px;}
}
/*3프레임 애니메이션*/
.potato {
width: 100px;
height: 215px;
background: url(images/potato1.png);
animation: potato 1s steps(3) infinite;
}
@keyframes potato {
0% {background-position: 0}
100% {background-position: -300px;}
}
/*3프레임 애니메이션*/
.potatoman2{
width: 100px;
height: 173px;
background: url(images/potato2.png);
animation: potato2 1s steps(4) infinite;
}
@keyframes potato2{
0%{background-position: 0;}
100%{background-position: -400px;}
}
/*2프레임 애니메이션*/
.manwalk{
width: 298px;
height: 487px;
background: url(images/man_walking_selfEX.png);
animation: manwalk 1s steps(2) infinite;
}
@keyframes manwalk{
from{background-position:0}
to{background-position: -597px;}
}
</style>
</head>
<body>
<h1>spreites애니메이션으 원리</h1>
<div class="frame">
<div class="film"></div>
</div>
<h1>potatoman</h1>
<div class="potato"></div>
<h1>potatoman2</h1>
<div class="potatoman2"></div>
<h1>manwalk</h1>
<div class="manwalk"></div>
</body>
</html>프링글수 웹 & navi
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_프링글스 웹&navi</title>
<style>
*{margin: 0;
padding: 0;}
html,body{
width: 100%;
height: 100%;
/*border:1px solid blue;*/
background: url(img/bg/gradient_bg.jpg);
background-size: 500%;
}
#wrapper{
width: 500%;
height: 100%;
background: url(img/bg/bg.png) no-repeat left top/100%;
position: absolute;
}
#wrapper>section{
width: 20%;
height: 100%;
float: left;
position: relative;
/*border:1px solid red;*/
box-sizing: border-box;
/*background-color: black;*/
}
/*상단 navi#lnb*/
nav#lnb{
/*border:1px solid purple;*/
width: 972px;
height: 179px;
position: absolute;
left:50%;
margin-left: -486px;
top:50px;
}
nav#lnb ul{
/*border:1px solid red;*/
width: 1135px;
height: 258px;
background: url(img/nav/lnb_bg.png) no-repeat 110px;
overflow: hidden;
}
nav#lnb ul li{
width: 130px;
height: 46px;
/*border:1px solid black;*/
float: left;
list-style: none;
position: relative;
}
nav#lnb ul li:nth-child(1){
width: 163px;
height: 258px;
background: url(img/nav/lnb_01home.png);
}
nav#lnb ul li:nth-child(2){
width: 191px;
height: 53px;
background: url(img/nav/lnb_02pringles.png);
top:105px;
left:50px;
}
nav#lnb ul li:nth-child(2):hover{
background: url(img/nav/lnb_02pringles_on.png);
}
nav#lnb ul li:nth-child(3){
width: 165px;
height: 39px;
background: url(img/nav/lnb_03product.png);
top:105px;
left:80px;
}
nav#lnb ul li:nth-child(3):hover{
background: url(img/nav/lnb_03product_on.png);
}
nav#lnb ul li:nth-child(4){
background: url(img/nav/lnb_04media.png);
top:110px;
left:110px;
}
nav#lnb ul li:nth-child(4):hover{
background: url(img/nav/lnb_04media_on.png);
}
nav#lnb ul li:nth-child(5){
height: 45px;
background: url(img/nav/lnb_05event.png);
top:110px;
left:140px;
}
nav#lnb ul li:nth-child(5):hover{
background: url(img/nav/lnb_05event_on.png);
}
nav#lnb a, nav#gnb a{
width: 100%;
height: 100%;
display: block;
text-indent: -9999px;
}
/*하단의 nav#gnb style*/
nav#gnb{
width: 840px;
height: 150px;
border:1px solid yellow;
background: url(img/nav/snb_bg.png) no-repeat 50px 0;
position: fixed;
bottom: 50px;
left:50%;
margin-left: -385px;
z-index: 9999;
}
nav#gnb li{
border:1px solid blue;
width: 54px;
height: 42px;
list-style: none;
float: left;
position: absolute;
top:12px;
}
nav#gnb li:nth-child(1){
background: url(img/nav/snb_01home.png);
left:107px;
}
nav#gnb li:nth-child(2){
background: url(img/nav/snb_02pringles.png);
left:250px;
}
nav#gnb li:nth-child(3){
background: url(img/nav/snb_03product.png);
left:410px;
}
nav#gnb li:nth-child(4){
background: url(img/nav/snb_04media.png);
left:572px;
}
nav#gnb li:nth-child(5){
background: url(img/nav/snb_05event.png);
left:733px;
}
/*카트 스타일*/
nav#gnb .cart{
width: 109px;
height: 85px;
background: url(img/nav/snb_car.png);
position: relative;
left:0;
top:50px;
}
/*#gnb의 해당 메뉴에 호버시, 혹은 활성화시 카트 이동*/
nav#gnb li:nth-child(1):hover~.cart,nav#gnb li:nth-child(1).active~.cart{
/*left:80px;*/
animation:move1 1s;
animation-fill-mode:forwards;
}
@keyframes move1{
from{}
to{left:80px;}
}
nav#gnb li:nth-child(2):hover~.cart,nav#gnb li:nth-child(2).active~.cart{
animation:move2 1s;
animation-fill-mode:forwards;
/*left:220px;*/
}
@keyframes move2{
from{}
to{left:220px;}
}
nav#gnb li:nth-child(3):hover~.cart,nav#gnb li:nth-child(3).active~.cart{
animation:move3 1s;
animation-fill-mode:forwards;
/*left:220px;*/
}
@keyframes move3{
from{}
to{left:380px;}
}
nav#gnb li:nth-child(4):hover~.cart,nav#gnb li:nth-child(4).active~.cart{
animation:move4 1s;
animation-fill-mode:forwards;
/*left:220px;*/
}
@keyframes move4{
from{}
to{left:540px;}
}
nav#gnb li:nth-child(5):hover~.cart,nav#gnb li:nth-child(5).active~.cart{
animation:move5 1s;
animation-fill-mode:forwards;
/*left:220px;*/
}
@keyframes move5{
from{}
to{left:700px;}
}
</style>
</head>
<body>
<!-- #wrapper>(section#home>nav#lnb>ul>li*5>a[href="#"]>{menu$}^^^^nav#gnb>ul>li*5>a[href="#"]>{menu$})+section#pringles+section#product+section#media+section#event -->
<div id="wrapper">
<section id="home">
section1
<nav id="lnb">
<ul>
<li><a href="#home">home</a></li>
<li><a href="#pringles">pringles</a></li>
<li><a href="#product">product</a></li>
<li><a href="#media">media</a></li>
<li><a href="#event">event</a></li>
</ul>
</nav>
<nav id="gnb">
<ul>
<li><a href="#home">home</a></li>
<li><a href="#pringles">pringles</a></li>
<li class="active"><a href="#product">product</a></li>
<li><a href="#media">media</a></li>
<li><a href="#event">event</a></li>
<div class="cart"></div>
</ul>
</nav>
</section>
<section id="pringles">section2</section>
<section id="product">section3</section>
<section id="media">section4</section>
<section id="event">section5</section>
</div>
</body>
</html>7brau
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>7brau</title>
<style type="text/css">
/*초기화*/
*{margin:0; padding:0;}
ul li,ol li{list-style:none;}
/**/
html,body{
width: 100%; height: 100%;
}
#wrapper{
width: 100%; height: 700%;
}
#gnb ul{
width: 154px;
position: fixed;
border: 1px solid red; box-sizing: border-box; /*가이드라인*/
}
#gnb>ul li{
width: 100%; height: 46px;
text-indent: -99999px;
}
#gnb>ul li:nth-child(1){
background: url(img/gnb_01.png)center bottom/100%;
height: 161px;
}
#gnb li:nth-child(2){
background: url(img/gnb_02.png)center/100%;
}
#gnb li:nth-child(3){
background: url(img/gnb_03.png)center/100%;
}
#gnb li:nth-child(4){
background: url(img/gnb_04.png)center/100%;
}
#gnb li:nth-child(5){
background: url(img/gnb_05.png)center/100%;
}
#gnb li:nth-child(6){
background: url(img/gnb_06.png)center/100%;
}
#gnb li:nth-child(7){
background: url(img/gnb_07.png)center/100%;
}
#gnb>ul li:nth-child(1):hover{
background: url(img/gnb_hover_01.png) 0.5px 0px/99.5%;
height: 161px;
}
#gnb li:nth-child(2):hover{
background: url(img/gnb_hover_02.png) 0.5px 0px/99.5%;
}
#gnb li:nth-child(3):hover{
background: url(img/gnb_hover_03.png) 0.5px 0px/99.5%;
}
#gnb li:nth-child(4):hover{
background: url(img/gnb_hover_04.png) 0.5px 0px/99.5%;
}
#gnb li:nth-child(5):hover{
background: url(img/gnb_hover_05.png) 0.5px 0px/99.5%;
}
#gnb li:nth-child(6):hover{
background: url(img/gnb_hover_06.png) 0.5px 0px/99.5%;
}
#gnb li:nth-child(7):hover{
background: url(img/gnb_hover_07.png) 0.5px 0px/99.5%;
}
#gnb>ul li>a{
display: block;
width: 100%; height: 100%;
}
section{
border: 1px solid red; box-sizing: border-box; /*가이드라인*/
width: 90%;
height: 100%;
margin:0 0 auto auto
}
</style>
</head>
<body>
<div id="wrapper">
<nav id="gnb">
<ul>
<li><a href="#7brau">7brau</a></li>
<li><a href="#process">process</a></li>
<li><a href="#products">products</a></li>
<li><a href="#award">award</a></li>
<li><a href="#store">store</a></li>
<li><a href="#event">event</a></li>
<li><a href="#sns">sns</a></li>
</ul>
</nav>
<section id="7brau">7brau</section>
<section id="process">process</section>
<section id="products">products</section>
<section id="award">award</section>
<section id="store">store</section>
<section id="event">event</section>
<section id="sns">sns</section>
</div>
</body>
</html>burgerking
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>burgerking</title>
<style type="text/css">
/*초기화*/
*{margin:0; padding:0;}
ul li,ol li{list-style:none;}
/**/
html,body{
width: 100%; height: 100%;
}
#wrapper{
width: 500%; height: 100%;
overflow: hidden;
}
/**/
#wrapper ul{
width: 601px; height: 160px;
position: fixed;
bottom: 2%;
left: 50%;
transform: translate(-50%, 0);
overflow: hidden;
}
#wrapper>nav li{
width: 20%; height: 100%;
float: left;
text-indent: -9999999px;
}
#wrapper>nav li:nth-child(1){
background: url(img/nav_01.png) center/contain no-repeat;
}
#wrapper>nav li:nth-child(2){
background: url(img/nav_02.png) center/contain no-repeat;
}
#wrapper>nav li:nth-child(3){
background: url(img/nav_03.png) center/contain no-repeat;
}
#wrapper>nav li:nth-child(4){
background: url(img/nav_04.png) center/contain no-repeat;
}
#wrapper>nav li:nth-child(5){
background: url(img/nav_05.png) center/contain no-repeat;
}
#wrapper>nav li:nth-child(1):hover{
background: url(img/ani_1.png);
animation: menu1 1s steps(7) infinite;
}
@keyframes menu1{
from{background-position: 0;}
to{background-position: -840px;}
}
#wrapper>nav li:nth-child(2):hover{
background: url(img/ani_2.png);
animation: menu2 1s steps(7) infinite;
}
@keyframes menu2{
from{background-position: 0;}
to{background-position: -840px;}
}
#wrapper>nav li:nth-child(3):hover{
background: url(img/ani_3.png);
animation: menu3 1s steps(7) infinite;
}
@keyframes menu3{
from{background-position: 0;}
to{background-position: -840px;}
}
#wrapper>nav li:nth-child(4):hover{
background: url(img/ani_4.png);
animation: menu4 1s steps(7) infinite;
}
@keyframes menu4{
from{background-position: 0;}
to{background-position: -840px;}
}
#wrapper>nav li:nth-child(5):hover{
background: url(img/ani_5.png);
animation: menu5 1s steps(7) infinite;
}
@keyframes menu5{
from{background-position: 0;}
to{background-position: -840px;}
}
#wrapper>nav li a{
width: 100%;
height: 100%;
display: block;
}
/**/
#wrapper section{
border: 1px solid red; box-sizing: border-box; /*가이드라인*/
float: left;
width: 20%; height: 100%;
}
#wrapper section:nth-child(2){
background: url(img/shop_01.png)center/cover;
}
#wrapper section:nth-child(3){
background: url(img/story_02.png)center/cover;
}
#wrapper section:nth-child(4){
background: url(img/event_03.png)center/cover;
}
#wrapper section:nth-child(5){
background: url(img/menu_04.png)center/cover;
}
#wrapper section:nth-child(6){
background: url(img/board_05.png)center/cover;
}
</style>
</head>
<body>
<div id="wrapper">
<nav id="gnb">
<ul>
<li><a href="#home">home</a></li>
<li><a href="#why">why</a></li>
<li><a href="#event">event</a></li>
<li><a href="#menu">menu</a></li>
<li><a href="#qna">qna</a></li>
</ul>
</nav>
<section id="home">home</section>
<section id="why">why</section>
<section id="event">event</section>
<section id="menu">menu</section>
<section id="qna">qna</section>
</div>
</body>
</html>
풀스택 국비수강중