I am Derby. I am new in this community. I would need the help to modify the code for the display of the lenticular effect in the Html as the result of the demonstration on the website lenticular effect (). The source code is from the project entitled "lenticular effect" (). I tried to combine the codes from the html, CSS and JavaScript into the html under one simple file to display the lenticular effect in the html, but I cannot perform the same result as the demonstration on the website lenticular effect (). Attached is the source code. I wish the source code and the link from one old project would help you solve the problem and provide the solutions based on your specialty. Thank you.
<!DOCTYPE html>
<html>
<head>
<style>
@-webkit-keyframes move {
from {
stop-opacity: 1;
}
to {
stop-opacity: 0;
}
}
@keyframes move {
from {
stop-opacity: 1;
}
to {
stop-opacity: 0;
}
}
.app {
position: relative;
width: 100%;
}
.app .img {
position: absolute;
z-index: -1;
display: block;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.app svg {
display: block;
}
</style>
<title>Test lenticular effect</title>
<script src=".2.4/jquery.min.js"></script>
</head>
<body>
<div class="app">
<div class="img" style="background-image: url('.jpg')" alt="" />
</div>
<script>
class Lenticular2 {
constructor(container, params) {
this.container = container;
// this.params = {...params};
this.render();
}
render() {
const generateSvg = () => {
return `
<svg xmlns="" xmlns:xlink="" viewBox="0 0 100 100" version="1.1">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(0)">
<stop offset="0%" style=" stop-color:white;" stop-opacity:1 />
<stop offset="100%"; style=" stop-color:white;" stop-opacity:0 />
</linearGradient>
<mask id="mask" maskUnits="userSpaceOnUse">
<rect width="100%" height="100%" fill="url(#gradient)"/>
</mask>
</defs>
<image mask="url(#mask)" width="100%" height="100%" y="0" x="0" xlink:href=".jpg" />
</svg>
`;
};
this.container.append(generateSvg());
this.mousemove();
}
mousemove() {
// animate gradient x2
$(".app").on("mousemove", e => {
let width = this.container.find("svg").innerWidth();
const offset = [0, 100];
const opacity = [1, 0];
$("#gradient").attr("x2", e.pageX / width * 200 + "%");
$("#gradient stop").each((i, el) => {
$(el).attr(
"offset",
parseFloat(offset[i]) + e.pageX / width * 100 + "%"
);
if (i === 0) {
$(el).attr("stop-opacity", opacity[i] - e.pageX / width);
}
});
});
}
}
let lenticular2 = new Lenticular2($(".app"));
</script>
</body>
</html>发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742310774a4419847.html
评论列表（0条）