Vanilla-tilt.js を使用したホバー時の傾き
2015 ワード
手順:
jQuery cdn を追加
Vanilla-tilt.js cdn を追加
必要な効果に応じて属性を追加します.たとえば. data-tilt - 要素にマークを付けます data-tilt-max="50"- 最大傾斜回転 (度) data-tilt-speed="400"- 遷移の速度
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vanilla-tilt.min.js"></script>
最終コード -
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
</head>
<body>
<div class="your-element" data-tilt data-tilt-max="50" data-tilt-speed="400" data-tilt-perspective="500"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vanilla-tilt.min.js"></script>
</body>
</html>
Reference
この問題について(Vanilla-tilt.js を使用したホバー時の傾き), 我々は、より多くの情報をここで見つけました https://dev.to/yashkumat/tilt-on-hover-using-vanilla-tiltjs-23n0テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol