moving text offscreen wrapping back from other side

Im trying to move text to the left then wrap it to come from the right as it is going to the left

13 Replies

Are referring to a marquee effect? You will probably have to either create the text more than once or, if you don't want to create duplicate markup or text, you could use a data attribute and add it using a pseudo element. I created something similar using CSS only some time ago that might be of some help https://codepen.io/cbolson/pen/dygaBRL

Chris Bolson

CodePen

Fake marquee

...

kimonyrfrOP•16mo ago

Oh thank you so much @Chris sorry for tagging but is there anyway i can modify the data attribute with css also my boundaries are all messed up i want it to come from the screen but anything i do wont work

Jochem•16mo ago

you can't change the data-attribute's contents with CSS, you'd need to use javascript or just of course manually edit the HTML also, if you share your code, Chris (or anyone else that's around) can take a look at what your problem is and how to fix it @haberno

kimonyrfrOP•16mo ago

@jochemm Alright imma share the code im pretty new to this i started like a week ago so my code is probably really bad I figured out how to apply the properties to the data attributes but i just have value problems right now html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="./style.css" />
        <title>My website</title>
    </head>
    <body>
        <nav>
            <div class="nav-container">
                <p class="name">
                    <span class="letter">T</span><span class="letter">I</span
                    ><span class="letter">R</span><span class="letter">T</span
                    ><span class="letter">H</span>&nbsp;
                    <span class="letter">P</span><span class="letter">A</span
                    ><span class="letter">T</span><span class="letter">E</span
                    ><span class="letter">L</span>
                </p>
                <img class="logo" src="./public/pjjkTX01.svg" alt="Logo" />
            </div>
        </nav>
        <section class="intro">
            <div class="name-container" data-text="NAME NAME">
                <h1 class="intro-name">NAME NAME</h1>
            </div>
        </section>
        <section class="about"></section>
        <section class="experience"></section>
        <section class="projects"></section>
        <footer>
            Built and Designed by Tirth Patel<br /><br />All rights reserved. ©
        </footer>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="./style.css" />
        <title>My website</title>
    </head>
    <body>
        <nav>
            <div class="nav-container">
                <p class="name">
                    <span class="letter">T</span><span class="letter">I</span
                    ><span class="letter">R</span><span class="letter">T</span
                    ><span class="letter">H</span>&nbsp;
                    <span class="letter">P</span><span class="letter">A</span
                    ><span class="letter">T</span><span class="letter">E</span
                    ><span class="letter">L</span>
                </p>
                <img class="logo" src="./public/pjjkTX01.svg" alt="Logo" />
            </div>
        </nav>
        <section class="intro">
            <div class="name-container" data-text="NAME NAME">
                <h1 class="intro-name">NAME NAME</h1>
            </div>
        </section>
        <section class="about"></section>
        <section class="experience"></section>
        <section class="projects"></section>
        <footer>
            Built and Designed by Tirth Patel<br /><br />All rights reserved. ©
        </footer>
    </body>
</html>

kimonyrfrOP•16mo ago

message.txt

kimonyrfrOP•16mo ago

the css was too big so i sent it as file

kimonyrfrOP•16mo ago

The round of animation is fine but then the second it chops and teleports

Jochem•16mo ago

that's part of why codepen is so nice, you can put the code there regardless of how long it is, and see the live example on the same page: https://codepen.io/jochemm/pen/oNQrEvZ

kimonyrfrOP•16mo ago

oh u already set it up thank you but do you see what problem that im having

Jochem•16mo ago

Hm, I do see the issue, but I don't know the solution off the top of my head. I'll see if I can take another look if Chris doesn't know later.

Chris Bolson•16mo ago

My code was really just a demo and the solution relied on having a fixed width container. From that it was possible to calculate the speed and delay. In your case it is somewhat more difficult as your container width will depend on the screen width. I also get the impression that want you want is to continually show the text without any spacing or delay I think that you will probably need to go with JavaScript for this.

Disco•16mo ago

Just hop in a time machine, go back to 1999 and use <marquee>

Gaming

Programming

moving text offscreen wrapping back from other side