threejs


WebGL and Three JS dedicated forum. Here we can discuss about Three JS 3D library.
 
HomeCalendarGalleryFAQSearchRegisterLog in

Share | 
 

 Header/Transparent, with scrolling text

View previous topic View next topic Go down 
AuthorMessage
phaidonas



Posts : 24
Points : 32
Reputation : 0
Join date : 2017-02-07

PostSubject: Header/Transparent, with scrolling text   Fri Feb 10, 2017 11:18 pm

I have this code: https://jsfiddle.net/phaidonas/f33jyb3v/17/

Do you have any idea how the scrolling text, dont mess with the header and go underneath?
Back to top Go down
Admin
Admin
avatar

Posts : 46
Points : 78
Reputation : 3
Join date : 2017-02-06
Location : London, Milan

PostSubject: Re: Header/Transparent, with scrolling text   Sat Feb 11, 2017 1:41 pm

Hi man, yes that's pretty simple, the code is open.

Two things: header and background DIV positions are ixed. This is the trick.

you have the HTML page here:
Code:

<div id="HeaderText">
Header
</div>

<div id="ImgBg">
<img src="http://meche.mit.edu/sites/default/files/styles/hero/public/slides/Research%20Oceans.jpg?itok=okSrE16D">
</div>

<div id="MainText">
All you
text should be here
again
</div>


and the CSS determines every behaviors:

Code:
#HeaderText{
  position:fixed;
  z-index:9999;
  color:white;
 
}

#MainText{
  padding-top:10%;
  position:relative;
  color:white;
 
}

#ImgBg{
position:fixed;
z-indexz:-9999;

}
Back to top Go down
http://threejs.forumotion.com
phaidonas



Posts : 24
Points : 32
Reputation : 0
Join date : 2017-02-07

PostSubject: Re: Header/Transparent, with scrolling text   Sat Feb 11, 2017 8:24 pm

yeah,i dont understand, i know what i have done,i want the text get under the header but not get mixed with the header text while scrolling
Back to top Go down
Admin
Admin
avatar

Posts : 46
Points : 78
Reputation : 3
Join date : 2017-02-06
Location : London, Milan

PostSubject: Re: Header/Transparent, with scrolling text   Sat Feb 11, 2017 8:32 pm

are you sure you have created two DIV with different classes?
And the div in the background must have background property : fixed!
Back to top Go down
http://threejs.forumotion.com
phaidonas



Posts : 24
Points : 32
Reputation : 0
Join date : 2017-02-07

PostSubject: Re: Header/Transparent, with scrolling text   Sat Feb 11, 2017 8:47 pm

yeah, except if i am mistaken
Back to top Go down
Sponsored content




PostSubject: Re: Header/Transparent, with scrolling text   

Back to top Go down
 
Header/Transparent, with scrolling text
View previous topic View next topic Back to top 
Page 1 of 1
 Similar topics
-
» Changing my in game text to chinese?
» "Character data file corrupted: bad header"---how do I fix this!!
» How to make a Transparent Picture on Gimp 2.6
» "Ricks Transparent Driving Aid"
» Faulty Text

Permissions in this forum:You cannot reply to topics in this forum
threejs :: Web programming :: HTML and CSS-
Jump to: