What is the best way to conceal text that overflows from a div and seamlessly return to the beginning once the end of the text has been reached?

Question

What is the best way to conceal text that overflows from a div and seamlessly return to the beginning once the end of the text has been reached?

I am struggling to figure out how to hide the overflow text that is spilling out of the div. I attempted using overflow: hidden;, but unfortunately, it didn't work as expected. Additionally, I would like the text to loop back to the beginning once it reaches the end, for example, displaying

<a href="'#">link1</a> some text...<br><br>

after showing

<a href="'#">link8</a> some text 3!....<br><br>

. My CSS skills are limited, so any guidance on how to achieve this would be greatly appreciated.

#container {
  position: fixed;
  font-size: 20px;
  transition: .2s;
  margin-top: 10px;
  transition: margin 1s;
}

#box:hover #container{
  overflow: hidden;
  margin-top: -3500px;
  transition: margin 400s linear;
}

  <div style="background-color: rgb(162, 0, 255); height: 400px;" id="box">
    <div id="container">
        <a href="'#">link1</a> some text...<br><br>
        <a href="'#">link2</a> some more text 2....<br><br>
        <a href="'#">link3</a> some text 3....<br><br>
        <a href="'#">link4</a> some text 3....<br><br>
        <a href="'#">link5</a> some text 3....<br><br>
        <a href="'#">link6</a> some text 3....<br><br>
        <a href="'#">link7</a> some text 3....<br><br>
        <a href="'#">link8</a> some text 3!....<br><br>
    </div>

javascript html css animation slide

Answer 1

Answer №1

I suggest using animation instead of transition for a smoother effect. Here's how you can implement it:

CSS:

#box {
    background-color: rgb(162, 0, 255);
    height: 300px;
    position: relative;
    overflow: hidden;
}

#container {
    position: absolute;
    font-size: 20px;
    top: 10px;
}

#box:hover #container {
    overflow: hidden;
    animation-name: example;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes example {
    from {
        top: 10px;
    }
    
    to {
        top: -65px;
    }
}

HTML:

<div id="box">
    <div id="container">
        <a href="'#">link1</a> some text...<br><br>
        <a href="'#">link2</a> some more text 2....<br><br>
        <a href="'#">link3</a> some text 3....<br><br>
        <a href="'#">link4</a> some text 3....<br><br>
        <a href="'#">link5</a> some text 3....<br><br>
        <a href="'#">link6</a> some text 3....<br><br>
        <a href="'#">link7</a> some text 3....<br><br>
        <a href="'#">link8</a> some text 3!....<br><br>
    </div>
</div>

You can adjust the value in the "to" section of the example keyframe based on the height difference between #box and #container. I have also removed all inline CSS from the HTML code for better organization.

Answer 2

I suggest using animation instead of transition for a smoother effect. Here's how you can implement it:

CSS:

#box {
    background-color: rgb(162, 0, 255);
    height: 300px;
    position: relative;
    overflow: hidden;
}

#container {
    position: absolute;
    font-size: 20px;
    top: 10px;
}

#box:hover #container {
    overflow: hidden;
    animation-name: example;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes example {
    from {
        top: 10px;
    }
    
    to {
        top: -65px;
    }
}

HTML:

<div id="box">
    <div id="container">
        <a href="'#">link1</a> some text...<br><br>
        <a href="'#">link2</a> some more text 2....<br><br>
        <a href="'#">link3</a> some text 3....<br><br>
        <a href="'#">link4</a> some text 3....<br><br>
        <a href="'#">link5</a> some text 3....<br><br>
        <a href="'#">link6</a> some text 3....<br><br>
        <a href="'#">link7</a> some text 3....<br><br>
        <a href="'#">link8</a> some text 3!....<br><br>
    </div>
</div>

You can adjust the value in the "to" section of the example keyframe based on the height difference between #box and #container. I have also removed all inline CSS from the HTML code for better organization.

Answer 3

