-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
85 lines (83 loc) · 3.34 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<!--Font Awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
<!--Mouse follower-->
<link rel="stylesheet" href="https://unpkg.com/mouse-follower@1/dist/mouse-follower.min.css">
<script src="https://unpkg.com/mouse-follower@1/dist/mouse-follower.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://unpkg.com/mouse-follower@1/dist/mouse-follower.min.js"></script>
<title>Text landing animation</title>
</head>
<body onload="move()"><!--Obligatoire pour lancer anim dès début-->
<div class="container">
<h1 data-cursor-text="I'm bolding" id="titre">Lorem ipsum dolor sit amet.</h1>
<p id="paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus, praesentium sequi, ducimus provident enim minus fugit repellendus explicabo voluptatibus dicta, iste est repellat consectetur. Quos mollitia accusamus modi incidunt adipisci.</p>
<button id="btn">Animate something !</button>
<!--Split Type lib-->
<script src="https://unpkg.com/split-type"></script>
<!--GSAP lib-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js" integrity="sha512-f8mwTB+Bs8a5c46DEm7HQLcJuHMBaH/UFlcgyetMqqkvTcYg4g5VXsYR71b3qC82lZytjNYvBj2pf0VekA9/FQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
const animateText = new SplitType ('#animate-text', {types: 'words'});
let buttonWrap = document.getElementById('btn');
function move() {
const titre = new SplitType ('#titre', {types: 'words'});
const paragraph = new SplitType ('#paragraph', {types: 'lines'});
const heroElements = [...titre.words, ...paragraph.lines, buttonWrap];
gsap.from(heroElements, {
y: 30,
opacity: 0,
duration: 0.9,
stagger: {amount: 1},
ease: 'ease-out'
})
}
const cursor = new MouseFollower({
/*--SVG DANS MOUSE FOLLOWER--*/
/*--PARAMETRES MOUSE FOLLOWER--*/
el: null,
container: ".container",
className: 'mf-cursor',
innerClassName: 'mf-cursor-inner',
textClassName: 'mf-cursor-text',
mediaClassName: 'mf-cursor-media',
mediaBoxClassName: 'mf-cursor-media-box',
iconSvgClassName: 'mf-svgsprite',
iconSvgNamePrefix: '-',
iconSvgSrc: '',
dataAttr: 'cursor',
hiddenState: '-hidden',
textState: '-text',
iconState: '-icon',
activeState: '-active',
mediaState: '-media',
stateDetection: {
'-pointer': 'a,button',
'-hidden': 'iframe'
},
visible: true,
visibleOnState: false,
speed: 0.55,
ease: 'expo.out',
overwrite: true,
skewing: 0,
skewingText: 2,
skewingIcon: 2,
skewingMedia: 2,
skewingDelta: 0.001,
skewingDeltaMax: 0.15,
stickDelta: 0.15,
showTimeout: 20,
hideOnLeave: true,
hideTimeout: 300,
hideMediaTimeout: 300
});
</script>
</body>
</html>