BEM(Block Element Modifier)
HTML 클래스 속성의 작명법.
요소__일부분 Underscore(Lodash) 기호로 요소의 일부분을 표시한다.
요소--상태 Hyphen(Dash) 기호로 요소의 상태를 표시한다
<div class="container">
<div class="name"></div>
<div class="item">
<div class="name"></div>
</div>
</div><div class="container">
<div class="container__name">container의 일부분임을 나타낸다.</div>
<div class="item">
<div class="item__name"> item의 일부분임을 나타낸다.</div>
</div>
</div><div class="btn primary"> 상태가 명확하지 않음.</div>
<div class="btn btn--primary">btn의 상태를 나타낸다.</div>
<div class="btn btn--success">btn의 상태를 나타낸다.</div>
<div class="btn btn--error">btn의 상태를 나타낸다.</div>position: fixed position: absolute : width값을 최소한으로 사용하려 한다. width 값을 100%를 주어 뷰포트를 모두 사용할 수 있게 처리한다.
gsap & lodash
window.addEventListener('scroll', _.throttle(function(){
console.log('scroll!');
if(window.scrollY > 500){
//배지 숨기기
// gsap.to(element,시간,옵션);
gsap.to(badgeEl,.6,{
opacity: 0,
display: "none"
})
}else{
// 배지 보이기
gsap.to(badgeEl,.6,{
opacity: 1,
display: "block"
})
}
},300));요소를 순차적으로 보이게 만들기
- 순차적으로 보일 요소 노드에 class 추가
<div class="title fade-in"></div>
<div class="fade-in"></div>
<div class="fade-in"></div>
<div class="fade-in"></div>- opacity 0으로 조정
.fade-in{
opacity: 0;
}- gsap으로 처리
const fadeEls = document.querySelectorAll('.visual .fade-in');
fadeEls.forEach(function(fadeEl,index){
gsap.to(fadeEl,1,{
delay: (index + 1) * .7,
opacity:1
});
})swiper를 사용하여 vertical slider 구현하기
- swiper 형식에 맞는 html 작성 (class)
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="/">foo</a>
</div>
<div class="swiper-slide">
<a href="/">bar</a>
</div>
<div class="swiper-slide">
<a href="/">baz</a>
</div>
<div class="swiper-slide">
<a href="/">boo</a>
</div>
</div>
</div>- swiper 생성자 함수를 통해 조작 방법 작성
new Swiper('.notice-line .swiper-container',{
direction: 'vertical',
autoplay: true,
loop: true
});확대/축소시 변하지 않게 중앙에 이미지(텍스트)를 고정하는 방법
- 포지션 부자 관계 설정
relative - absolute; - width값 설정
width: calc(819px * 3 + 20px);
3-1.left: 50%;/transform:translate(-50%);
3-2.left:50%;/margin-left: calc((819px * 3 + 20px) / -2);
modal
hide를 사용할때에는 display:none 보다 height:0;,overflow:hidden,transition 속성을 사용하여 자연스럽게 사라지고 나타날수 있게 만든다.
YOUTUBE iframe API
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>function onYouTubeIframeAPIReady() {
new YT.Player('player', {
videoId: 'An6LvWQuj_8', // 최초 재생할 유튜브 영상 ID
playerVars: {
autoplay: true, //자동재생 여부
loop: true, //반복재생 여부
playlist:'An6LvWQuj_8' // 반복 재생할 유튜브 영상 ID 목록
},
events:{
onReady: function(event){
event.target.mute() // 음소거 기능
}
}
});
}floating (gsap)
function random(min,max){
return parseFloat((Math.random() * (max - min) + min).toFixed(2))
}
function floatingObject(selector,delay,size){
gsap.to(selector,
random(1.5,2.5),
//옵션
{
y: size,
repeat: -1,
yoyo: true,
ease: Power1.easeInOut,
delay: random(0,delay)
}
);
}
floatingObject('.floating1', 1,15);
floatingObject('.floating1', .5,15);
floatingObject('.floating1', 1.5,20);배경화면 고정(페럴렉스)
.pick-your-favorite{
background-image: url("../images/favorite_bg.jpg");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
}background-attachment:fixed는 배경화면을 뷰포트에 고정시킨다.
