비주얼 스튜디오 코드 76_파노라마

☭DEVELOPER/#2 웹개발(자바기반 풀스택)

비주얼 스튜디오 코드 76_파노라마_완성

조반짝 2023. 7. 13. 13:59

728x90

[face4 영역 작업]

html mark up

-video: 경로지정해서 영상 삽입 후 뒤에 효과 명령어 넣기

controls: 시작, 정지 버튼이 활성화

muted: 음소거 , muted와 autoplay를 같이 써줘야 autoplay이가 실행이 된다.

.face4 css edit

video size 줄이기

width: 100%

p태그와 em태그를 옆으로 나열하는 방법

1. float(left, right)로 띄워줌 단, 부모태그에 overflow: hidden 이나 clearfix 적용

2. display: inline-block >> 너비값이 있어야함

3. position 으로 위치지정

[.face5 영역 작업]

html markup

.face5 css edit

.pic 이미지 편집

backgroud-size 대신에 backgroud: url 이미지 경로 주소 뒤에 / cover 로 사이즈 조정 가능하다.

top: 100% 위로 올라가서 안보임

hover 시 효과 주기위해 top으로 .reflect 위치 지정

[face6 영역 작업]

html mark up

.face6 css edit

fontawesome 추가

세부 html mark up

.face6 css edit

[face7 영역 작업]

html mark up

.face7 css edit

동영상 크기 편집

object-fit : cover - 이미지, 객체에 써주는 비율 조정

[face8 영역 작업]

html mark up

.face8 css edit

세부 html mark up

css edit

● b태그 : bold 진하게

세부 html mark up

css edit

2번과 3번은 스타일요소가 똑같기 때문에 , 를 넣고 복사해서 3번으로 변경하면 똑같이 스타일이 적용된다.

face 영역을 다 편집했다.

display: none 해놓았던 각 face에 감추기를 해제한다.

모든영역이 겹쳐져있다. face 영역을 회전시켜야함

8각형이기 때문에 45도씩 Y 축으로 회전시킨다.

중간에 원기둥을 넣어서 거리값을 적용해주어야한다.

원의 넓이를 구해야함

원의 넓이 = (원의 반지름 * 원의 반지름)*3.14

w600 * 8 =4800

2R * 3.14 = 4800

R= 764.3312...

중심점에서 Z값 만큼 -764px 띄워줘야한다.

우리는 안쪽에서 바라보는 시점으로 출력해야하기때문에

#circle article 에 backface-visibility: hidden;으로 뒷면을 감추어주어야한다.

animation 적용

회전하면서 하나당 하나씩 마우스 오버시 멈추게하는 이벤트

이 스크립트는 함수가 필요없기 때문에 따로 스크립트 경로가 필요하지 않다.

●animationPlayState

마우스를 올려놓으면 멈추고 마우스가 떠나가면 다시 애니메이션이 작동한다.

<html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>파노라마 회사소개</title>
    <link rel="stylesheet" href="./css/all.min.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <main class="wrap">
        <video src="./img/bg.mp4" loop autoplay muted></video>
        <!-- circle 8개의 면을 하나로 묶어주는 wrap 역할 -->
        <section id="circle">
            <article class="face1">
                <h2>Co Company</h2>
                <div class="inner">
                    <div>
                        <p><i class="fa-brands fa-android"></i></p>
                        <h3>Android</h3>
                    </div>
                    <div>
                        <p><i class="fa-brands fa-apple"></i></p>
                        <h3>Apple</h3>
                    </div>
                    <div>
                        <p><i class="fa-brands fa-twitter"></i></i></p>
                        <h3>Twitter</h3>
                    </div>
                    <div>
                        <p><i class="fa-brands fa-facebook"></i></i></p>
                        <h3>Facebook</h3>
                    </div>
                    <div>
                        <p><i class="fa-brands fa-youtube"></i></p>
                        <h3>YouTube</h3>
                    </div>
                    <div>
                        <p><i class="fa-brands fa-google"></i></p>
                        <h3>Google</h3>
                    </div>
                </div>
            </article>

            <article class="face2">
                <h2>What's New</h2>
                <div class="inner">
                    <div>
                        <h3>New n Articles</h3>
                        <img src="./img/pattern.jpg" alt="pattern image">
                        <h4>What is Lorem Ipsum?</h4>
                        <p>
                            Lorem: 텍스트 자동 완성 기능<br>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit.<br> Beatae, explicabo quia error perspiciatis eveniet deserunt assumenda corporis minima voluptas consequatur quibusdam consectetur quae numquam recusandae vel quas. <br>Harum, sunt a!
                            Beatae, explicabo quia error perspiciatis eveniet deserunt assumenda corporis minima voluptas consequatur quibusdam consectetur quae numquam recusandae vel quas.<br>Harum, sunt a!
                        </p>
                    </div>
                </div>
            </article>

            <article class="face3">
                <h2>Member</h2>
                <div class="inner">
                    <div>
                        <div class="pic"></div>
                        <div class="con">
                            <h3>Member Information1</h3>
                            <p>Here comes Member Information contents in detail.Here comes Member Information contents in detail.</p>
                            <span>2023-07-07</span>
                        </div>
                    </div>
                    <div>
                        <div class="pic"></div>
                        <div class="con">
                            <h3>Member Information2</h3>
                            <p>Here comes Member Information contents in detail.Here comes Member Information contents in detail.</p>
                            <span>2023-07-07</span>
                        </div>
                    </div>
                    <div>
                        <div class="pic"></div>
                        <div class="con">
                            <h3>Member Information3</h3>
                            <p>Here comes Member Information contents in detail.Here comes Member Information contents in detail.</p>
                            <span>2023-07-07</span>
                        </div>
                    </div>
                </div>
            </article>

            <article class="face4">
                <h2>Advertisment</h2>
                <div class="inner">
                    <div>
                        <video src="./img/intro.mp4" autoplay loop controls muted></video>
                        <h3>Promotion</h3>
                        <p>Here comes Promotion contents in detail.Here comes Promotion contents in detail.<br><br>Here comes Promotion contents in detail.</p>
                    </div>
                    <div>
                        <h3>Information</h3>
                        <p>Here comes Promotion contents in detail.</p>
                        <em>2023.07.13</em>
                    </div>
                </div>
            </article>

            <article class="face5">
                <h2>DCODELAB</h2>
                <div class="inner">
                    <div>
                        <img src="./img/tit.png" alt="DCODELAB">
                        <div class="pic"></div>
                            <img src="./img/txt.png" alt="text">
                            <img src="./img/btn.png" alt="button">
                            <img src="./img/reflect.png" alt="reflect" class="reflect">
                    </div>
                </div>
            </article>

            <article class="face6">
                <h2>Services</h2>
                <div class="inner">
                    <div>
                        <i class="fa-solid fa-rss"></i>
                        <div class="con">
                            <h3>Network Services</h3>
                            <p>Here comes Promotion contents in detail.</p>
                        </div>
                    </div>
                    <div>
                        <i class="fa-solid fa-code"></i>
                        <div class="con">
                            <h3>Network Services</h3>
                            <p>Here comes Promotion contents in detail.</p>
                        </div>
                    </div>
                    <div>
                        <i class="fa-solid fa-envelope"></i>
                        <div class="con">
                            <h3>Customer Services</h3>
                            <p>Here comes Promotion contents in detail.</p>
                        </div>
                    </div>
                    <div>
                        <i class="fa-solid fa-list"></i>
                        <div class="con">
                            <h3>Network Services</h3>
                            <p>Here comes Promotion contents in detail.</p>
                        </div>
                    </div>
                </div>
            </article>

            <article class="face7">
                <h2>Promotion</h2>
                <div class="inner">
                    <div>
                        <div>
                            <video src="./img/loop.mp4" autoplay loop muted></video>
                            <h3>Promote <br>Your<br>Company</h3>
                            <img src="./img/txt2.png" alt="who's next">
                            <img src="./img/line.png" alt="2line">
                        </div>
                    </div>
                </div>
            </article>

            <article class="face8">
                <h2>Temperature</h2>
                <div class="inner">
                    <div>
                        <h3>Weather</h3>
                        <i class="fa-solid fa-cloud"></i>
                        <span>26<em>o</em></span>
                    </div>
                    <div>
                        <i class="fa-solid fa-sun"></i>
                        <h4>Sunny</h4>
                        <p>Afternoon temperature</p>
                        <h5>23<b>o</b></h5>
                    </div>
                    <div>
                        <i class="fa-solid fa-bolt-lightning"></i>
                        <h4>Lightning</h4>
                        <p>Night temperature</p>
                        <h5>18<b>o</b></h5>
                    </div>
                </div>
            </article>
        </section>
    </main>

    <script>
        const circle = document.querySelector("#circle");
        const article = document.querySelectorAll("article");

        for(let el of article){
            // 마우스를 올려놓으면 이벤트를 발생하겠다. "paused"을
            el.addEventListener("mouseenter",(e)=>{
                circle.style.animationPlayState = "paused";
            });
            el.addEventListener("mouseleave",(e)=>{
                circle.style.animationPlayState = "running";
            });
        }
    </script>