Answer №2

Here is a suggestion: instead of using position fixed, try setting the main div as relative and the inner div as absolute position. Take a look at the example below.

.container {
  padding: 80px 0;
}
.content {
  position: relative;
}
.screen {
    display: block;
    width: 300px;
    height: 350px;
    overflow: hidden;
    position: relative;
    border: 2px solid #b3b3b3;
    border-radius: 1px;
    margin: 0 auto;
}
.screen img {
    bottom: -1210px;
    width: 100%;
    height: auto;
    position: absolute;
    z-index: 0;
  margin:0;
  padding:0;
    -webkit-transition: top 11s;
    -moz-transition: top 11s;
    -ms-transition: top 11s;
    -o-transition: top 11s;
    transition: bottom 11s;
}
.screen:hover img {
  bottom: 0;
  -webkit-transition: all 11s;
  -moz-transition: all 11s;
  -ms-transition: all 11s;
  -o-transition: all 11s;
  transition: all 11s;
}

<div class="container">
            <div class="row">
                <h2 class="text-center">Scroll on Hover</h2>
                <div class="col-md-4 col-md-offset-4 content">
                    <div class="screen">
                        <img src="https://i.imgur.com/aFFEZ9U.jpg">
                    </div>

                </div>
            </div>
        </div><!--container-->

Answer 4

Here is a suggestion: instead of using position fixed, try setting the main div as relative and the inner div as absolute position. Take a look at the example below.

.container {
  padding: 80px 0;
}
.content {
  position: relative;
}
.screen {
    display: block;
    width: 300px;
    height: 350px;
    overflow: hidden;
    position: relative;
    border: 2px solid #b3b3b3;
    border-radius: 1px;
    margin: 0 auto;
}
.screen img {
    bottom: -1210px;
    width: 100%;
    height: auto;
    position: absolute;
    z-index: 0;
  margin:0;
  padding:0;
    -webkit-transition: top 11s;
    -moz-transition: top 11s;
    -ms-transition: top 11s;
    -o-transition: top 11s;
    transition: bottom 11s;
}
.screen:hover img {
  bottom: 0;
  -webkit-transition: all 11s;
  -moz-transition: all 11s;
  -ms-transition: all 11s;
  -o-transition: all 11s;
  transition: all 11s;
}

<div class="container">
            <div class="row">
                <h2 class="text-center">Scroll on Hover</h2>
                <div class="col-md-4 col-md-offset-4 content">
                    <div class="screen">
                        <img src="https://i.imgur.com/aFFEZ9U.jpg">
                    </div>

                </div>
            </div>
        </div><!--container-->

What is the best way to conceal text that overflows from a div and seamlessly return to the beginning once the end of the text has been reached?

Answer №1

Answer №2

Similar questions

Styling an image with dual attributes using CSS

Creating Child Components Dynamically using String Names in ReactJS

Guide on updating individual rows in Google App Script using data from a different sheet

Creating a dynamic JSTree that loads data on demand using Stored Procedures

Changing a string to HTML within an Angular 2 application

JavaScript Bug Report

A different and more efficient way to address the issue at hand

Contrast between the structure of asp.net button and hyperlinks

Unable to adjust the width of a label element using CSS specifically in Safari browsers

What is the correct method for service injection in Angular 8?

Analyzing latency in node.js through numerous requests

Is it possible to utilize the cv.imencode function in Opencv.js for exporting images in the webp format?

Modify the color of a unique word within a cell in a gridview

Having trouble uploading images using ReactJS on the web platform

It is advised not to use arrow functions to assign data when fetching API data with axios in Vue.js 2

Unable to dial phone numbers when clicking 'Click to call' link on Android devices

Creating Email Designs with Multiple Layers for Outlook Versions 2007 and 2010

Tips for displaying server data in a graph format

Prevent scrolling on browser resize event

Angular2 Error: Cannot have two identifiers with the same name, 'PropertyKey' is duplicated