javascript - Auto text bouncing back and fourth CSS like marquee for long text label - Stack Overflow

admin管理员组

文章数量:1352341

I have a requirement to show auto movable text feature (just like marquee with alternative behavior) on the label which has long text.

As you can see Created On: 28 Nov, 2017 label in sap.m.ObjectAttribute is just got wrapped because of the default behavior of ObjectListItem control. I am looking for the CSS that could make the wrapped text movable front and back just like marquee with alternative behavior, so that i can see entire unwrapped text bouncing front and back.

Please refer to example, In this when you mouse-over the div, the label starts scrolling left and when you take away the mouse from the div, it will scroll back to its initial point.

I am looking for the CSS like this but with the auto effect. So that once i have applied to any possible label which have long text, the label should auto start the scroll back and front automatically.

Kindly help me on this.

Another example based on marquee

body {
  background-color: lightgrey;
}

.blue-btn {
  position: absolute;
  left: 35%;
  top: 40%;
}

.blue-btn a {
  color: white;
  text-decoration: none;
  margin-top: 0em;
  text-align: center;
  display: inline-block;
  /* important */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blue-btn,
.first-link {
  -moz-transition: 3.3s;
  transition: 3.3s;
  -moz-transition-timing-function: linear;
  transition-timing-function: linear;
}

.blue-btn {
  height: 64px;
  font: normal normal 700 1em/4em Arial, sans-serif;
  overflow: hidden;
  width: 200px;
  background-color: #3b5998;
}

.blue-btn:hover {
  background-color: #003D99;
}

.blue-btn a:hover {
  text-decoration: none;
}

.first-link {
  margin-left: 0em;
}

.blue-btn:hover .first-link {
  margin-left: -300px;
}

<div class="blue-btn">
  <a class="first-link" href="">Thisisanextreamlylongtext,kindoflikeanamecouldbe</a>
</div>

I have a requirement to show auto movable text feature (just like marquee with alternative behavior) on the label which has long text.

As you can see Created On: 28 Nov, 2017 label in sap.m.ObjectAttribute is just got wrapped because of the default behavior of ObjectListItem control. I am looking for the CSS that could make the wrapped text movable front and back just like marquee with alternative behavior, so that i can see entire unwrapped text bouncing front and back.

Please refer to example, In this when you mouse-over the div, the label starts scrolling left and when you take away the mouse from the div, it will scroll back to its initial point.

I am looking for the CSS like this but with the auto effect. So that once i have applied to any possible label which have long text, the label should auto start the scroll back and front automatically.

Kindly help me on this.

Another example based on marquee

body {
  background-color: lightgrey;
}

.blue-btn {
  position: absolute;
  left: 35%;
  top: 40%;
}

.blue-btn a {
  color: white;
  text-decoration: none;
  margin-top: 0em;
  text-align: center;
  display: inline-block;
  /* important */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blue-btn,
.first-link {
  -moz-transition: 3.3s;
  transition: 3.3s;
  -moz-transition-timing-function: linear;
  transition-timing-function: linear;
}

.blue-btn {
  height: 64px;
  font: normal normal 700 1em/4em Arial, sans-serif;
  overflow: hidden;
  width: 200px;
  background-color: #3b5998;
}

.blue-btn:hover {
  background-color: #003D99;
}

.blue-btn a:hover {
  text-decoration: none;
}

.first-link {
  margin-left: 0em;
}

.blue-btn:hover .first-link {
  margin-left: -300px;
}

<div class="blue-btn">
  <a class="first-link" href="">Thisisanextreamlylongtext,kindoflikeanamecouldbe</a>
</div>

• javascript
• css
• sapui5

Share Improve this question Follow edited Nov 29, 2017 at 12:14 mplungjan 178k2828 gold badges182182 silver badges240240 bronze badges asked Nov 29, 2017 at 12:11 Prashob ThekkyalPrashob Thekkyal 40011 gold badge1212 silver badges2828 bronze badges 2

• I think you should use javascript for that - have u try that way ? – Grzegorz Miśkiewicz Commented Nov 29, 2017 at 12:19
• Yes, I need some javascript/CSS. I only have the snippet example as a workaround. – Prashob Thekkyal Commented Nov 29, 2017 at 12:21

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

Use infinite animation to automatically scroll .link:

body {
  margin: 0;
  background-color: lightgrey;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.container {
  padding: 15px;
  background-color: #3b5998;
  width: 200px;
  font-family: Arial,sans-serif;
  font-weight: 700;
  line-height: 1.5;
  overflow: hidden;
  width: 200px;
}
.link {
  color: white;
  text-decoration:none;
  text-align: center;
  white-space: nowrap;
  display: inline-flex;
  line-height: 2;
}
.link_animated {
  animation: backAndForth 5s linear infinite;
}
@keyframes backAndForth {
  0% { transform: translateX(0); }
  10% { transform: translateX(0); }
  45% { transform: translateX(calc(-100% + 200px)); }
  55% { transform: translateX(calc(-100% + 200px)); }
  90% { transform: translateX(0); }
  100% { transform: translateX(0); }
}

<div class="container">
  <a class="link link_animated" href="">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </a>
</div>

本文标签： javascriptAuto text bouncing back and fourth CSS like marquee for long text labelStack Overflow