editoramoan/moan-destaques
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mais teste iniciais

Browse Source
This commit is contained in:
Rafael Tavares Juliani 2024-02-29 01:47:44 -03:00
parent 5d9f9e9602
commit cc3ba92caa
1 changed files with 65 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
index.html
View File

@ -10,6 +10,22 @@
body {font-family: Verdana, sans-serif; margin:0}
img {vertical-align: middle;}
@keyframes up {
from {margin-bottom: -40px;}
to {margin-bottom: 0;}
}
@keyframes from-left {
from {margin-left: -100%;}
to {margin-left: 0;}
}
@keyframes from-right {
from {margin-left: 100%;}
to {margin-left: 0;}
}
/* Slideshow container */
.slideshow-container {
position: relative;
@ -101,8 +117,9 @@ img {vertical-align: middle;}
max-height: 230px;
}
.slide a {
.slide a.moan-link {
padding: 5px 10px;
white-space: nowrap;
background-color: #F0AF2A;
position: absolute;
z-index: 101;
@ -118,10 +135,22 @@ img {vertical-align: middle;}
transition: all .4s ease-in-out;
}
.slide a:hover {
.slide a.moan-link:hover {
background-color: #eec26b;
}
.moan-up {
animation: up .5s ease-in-out;
}
.moan-from-left {
animation: from-left .8s ease-in-out;
}
.moan-from-right {
animation: from-right .8s ease-in-out;
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 310px) {
.prev, .next,.text {font-size: 11px}
@ -136,7 +165,7 @@ img {vertical-align: middle;}
<img src="./Imagem1.png" alt=""/>
<a href="#">Veja</a>
<a data-moan-direction="up" class="moan-link" href="#">Veja</a>
</div>
@ -144,7 +173,7 @@ img {vertical-align: middle;}
<img src="./Captura.png" alt=""/>
<a href="#">Leia agora</a>
<a data-moan-direction="from-right" class="moan-link" href="#">Leia agora</a>
</div>
@ -208,12 +237,44 @@ function showSlides(n) {
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.opacity = 0;
let temp = slides[i].querySelector('.moan-link');
if (temp) {
let direction = temp.getAttribute("data-moan-direction")
if (direction === "up") {
temp.classList.remove('moan-up');
} else if (direction === "from-left") {
temp.classList.remove('moan-from-left');
} else if (direction === "from-right") {
temp.classList.remove('moan-from-right');
}
}
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.opacity = 1;
dots[slideIndex-1].className += " active";
let link = slides[slideIndex - 1].querySelector('.moan-link');
if (link) {
let direction = link.getAttribute("data-moan-direction")
if (direction === "up") {
link.classList.add('moan-up');
} else if (direction === "from-left") {
link.classList.add('moan-from-left');
} else if (direction === "from-right") {
link.classList.add('moan-from-right');
}
}
}
</script>