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

• 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

1 Answer 1

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>