Help with css

[Manual]

Hi I am trying to use this code, the problem I have is when I add any text after those three Paragraphs, the new text will appear behind the scrolling text and not after them. can any one help me how to style it so it should appear after the scrolling text?

[marketingmaniac]

Worked for me, I adjusted the timings of the keyframes to make space for four. I reduced the transition times from 8.3% to 5% to make the maths simpler so it may be a little faster, although I guess you can change the duration of the whole thing.
I added just one paragraph (with a new class of item-4) but you could add more. From a UX point of view I’d stay with less, as there is no arrow for them to speed it up or slow it down and it can be frustrating.

Here is my CSS:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);

body {
font-family: ‘Open Sans’, ‘sans-serif’;
color: #cecece;
background: #222;
overflow: hidden;
}

.item-1,
.item-2,
.item-3,
.item-4{
position: absolute;
display: block;
top: 2em;

width: 60%;

font-size: 2em;

animation-duration: 20s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;

}

.item-1{
animation-name: anim-1;
}

.item-2{
animation-name: anim-2;
}

.item-3{
animation-name: anim-3;
}

.item-4{
animation-name: anim-4;
}

@keyframes anim-1 {
0%, 5% { left: -100%; opacity: 0; }
5%,20% { left: 25%; opacity: 1; }
25%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-2 {
0%, 25% { left: -100%; opacity: 0; }
30%, 45% { left: 25%; opacity: 1; }
50%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-3 {
0%, 50% { left: -100%; opacity: 0; }
55%, 70% { left: 25%; opacity: 1; }
75%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-4 {
0%, 75% { left: -100%; opacity: 0; }
80%, 95% { left: 25%; opacity: 1; }
100% { left: 110%; opacity: 0; }
}

[Manual]

@marketingmaniac Thanks so much. I wasn’t clear enough I am not looking to add a third p as an animation, I would like to start a new Paragraph beneath all the animated texts .

[marketingmaniac]

Oh, I get it now.
The problem is that the items are all position absolute so they don’t ‘take up space’ on the page. I would just put this whole code in a plain div and give that div a specific height eg 250px. You can use @media if you need it to change for different screen sizes. Then the next paragraph would start below the div.
There may be a more elegant solution, but I know this works
Hatzlacha!

[Manual]

doesn’t seem to work look at the code
html

<div class="ex1">
<p class="item-1"><em>qwerty1</em></p>
<p class="item-2">qwerty2</p>
<p class="item-3">qwerty3</p>
</div>
<div class="ex2">
<p>qwerty4</p>
</div>

css

body { 
   overflow: hidden;
}
.item-1, .item-2, .item-3 {
	position: absolute;
  display: block;
  width: 60%;
 	animation-duration: 20s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	  overflow: hidden;
}
.item-1{
	animation-name: anim-1;
}
.item-2{
	animation-name: anim-2;
}
.item-3{
	animation-name: anim-3;
}
@keyframes anim-1 {
	0%, 8.3% { left: -100%; opacity: 0; }
  8.3%,25% { left: 25%; opacity: 1; }
  33.33%, 100% { left: 110%; opacity: 0; }
 }
@keyframes anim-2 {
	0%, 33.33% { left: -100%; opacity: 0; }
  41.63%, 58.29% { left: 25%; opacity: 1; }
  66.66%, 100% { left: 110%; opacity: 0; }
}
@keyframes anim-3 {
	0%, 66.66% { left: -100%; opacity: 0; }
  74.96%, 91.62% { left: 25%; opacity: 1; }
  100% { left: 110%; opacity: 0; }
}
.ex1 {
    max-height: 5px
    }

the animated text still hovers on top the plain text, the div doesn’t get limited to 5px.

[Manual]

OK thanks it works, my mistake

[Manual]

למעשה It doesn’t help me, being I have animated text with one line and some with three lines I need the next p/div to adjust accordingly.
in other words is there any way I can add to

@keyframes anim-2 {
	0%, 33.33% { left: -100%; opacity: 0; }
  41.63%, 58.29% { left: 25%; opacity: 1; }
  66.66%, 100% { left: 110%; opacity: 0; }

height?

[Knaper Yaden]

I’m not good in CSS… but why not add an absolute to the 2nd paragraph?

Something like:

.ex2 {
	position: absolute;
	display: block;
	top: 15em;
}

[Manual]

@Knaper-Yaden

@marketingmaniac said in Help with css:

The problem is that the items are all position absolute so they don’t ‘take up space’ on the page.

[Knaper Yaden]

@Manual that was the issue. And the solution would be to put the 2nd paragraph also absolute.

[Manual]

@Knaper-Yaden said in Help with css:

@Manual that was the issue. And the solution would be to put the 2nd paragraph also absolute.

I don’ know why (I guess I am even worse at CSS ) but when I try it, the div just disappears somewhere.

[Knaper Yaden]

@Manual said in Help with css:

I don’ know why (I guess I am even worse at CSS ) but when I try it, the div just disappears somewhere.

See this one.

[Manual]

@Knaper-Yaden
result

[Knaper Yaden]

That is not the result based on your initial example. If you want to add more text to the animated paragraphs, then you’ll need to change the Paragraph 2 CSS to 25em or so.

[Manual]

@Manual said in Help with css:

למעשה It doesn’t help me, being I have animated text with one line and some with three lines I need the next p/div to adjust accordingly.
in other words is there any way I can add to

@keyframes anim-2 {
	0%, 33.33% { left: -100%; opacity: 0; }
  41.63%, 58.29% { left: 25%; opacity: 1; }
  66.66%, 100% { left: 110%; opacity: 0; }

height?

[marketingmaniac]

@Knaper-Yaden
you’ve essentially done the same thing I did but in a different way, you set it to absolute (which is absolute to the most recent relative in this case the top) and positioned it 15em down - so again it isn’t changing if the length of the paragraph changes.

This is your exact example but with the third paragraph lengthened (change the view, it’s easier to see it this way)

@Manual , thinking about it - do you really want the next paragraph (and rest of the content on the page) to jump up and down as the slider goes through its slides? I think the best would be to change your animated paragraphs to be more or less the same length (a line or two either way is fine) and set the next paragraph to start below it - not absolute, because you’ll have the same issue with any content coming after it, the div solution will fix that. If you’re concerned it will look messy with some empty space for the shorter animated paragraphs, maybe make the whole strip a different colour.

[Manual]

@marketingmaniac said in Help with css:

@Manual , thinking about it - do you really want the next paragraph (and rest of the content on the page) to jump up and down as the slider goes through its slides? I think the best would be to change your animated paragraphs to be more or less the same length (a line or two either way is fine) and set the next paragraph to start below it - not absolute, because you’ll have the same issue with any content coming after it, the div solution will fix that. If you’re concerned it will look messy with some empty space for the shorter animated paragraphs, maybe make the whole strip a different colour

my real issue is the page responsiveness.

[marketingmaniac]

@Manual
I always use @media for those.
the Emmet Re:view chrome extension is useful to see how you page changes as the screen width changes (use the Breakpoints view) and set the height of the div to change as necessary for different widths with @medias.
I’m not actually a developer (just know some HTML and CSS) so there may be other more standard solutions, I have no idea. But this should work fine.