HTML & CSS: DIV banner y texto desaparece por debajo del contenido web

Buenas a tod@s

Por exigencia del guion necesito hacer un banner o un slide de imagen + texto que al hacer scroll para ver el resto de la web se quede fijo en su posicion desapareciendo por debajo del resto del contenido de la web … frase rara lo se, mal explicado lo se tambien. Probar este codigo y entendereis por donde van los tiros y si alguno de vosotros sabe decirme como se llama esto os agradeceria eternamente que me lo dijerais!

CSS:


#main-header { /* banner que se quedara por debajo del contenido al hacer scroll */
	position:fixed; /* Hacemos que la cabecera tenga una posición fija */	
	z-index: 1;
}

#main-content{ /* contenedor principal */
	z-index: 9999;
	position:relative;
	}

HTML


<body>
        
<div id="main-header">BANNER + TEXTO</div>
	
<section id="main-content">BLA BLA BLA BLA</section>

</body>

Espero haberle servido de ayuda a alguien mas que a mi mala memoria, la proxima vez que me tope de nuevo con esta necesidad ya vengo a tiro fijo

Un saludo !

#jQuery slide carrusel #Marquee Plugin with #CSS3 Support by @aamirafridi

Fuente: http://aamirafridi.com/jquery/jquery-marquee-plugin

Recently I been working on a project where a static text message needs to be animated similar to non-standard HTML marquee tag.

Googling gives me quite few jQuery plugins but they got so many options and complex html layout/structure was needed for the plugin to work. I decided to make a simple jQuery plugin which can scroll the text either left, right, up or down.

Github:

jQuery plugin to scroll the text like the old traditional marquee — Read More

Latest commit to the master branch on 10-21-2014

Download as zip

 

IMPORTANT NOTE:

I am removing details about options & events from this blog post as github has all the details so its hard to maintain both. Here I will list few examples to show you how to use the plugin with different options:

Examples:

Here is the list of some examples. You can open each pen below in new window and play around it. Also you can click HTML, CSS or JS tab to see the relevant code.

Basic example with default options
HTML:

First include the plugin.

Content inside the main wrapper can have html.

CSS:
JS:
Demo:

Click the Edit button shown below to open the demo in new window.

Starting plugin with options
Using options as data attributes
Mixing data attributes and JS options

Check HTML tab for data attributes options and JS for options provided when applying the plugin. This is useful if you want to start all marquees with default options using JS and then if you want to have different option for certain marquee element using data attributes. Keep in mind that data attributes will take precedence over options provided using JS. Check this example where I define direction using both JS and data attributes.

Events
CSS3 vs jQuery
Direction
Duplicated
pauseOnHover
resumeOnHover (the other way around)

Question on github: “There is some way to do the opposite of “pauseOnHover”, leave the text stopped until you hover on it, and when you mouseout it comes back to normal? Just like spotify does in their app.”

Pause & Resume methods
Toggle method
Destroy method
Change marquee with ajax content

Due to no ‘Access-Control-Allow-Origin’ issue, please click here to open pen in new window to see it in action.

How to Create a Stylish Image Content Slider in Pure #CSS3 by @designmodo

Fuente : designmodo.com

How to Create a Stylish Image Content Slider in Pure CSS3 [Tutorial]

In this tutorial we will create a CSS3 only image slider inspired on the Futurico User Interface by Vladimir Kudinov. The CSS3 features that we’ll be using in this tutorial are in tests in the most recent browsers so this slider will not work in all browsers (try preview in Chrome and Safari). I don’t recommend you to use it on your professional projects as this will not work properly, use this tutorial just to play around with the last CSS3 features that you will be able to use in the feature.

Ir al tutorial | Ver Demo