</body>
</html>

<css>

@charset "utf-8";


@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap');
 /* font-family: 'Orbitron', sans-serif; */

*{
    margin: 0;
    padding: 0;
}
ol,ul,li{
    list-style: none;
}
a{
    outline: 0;
    text-decoration: none;
}

/* body는 바탕화면 */
body{
    font: 17px/1.4 "Orbitron";
    letter-spacing: 1px;
    color: #ddd;
    background-color: #000;
}
h3{
    font-size: 24px;
}
.wrap{
    position: fixed;
    width: 100%;
    height: 100%;
    /* 투영점 */
    perspective: 1300px;
}
.wrap > video{
    width: 100%;
    height: 100%;
    /* 너비 높이 강제로 100%로 줬기 때문에 비율 맞추기 */
    object-fit: cover;
    opacity: 0.5;
}
#circle{
    width: 600px;
    height: 800px;
    position: absolute;
    /* border: 1px solid aqua; */
    /* 화면 중앙으로 위치하기 */
    top: 50%;
    left: 50%;
    /* 너비,높이값의 1/2 */
    margin-top: -400px;
    margin-left: -300px;
    /* perspective 3d 효과 넣기 위해 지정 */
    transform-style: preserve-3d;
    animation: ani linear 30s infinite;
}
@keyframes ani{
    0%{transform: rotateY(0deg);}
    100%{transform: rotateY(360deg);}
}

#circle article{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* background-color: rgba(255, 255, 255, 0.4); */
    /* display: none; */

    backface-visibility: hidden;
}
#circle article h2{
    position: absolute;
    left: 0;
    top: 0;
    font-size: 30px;
    opacity: 0;
    transition: all 0.5s;
}
#circle article:hover h2{
    opacity: 1;
    top: -60px;
}

#circle article .inner{
    width: 100%;
    height: 100%;
}
#circle article .inner > div{
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.06);
    padding: 50px;
    opacity: 0.7;
    /* div 박스안에 다양한 요소의 기준점 */
    position: relative;
    /* div 박스 안에만 나오게 */
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s;   
}
#circle article .inner > div:hover{
    /* 마우스오버시 투명도가 더 진해짐 */
    background-color: rgba(255, 255, 255, 0.15);
    transform: scale(1.03);
    opacity: 1;
}
#circle .inner>div:hover h3{
    color: lightcyan;
    text-shadow: 0 0 10px aqua;
}

/* face1 */
#circle .face1{
    /* display: block; */
}
#circle .face1 .inner>div{
    width: 290px;
    height: 254px;
    float: left;
    margin-bottom: 20px;
    text-align: center;
    
}

/* 홀수 div 오른쪽 여백 주기 */
#circle .face1 .inner>div:nth-of-type(2n-1){
    margin-right: 20px;
}

#circle .face1 .inner>div h3{
    letter-spacing: 2px;
    transition: all 0.5s;
    font-size: 18px;
}

#circle .face1 .inner>div p{
    margin-bottom: 10px;
}
#circle .face1 .inner>div p i{
    font-size: 100px;
    transition: all .5s;
    opacity: 0.7;
}
/* #circle .face1 .inner>div:hover p i{
    color: lightcyan;
    text-shadow: 0 0 10px aqua;
    
} */

#circle article .inner>div:hover i{
    color: lightcyan;
    text-shadow: 0 0 10px aqua;
    transform: scale(1.1);
    transition: all 0.5s;
}

/* face2 */
#circle .face2{
    /* display: block; */
}
#circle .face2 .inner>div{
    width: 100%;
    height: 100%;
}
#circle .face2 .inner>div h3{
    color: #fff;
    margin-bottom: 20px;
}
#circle .face2 .inner>div img{
    width: 100%;
    margin-bottom: 40px;
}
#circle .face2 .inner>div h4{
    font-size: 20px;
    margin-bottom: 20px;
}
#circle .face2 .inner>div p{
    font: 18px/1.4 "arial";
    color: #ccc;
    text-align: justify;
}

