I want to have a div, that when you hover it, text scroll if it's larger than the div.
But for now the text will always scroll event if it's shorter.
Here is my html code :
https://codesandbox.io/s/gracious-glade-7z31zc?file=/index.html
In this exemple, I would like the animation disabled on the second as it fits in the container.
Do you know a way to do it in CSS ? Or do I have to use JS ?
Thanks.
Dont know it is possible in CSS, but its quite simple is JS.
First of all i made another class for hovering effect:
.scrolled:hover {
animation: scroll-rtl 15s linear forwards;
}
Then quick js as commented.
document.querySelectorAll('.chip-value') // get all elements you want
.forEach( item => { // iterate over them and get every as "item"
if(item.offsetWidth > 400){ // check if it's widthter than parent
item.classList.add('scrolled') // if is, add him class to scroll
}
}).chip-container {
margin-left: 3px;
margin-right: 3px;
margin-top: 3px;
margin-bottom: 3px;
max-width: 400px;
height: 32px;
font-size: 0.8125rem;
display: inline-flex;
align-items: center;
/* WebkitBoxAlign: center; */
border-radius: 16px;
white-space: nowrap;
/* // outline: 0, */
text-decoration: none;
/* // border: 0, */
vertical-align: middle;
/* // boxSizing: 'border-box', */
overflow: hidden;
background-color: gray;
color: white;
}
.chip-value {
display: inline-block;
position: relative;
text-overflow: clip;
margin-right: 5px;
margin-left: 5px;
}
.scrolled:hover {
animation: scroll-rtl 15s linear forwards;
}
@keyframes scroll-rtl {
0% {
transform: translate(0);
}
100% {
transform: translate(-100%);
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet/css" href="index.css" />
<title>Static Template</title>
</head>
<body>
<div class="chip-container">
<div class="chip-value">
Very very very very very very very very very very very very very very
very very very very very very very very very long
</div>
</div>
<div class="chip-container">
<div class="chip-value">
Not long
</div>
</div>
</body>
</html>
You wouldn't be able to do this with CSS alone, but you could use JS to check the size of the content inside of the container to compare it to the width of the container. If content > container, then scroll; else do nothing. Here's what I might do in this situation:
document.addEventListener('DOMContentLoaded', function(){
var elements = document.getElementsByClassName('chip-container');
for(var element of elements){
var pw = element.querySelector('.chip-value').offsetWidth;
var cw = element.offsetWidth;
if(pw > cw){
element.classList.add('animate-me-baby');
}
}
});.chip-container {
margin-left: 3px;
margin-right: 3px;
margin-top: 3px;
margin-bottom: 3px;
max-width: 400px;
height: 32px;
font-size: 0.8125rem;
display: inline-flex;
align-items: center;
/* WebkitBoxAlign: center; */
border-radius: 16px;
white-space: nowrap;
/* // outline: 0, */
text-decoration: none;
/* // border: 0, */
vertical-align: middle;
/* // boxSizing: 'border-box', */
overflow: hidden;
background-color: gray;
color: white;
}
.chip-value {
display: inline-block;
position: relative;
text-overflow: clip;
margin-right: 5px;
margin-left: 5px;
}
.animate-me-baby:hover .chip-value {
animation: scroll-rtl 15s linear forwards;
}
@keyframes scroll-rtl {
0% {
transform: translate(0);
}
100% {
transform: translate(-100%);
}
}<div class="chip-container">
<div class="chip-value">
Very very very very very very very very very very very very very very
very very very very very very very very very long
</div>
</div>
<div class="chip-container">
<div class="chip-value">
Not long
</div>
</div>