CODEWITHSUNDEEP
javascripthtml
Toronto23
Toronto23

Reputation: 319

Using JavaScript to make title pop out in webpage?

I am making a webpage. Code can be found here: https://jsfiddle.net/saTfR/43/

HTML:

<body>
    <img id="map" src="http://www.local-guru.net/img/guru/worldglow.png"
    alt="map">
</body>
    <div id="sidebar">
<div class="logo">
    <img id="logo" src="logo2.png" alt="Logo"> 
</div>
</html>

CSS:

* {font-family: Lucida Console; }
#sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 230px;
  height: 100%;
  background-color: #CD6A51;
}

 </style>

I want to insert some text which will have a "pop out" effect on top of the map image. How would I be able to do that?

Upvotes: 0

Views: 190

Answers (1)

EugenSunic
EugenSunic

Reputation: 13693

On top of your map image. I assume you want it in the "center" of your image even if you scroll to the right you still want it to stick there.

You can easily create this by using the fadeIn method (jquery)

Here is the code:

HTML:

<p class="text">asdfasdfaa</p>        
<img id="map" src="http://www.local-guru.net/img/guru/worldglow.png" alt="map"/>
<p class="text">asdfasdfaa</p>      


<div id="sidebar">
<div class="logo">
    <img id="logo" src="logo2.png" alt="Logo"> 
</div>

CSS: (adjust css to your needs)

* {font-family: Lucida Console; }
#sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 230px;
  height: 100%;
  background-color: #CD6A51;
}
.text{

    color:white;
    z-index:999;
    position:fixed;
    left:60%;
    font-size:25px;

}

JS pop-up effect that you specified in the comment:

  $(".text").hide().fadeIn(2000);

Here is also the code for your header text to disappear once you scroll down. When you scroll up it will reappear again.

var mywindow = $(window);
var pos = mywindow.scrollTop();
mywindow.scroll(function() {
    if(mywindow.scrollTop() > pos)
    {
        $('.text').fadeOut();  
    }
    else
    {
        $('.text').fadeIn();
    }
    pos = mywindow.scrollTop();
 });

and here is the fiddle(updated) URL: https://jsfiddle.net/eugensunic/saTfR/48/

Upvotes: 1

Related Questions