Vanilla-tilt.js
Tilt change event The tilt change event will output the x,y & percentages of tilting. let eventBox = document.querySelector("#box-event"); let outputContainer = document.querySelector(".output"); VanillaTilt.init(eventBox); eventBox.addEventListener("tiltC
micku7zu.github.io
사용법
<div class="box">
<div class="elements bg"></div>
<div class="elements text"></div>
<div class="card"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.8.0/vanilla-tilt.min.js" integrity="sha512-RX/OFugt/bkgwRQg4B22KYE79dQhwaPp2IZaA/YyU3GMo/qY7GrXkiG6Dvvwnds6/DefCfwPTgCXnaC6nAgVYw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
VanillaTilt.init(document.querySelector(".box"), {
max: 25,
speed: 400,
glare: true
});
</script>
CSS
.elements { position: absolute; top:50px; left:-30px; width: 100px; height: 100px;
background: rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.5);
transform: translateZ(60px);
backdrop-filter: blur(10px);
box-shadow: 0 25px 45px rgba(0,0,0,0.05);}
.elements.bg::before { content: ''; position: absolute; inset: 0;}
.elements.text { transform: translateZ(80px); right:50px;left:inherit;
width: 100px; height: 80px;top:150px; }
'Opensource' 카테고리의 다른 글
| ai가 360도 배경 생성해주는 사이트 (0) | 2023.05.27 |
|---|---|
| lottiefiles, 에펙 모션을 벡터로 웹에서 가볍게 사용하기 (0) | 2023.05.03 |
| jquery-smooth-scroll (0) | 2023.04.19 |
| AI 음악 생성 사이트, Soundraw (0) | 2023.03.24 |
| Typed plugin (0) | 2023.03.19 |
| Parallax plugin (0) | 2023.03.14 |
| 클릭이벤트 플러그인 hammer.js (0) | 2023.03.07 |
| Email Services - EmailJS (0) | 2023.03.07 |
