Google Cloud PC 코딩

📌Google Cloud PC

• 사이트명 : 구글 클라우드 PC
• 작업기간 : 2일
• 사용언어 : HTML5,CSS3,Jquery
• 라이브러리 : Swiper, GSAP
• 분류 : PC 적응형 웹사이트
• URL : https://yunazzi.github.io/Google-Cloud/

---

Point ✅

✔️ Header에 고정 네비게이션 (+ 토클클래스)
✔️ GSAP 이용방법
✔️ postion : sticky
✔️ Swiper 슬라이드 사용방법
✔️ onEnter / onLeaveBack로 배경색상 바꾸기

---

Google Cloud를 테마로 archipelago productions, google등 래퍼런스 사이트를 참고하여 리뉴얼했습니다.

🔖 Header에 고정 네비게이션 (+ 토클클래스)

헤더 상단에 네비게이션을 두어 고정되게끔 했습니다.

.header .navbar{
position: fixed; max-width: 1500px; min-width: 950px; 
padding: 0 25px; border-radius: 5px; 
width: 100%; left: 0; right: 0; top: 25px; 
margin-left: auto; margin-right: auto; z-index: 99;
}

또한, 탭메뉴를 누르면 간편하게 여닫을 수 있게 토글클래스를 주었습니다.

.dropdown-menu{
position: absolute; opacity: 0; visibility: hidden; 
padding: 0 25px; padding-top: 5px; 
top: 100%; left: 0%; width: 100%; transition: .3s;
}
.dropdown-menu.on{opacity: 1; visibility: visible;}

$('.header .btn-dropdown .nav-item').click(function(){
    $('.dropdown-menu').toggleClass('on')
})

🔖 GSAP 이용방법

배경 동영상 위로 width:50%의 크기의 이미지가 왼쪽(transform : 'translateX(-100%)')에서 오른쪽(transform : 'translateX(0%)')으로 자연스럽게 나오게끔 했습니다.

gsap.to('.sc-visual .group-text',{
    scrollTrigger:{
        trigger:'.sc-visual',
        start:'0% -20%',
        end:'100% 0%',
        scrub:1,
    },
    transform: "translateX(0%)"
})

🔖 postion : sticky;

position : sticky 는 스크롤이 되어서 이 요소가 화면에 나오면 고정시킨다는 특성이 있습니다.

<section class="sc-visual">
	<div class="sticky-wrapper">
		<div class="sticky">
			<div class="video">
				<video  autoplay="" muted="" playsinline="" loop="">
					<source src="./assets/images/Google Cloud_ The new way to cloud.mp4" type="video/mp4">
				</video>
			</div>
			<div class="group-text">
				<div class="area1">
					<h2 class="text1">Cloud with the new. Google Cloud</h2>
                </div>
				<div class="text2">
					The new way to cloud <br>
					<span class="diff">Starts here.</span>
				</div>
				<div class="text3">Build with generative AI, deploy apps fast, and analyze data in seconds—all with Google-grade security. Build with the cloud platform designed for developers and AI. Try Google Cloud with free usage of over 20 products, plus new customers get $300 in free credits on signup.
				</div>
				<a href="">
					<button class="btn-contact">
						<p>Get started for free</p>
						<div class="arrow">
							<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path fill-rule="evenodd" clip-rule="evenodd" d="M4.6262 5.63604C4.6262 5.08375 5.07391 4.63604 5.6262 4.63604L18.364 4.63604C18.9162 4.63604 19.364 5.08375 19.364 5.63604V18.6875C19.364 19.2398 18.9162 19.6875 18.364 19.6875C17.8117 19.6875 17.364 19.2398 17.364 18.6875V8.05025L6.34314 19.0711C5.95262 19.4616 5.31945 19.4616 4.92893 19.0711C4.5384 18.6805 4.5384 18.0474 4.92893 17.6569L15.9497 6.63604L5.6262 6.63604C5.07391 6.63604 4.6262 6.18832 4.6262 5.63604Z" fill="currentColor" stroke="#currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
							</svg>
						</div>
					</button>
				</a>
			</div>
		</div>
	</div>
</section>

[css]