/* face3 */
#circle .face3{}
#circle .face3 .inner > div{
    width: 100%;
    height: 253px;
    margin-bottom: 20px;
    overflow: hidden;
}
#circle .face3 .inner > div .pic{
    width: 120px;
    height: 120px;
    /* background-color: rgba(255, 255, 255, 0.5); */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    border-radius: 50%;
    float: left;
    border: 1px solid #fff;
}
#circle .face3 .inner > div:nth-of-type(1) .pic{
    background-image: url(../img/member1.jpg);
}
#circle .face3 .inner > div:nth-of-type(2) .pic{
    background-image: url(../img/member2.jpg);
}
#circle .face3 .inner > div:nth-of-type(3) .pic{
    background-image: url(../img/member3.jpg);
}
#circle .face3 .inner > div .con{
    float: right;
    width: 340px;
}
#circle .face3 .inner > div .con h3{
    margin-bottom: 3px;
}
#circle .face3 .inner > div .con p{
    font: 18px/1.3 "arial";
    color: #ddd;
    text-align: justify;

}
#circle .face3 .inner > div .con span{
    position: absolute;
    bottom: 50px;
    right: 50px;
    font: 12px/1 "Orbitron";
    color: aqua;
    opacity: 0.7;
}

/* face4 */
#circle .face4{}

#circle .face4 .inner > div p{
    font: 16px/1.3 "arial";
    color: #bbb;
    margin-bottom: 20px;
}
#circle .face4 .inner > div:nth-of-type(1){
    width: 100%;
    height: 600px;
    margin-bottom: 20px;
}
#circle .face4 .inner > div:nth-of-type(1) video{
    width: 100%;
    border: 1px solid #fff;
    margin-bottom: 30px;
}
#circle .face4 .inner > div:nth-of-type(1) h3{
    margin-bottom: 20px;
}
#circle .face4 .inner > div:nth-of-type(2){
    width: 100%;
    height: 180px;
    overflow: hidden;
}
#circle .face4 .inner > div:nth-of-type(2) h3{
    margin-bottom: 20px;
}
#circle .face4 .inner > div:nth-of-type(2) p{
    float: left;
}
#circle .face4 .inner > div:nth-of-type(2) em{
    font-size: 12px;
    font-style: normal;
    float: right;
}

/* face5 */
#circle .face5{}
#circle .face5 .inner>div{
    width: 100%;
    height: 100%;
}
#circle .face5 .inner>div img{
    margin-bottom: 40px;
}
#circle .face5 .inner>div .pic{
    width: 100%;
    height: 250px;
    background: url(../img/robot.png) no-repeat center center / cover;
    margin-bottom: 50px;
}
#circle .face5 .inner>div .reflect{
    position: absolute;
    top: 100%;
    right: 0;
    transition: all 0.5s;
}
#circle .face5 .inner>div:hover .reflect{
    top: -35%;
}

/* face6 */
#circle .face6{}

#circle .face6 .inner>div{
    width: 100%;
    height: 185px;
    margin-bottom: 20px;
    overflow: hidden;
}
#circle .face6 .inner>div i{
    width: 22%;
    height: 100%;
    float: left;
    font-size: 50px;
    color: #fff;
    text-align: center;
    line-height: 70px;
    border-right: 1px solid #999;
}
#circle .face6 .inner>div .con{
    width: 75%;
    height: 100%;
    float: right;
    box-sizing: border-box;
}
#circle .face6 .inner>div p{
    font: 18px/1 "arial";
    color: #999;
    margin-top: 10px;
}

/* face7 */
#circle .face7{}
#circle .face7 .inner>div{
    width: 100%;
    height: 100%;
}
#circle .face7 .inner>div>div{
    height: 100%;
    border: 1px solid #aaa;
    box-sizing: border-box;
    /* div 넘어가는 부분 잘라주기 */
    overflow: hidden;
    /* h3, img의 기준점 */
    position: relative;
}
#circle .face7 .inner>div>div video{
    width: 100%;
    height: 100%;
    /* background 대신 객체나 이미지에 사용하는 비율 조정 */
    object-fit: cover;
    /* 배너에 동영상 넣을 시에 투명도를 줘서 가독성이 좋다. */
    opacity: 0.3;
}
#circle .face7 .inner>div>div h3{
    position: absolute;
    left: 50px;
    top: 130px;
    font-size: 40px;
    color: #fff;
    line-height: 1.3;
}
#circle .face7 .inner>div>div img:nth-of-type(1){
    position: absolute;
    bottom: 0;
    right: -10px;
}
#circle .face7 .inner>div>div img:nth-of-type(2){
    position: absolute;
    top: -10px;
    left: 120px;
    width: 80%;
}

