Subtitle effect with inherited text

Asked

Viewed 149 times

0

Next, using CSS3 3 HTML5. I want to make the resource that produces the following effect: I have elements on the screen, when superimposing the arrow on it (Hover event) should appear (at the top) the text rolling from left->right in a region delimited by text color rectangle ,background color and font size specified. Any child element, must pass the text to parent function.

Imagine an example, a calendar pointing to the day, this one is highlighted and starts scrolling the text (at the top of the screen) relative to the events of the day. Code below scrolling only

.marquee {
    width: 500px;
    height: 50px;
    margin: 25px auto;
    overflow: hidden;
    position: relative;
    border: 1px solid #000;
    margin: 25px auto;  
    background-color: #222;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);
    box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);
}

The page, will not be rolled is fixed as a slide . Yes can have JS if necessary

I thought it would be, shorter the JS as a complement...the code might be functional. But I’m going to need it to be in CSS3 otherwise it comes out of the purpose of using CSS3 and HTML5

html5 effect

  • Does the Masque stand in a fixed position relative to the viewport (i.e., it should stand still if the page is scrolled)? You didn’t mention anything about Javascript. It’s completely out of the question to implement this in JS?

1 answer

0

If you want a muffin... why don’t you use one <marquee>? It still works on all modern browsers, and you just have to do something like

var calendario = …;
var marquee = document.querySelector('marquee');  // ou algo parecido pra achar o elemento

calendario.addEventListener('mouseover', function () {
    marquee.textContent = 'blablabla';  // IE 9+

    // ou para IE 8+:
    while (marquee.firstChild !== null) { marquee.removeChild(marquee.firstChild); }
    marquee.appendChild(document.createTextNode('blablabla'));
}, false);

(obviously you’d have to do it for each cell of the calendar, and pull the 'blablabla' from somewhere)

Browser other questions tagged html5 effect

You are not signed in. Login or sign up in order to post.