$$config title: Web2 수업 11일차 keywords: - aos - slide $$ # ID, scroll-margin-top ```css scroll-margin scroll-margin-top : 스크롤 되었을때 마진값이 생김. id는 주로 문서내에서 이동할때 많이쓰임. body{ text-align:center; height:400vh; } .con{ max-width:800px; position:fixed; right:0; left:0; top:0; } a{ border:2px solid darkorchid; width:150px; } div{ height:calc(100vh - 28px); margin:28px; scroll-margin-top:28px; } #pos1{ background-color:skyblue; } #pos2{ background-color:darkcyan; } #pos3{ background-color:darkolivegreen; } ``` # aos ```js (http://michalsnik.github.io/aos/)에서 AOS.init(); 위 세개 긁어온다. data-aos 사용할 애니메이션 효과명 data-aos-easing 애니메이션 시간흐름에 따른 속도설정 옵션(default: ease) data-aos-anchor 특정한 객체에 anchor를 설정하여,어떤 객체를 기준으로 애니메이션이 시작 될지를 설정 data-aos-delay 애니메이션 재생 대기시간 설정(default: 0) data-aos-offset 애니메이션 효과가 시작될 객체의 위치 설정 data-aos-duration 애니메이션의 재생시간 설정(default: 400) data-aos-anchor-placement 애니메이션이 어느 위치에서부터 적용될지 설정(default: top-bottom) data-aos-once 스크롤 할때마다 애니매이션이 재생될지를 설정(default: false) ※ delay와 duration은 0부터 3000까지 최대값을 설정할 수 있고, 50 단위로 설정 변경이 가능하다. AOS.init({ duration: 1000 // AOS.init({ // offset: 200, // duration: 600, // easing: 'ease-in-sine', // delay: 100, // }); }); 모든 컨텐츠 지연시간1초 ``` # 슬라이더 ``` 슬라이더 쓰기위해 jQuery를 먼저 가져온다. -html

section>div.con>div.slide-box>div.slides>a*3>img -css .con { width:1000px; margin:0 auto; } .slider-box-1 { height:500px; position:relative; } .slider-box-1 > .slides > div { position:absolute; top:0; left:0; right:0; bottom:0; opacity:0; transition:opacity .3s; } .slider-box-1 > .slides > div > img { display:block; width:100%; height:100%; } [data-index="0"].slider-box-1 > .slides > div:nth-child(1) { opacity:1; } [data-index="1"].slider-box-1 > .slides > div:nth-child(2) { opacity:1; } [data-index="2"].slider-box-1 > .slides > div:nth-child(3) { opacity:1; } -js var SliderBox1__i = 0; setInterval(function() { $('.slider-box-1').attr('data-index', ++SliderBox1__i % 3); }, 3000); ``` # 슬라이더 좌우이동 ``` css .slider-box-1 { height:500px; overflow:hidden; } .slider-box-1 > .slides { display:flex; width:100%; transition: margin 0.3s; } .slider-box-1 > .slides > div { width:100%; flex-shrink:0; } .slider-box-1 > .slides > div > img { display:block; width:100%; } .slider-box-1[data-index="0"] > .slides { margin-left:0; } .slider-box-1[data-index="1"] > .slides { margin-left:-100%; } .slider-box-1[data-index="2"] > .slides { margin-left:-200%; } ``` # 슬라이더 상하이동 ``` .slider-box-1 { height:500px; overflow:hidden; } .slider-box-1 > .slides { height:100%; transition: margin 0.3s; } .slider-box-1 > .slides > div { height:100%; } .slider-box-1 > .slides > div > img { width:100%; display:block; height:100%; } .slider-box-1[data-index="0"] > .slides { margin-top:0; } .slider-box-1[data-index="1"] > .slides { margin-top:-500px; } .slider-box-1[data-index="2"] > .slides { margin-top:-1000px; } ``