/* face8 */
#circle .face8{
    display: block;
}
#circle .face8 .inner{
    overflow: hidden;
}

#circle .face8 .inner>div:nth-of-type(1){
    width: 100%;
    height: 400px;
    margin-bottom: 20px;
    float: left;
}
#circle .face8 .inner>div:nth-of-type(2){
    width: 290px;
    height: 380px;
    margin-right: 20px;
    float: left;
    text-align: center;
}
#circle .face8 .inner>div:nth-of-type(3){
    width: 290px;
    height: 380px;
    float: left;
    text-align: center;
}


#circle .face8 .inner>div:nth-of-type(1) i{
    color: #fff;
    font-size: 200px;
    position: absolute;
    bottom: 60px;
    left: 50px;
}
#circle .face8 .inner>div:nth-of-type(1) span{
    font-weight: bold;
    font-size: 120px;
    position: absolute;
    bottom: 60px;
    right: 60px;
}
#circle .face8 .inner>div:nth-of-type(1) span em{
    font-size: 60px;
    font-family: "arial";
    font-style: normal;
    position: absolute;
    right: -20px;
    top: -20px;
}

#circle .face8 .inner>div:nth-of-type(2) i,
#circle .face8 .inner>div:nth-of-type(3) i{
    font-size: 120px;
    color: #fff;
    opacity: 0.8;
    margin-bottom: 30px;
}
#circle .face8 .inner>div:nth-of-type(2) h4,
#circle .face8 .inner>div:nth-of-type(3) h4{
    font: bold 28px/1 "Orbitron";
    margin-bottom: 15px;
}
#circle .face8 .inner>div:nth-of-type(2) p,
#circle .face8 .inner>div:nth-of-type(3) p{
    font: 16px/1 "arial";
}
#circle .face8 .inner>div:nth-of-type(2) h5,
#circle .face8 .inner>div:nth-of-type(3) h5{
    margin-top: 20px;
    font-size: 40px;
    position: relative;
    /* letter-spacing: -1px; */
}
#circle .face8 .inner>div:nth-of-type(2) h5 b,
#circle .face8 .inner>div:nth-of-type(3) h5 b{
    font-size: 20px;
    position: absolute;
    top: -5px;
    right: 48px;
    font-family: "arial";
}
#circle .face8 .inner>div:nth-of-type(3) h5 b{
    right: 55px;
}

/* 사이드면의 회전 */
.face1{transform: rotateY(0deg) translateZ(-764px);}
.face2{transform: rotateY(45deg) translateZ(-764px);}
.face3{transform: rotateY(90deg) translateZ(-764px);}
.face4{transform: rotateY(135deg) translateZ(-764px);}
.face5{transform: rotateY(180deg) translateZ(-764px);}
.face6{transform: rotateY(225deg) translateZ(-764px);}
.face7{transform: rotateY(270deg) translateZ(-764px);}
.face8{transform: rotateY(315deg) translateZ(-764px);}

728x90

저작자표시 비영리 변경금지

'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글

[JAVACRIPT]document.write / Data Type (0)	2023.07.17
비주얼 스튜디오 코드 77_ 뮤직 플레이어 (0)	2023.07.14
[JAVA]JAVA 자료형 (0)	2023.07.12
비주얼 스튜디오 코드_75 animation (1)	2023.07.12
비주얼 스튜디오 코드 74_ 하이시네마 footer (0)	2023.07.11

현재글비주얼 스튜디오 코드 76_파노라마_완성

조반짝의 도전일지

공부, 취미, 여행 모두 경험해보고 싶은 조반짝의 도전일지입니다. ✨contact_ looby777@naver.com ✨Instagram_holylovuuu_illust

자바, HTML, position, if문, Parallax, 비주얼스튜디오코드, 이클립스, 코딩테스트, CSS, Java, offset, SQL, JavaScript, media, ACTIVE, 자바스크립트, For문, 웹디자인, 프론트엔드, float,

Today :
Yesterday :

조반짝의 도전일지