.sc-visual{ position: relative; height: 400vh; }
.sc-visual .sticky-wrapper{ height: 500vh; }
.sc-visual .sticky{ position: sticky; top: 0; height: 100vh; }

이미지에 position : sticky를 주면 스크롤이 되어서 이미지가 보이는 순간
viewport의 맨 위에서부터 100px 위치에서 고정이 됩니다.
그리고 부모 박스를 넘어서 스크롤 되면 이미지도 같이 사라집니다.

☑️ 주의사항

position : sticky는

① 스크롤을 할 만한 부모 박스가 필요

=> 정확히는 스크롤을 할 만한 사이즈가 되는 부모 박스가 필요

② top 등 좌표속성과 함께 써야 제대로 보인다.

=> 조건부가 없으면, sticky 속성이 발동하지 않음

position : sticky의 부모 박스를 스크롤하다가 넘어갔을 때, sticky 속성이 풀리게 된다.

🔖 Swiper 슬라이드 사용방법

해당 섹션에 나오는 요소들이 여러가지일 경우, 슬라이드를 이용하여 여러개를 한 페이지에 보여줄 수 있게끔 Swiper슬라이드를 사용했습니다.

var swiper = new Swiper('.goodthing-slide',{
    slidesPerView:'auto',
    spaceBetween:20,
    pagination:{
        el:'.pagination',
        type:'progressbar'
    },
})

swiper는 하드웨어 가속 전환 및 다양한 기본 동작을 갖춘 현대적인 슬라이드 라이브러리를 뜻한다.

slidesPerView : 한 번에 화면에 표시되는 슬라이드나 항목의 수
spaceBetween : 각 슬라이드 사이의 간격을 조절하는 매개변수
pagination : 긴 목록이나 내용을 여러 페이지로 나누어 보여주는 기술이나 인터페이스
el:'.pagination' : pagination 컨트롤이나 페이지 번호를 표시하는 컴포넌트
type:'progressbar' : 프로그레스 바가 그래픽적으로 표현되어 사용자에게 작업의 진행 상황을 보여줌

🔖 onEnter / onLeaveBack로 배경색상 바꾸기

배경색 바뀌기전 (background:#000;) → 배경색 바뀐후 (background:#fff;)

[html]

<div data-bg="1">
	<div class="sc-intro">
		<div class="text-wrap">
			<div class="title">
				Build and scale generative AI apps with<br>
				<span class="font">Vertex AI and Duet AI</span>
			</div>
            <a href="#sc-work" class="btn-select colorChange">
				<p>AI innovation happens on Google Cloud</p>
				<div class="down arrow">
					<svg width="384" height="auto" viewBox="0 0 384 437" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path d="M180.7 400.3C186.9 406.5 197.1 406.5 203.3 400.3L367.531 236.069C373.731 229.869 373.731 219.669 367.531 213.469C361.331 207.269 351.131 207.269 344.931 213.469L208 350.4V49.75C208 40.95 200.8 33.75 192 33.75C183.2 33.75 176 40.95 176 49.75V350.4L57.1809 213.469C50.9809 207.269 40.7809 207.269 34.5809 213.469C28.3809 219.669 28.3809 229.869 34.5809 236.069L180.7 400.3Z" fill="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
					</svg>
				</div>
			</a>
		</div>
	</div>
</div>

[css]

[data-bg="1"]{ position: relative; background-color: #000; height: 600vh; transition: .3s; }
[data-bg="1"].on{ background-color: #fff; }

[javascript]

ScrollTrigger.create({
    trigger:'.sc-work',
    start:'0% 50%',
    end:'100% 0%',
    onEnter:function(){
        $('[data-bg="1"]').addClass('on')
    },
    onLeaveBack:function(){
        $('[data-bg="1"]').removeClass('on')
    }
})

dataset을 이용하여 (객체 형식이기 때문에 읽기,쓰기등을 손쉽게 수정하여 사용가능) 속성값을 지정하여, css와 스크립트에서 background를 적용할 수 있게끔 만들었습니다.

참고사이트
https://apost.dev/680/
https://velog.io/@sunny_afterrain/knowledge02
https://blog.pumpkin-raccoon.com/119
https://velog.io/@gil0127/position-sticky-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0