I am working on a web component to display cards in my web page. In the example, the initial card uses a link to a js script (tiltjs). I would like to know how to call the script in my web component template card? So that this card can also use the tiltjs script.
Thanks for your help.
Link: https://codepen.io/nicolastilly/pen/eYRJNEj?editors=1010
My code:
<!-- html card -->
<div class="carte1">
<div class="card" data-tilt data-tilt-scale="1.04">
<div class="front">
<p class="card-title">
Title
</p>
<div class="extension">
✻
</div>
<div class="numero">
0/8
</div>
</div>
<div class="back"></div>
</div>
</div>
<br><br><br><br>
<!--web component card-->
<card-model></card-model>
<template>
<style>
.card {
width: 300px;
height: 450px;
border-radius: 20px;
background-color: #ccc;
position: relative;
}
.card-title {
font-family: "SpaceGrotesk-Light";
position: absolute;
text-align: center;
margin: auto;
left: 0;
right: 0;
top: 20px;
font-size: 18px;
color: black;
}
.extension {
font-family: "SpaceGrotesk-Light";
position: absolute;
bottom: 20px;
left: 20px;
color: black;
}
.numero {
font-family: "SpaceGrotesk-Light";
position: absolute;
bottom: 20px;
right: 20px;
color: black;
}
.front {
background-color: #ccc;
border-radius: 20px;
}
.back {
border-radius: 20px;
background-color: #ffffff;
opacity: 1;
background-image: linear-gradient(30deg,
#000000 12%,
transparent 12.5%,
transparent 87%,
#000000 87.5%,
#000000),
linear-gradient(150deg,
#000000 12%,
transparent 12.5%,
transparent 87%,
#000000 87.5%,
#000000),
linear-gradient(30deg,
#000000 12%,
transparent 12.5%,
transparent 87%,
#000000 87.5%,
#000000),
linear-gradient(150deg,
#000000 12%,
transparent 12.5%,
transparent 87%,
#000000 87.5%,
#000000),
linear-gradient(60deg,
#00000077 25%,
transparent 25.5%,
transparent 75%,
#00000077 75%,
#00000077),
linear-gradient(60deg,
#00000077 25%,
transparent 25.5%,
transparent 75%,
#00000077 75%,
#00000077);
background-size: 20px 35px;
background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px;
}
</style>
<div class="carte1">
<div class="card" data-tilt data-tilt-scale="1.04">
<div class="front">
<p class="card-title">
Web component card
</p>
<div class="extension">
✻
</div>
<div class="numero">
0/8
</div>
</div>
<div class="back"></div>
</div>
</div>
</template>
//js
class cardModel extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
const template = document.querySelector("template");
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
}
window.customElements.define("card-model", cardModel);
```
Aucun commentaire:
Enregistrer un commentaire