Código de CSS - Simple Reveal Background Scroll

Pos: 3

Val: 571

Ha mantenido su posición en CSS (en relación al último mes)

Simple Reveal Background Scroll

CSS

(2)

Publicado el 8 de Octubre del 2016 por Scriptshow (141 códigos)

2.113 visualizaciones desde el 8 de Octubre del 2016

Simple código que permite un efecto reveal de fondos en puro CSS. Sin JavaScript, sin librerías; totalmente compatible con nuevos, antiguos navegadores y demás dispositivos. Adaptable con escasos cambios a diferentes proyectos.

Requerimientos

Un navegador web o dispositivo compatible con HTML y CSS.

1.0
(2)

Actualizado el 13 de Octubre del 2016 (Publicado el 8 de Octubre del 2016)

gráfica de visualizaciones de la versión: 1.0

2.114 visualizaciones desde el 8 de Octubre del 2016

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width">

<title>Reveal Background Scroll</title>

<style type="text/css">

* {

margin: 0;

padding: 0;

border: 0;

html, body {

width: 100%;

height: 100%;

overflow: auto;

font: normal 16px/24px sans-serif;

div {

width: 100%;

height: 100%;

display: block;

position: relative;

#sec1 {

background: #AADDDD url(none);

background-repeat: no-repeat;

background-position: center center;

background-attachment: fixed;

#sec2 {

background: url(fondo_02.jpg);

background-repeat: no-repeat;

background-position: center center;

background-attachment: fixed;

#sec3 {

background: #DDDDAA url(none);

background-repeat: no-repeat;

background-position: center center;

background-attachment: fixed;

#sec4 {

background: url(fondo_04.jpg);

background-repeat: no-repeat;

background-position: center center;

background-attachment: fixed;

</style>

</head>

<body>

<div id="sec1"><br><p align="center">T E X T O - <b>01</b></p> <b>+</b> Texto, Etc ...</div>

<div id="sec2"></div>

<div id="sec3"><br><p align="center">T E X T O - <b>02</b></p> <b>+</b> Texto, Etc ...</div>

<div id="sec4"></div>

</body>

</html>

Comentarios sobre la versión: 1.0 (2)

ScriptShow

11 de Octubre del 2016

De las variantes que hice del experimento Reveal Background Scroll podéis ver una en mi Web:

http://www.retroaudio.es/test/

Esta contiene una barra lateral con efecto opacity que desaparece cuando no hay actividad durante unos 4 segundos; apareciendo de nuevo al mover el mouse, pulsar una tecla, etc.

P.D.: Todo el contenido del experimento ocupa 4-6 Kb. Contruido desde cero; sin librerías, sin frameworws... Sólo para test. Gracias.

Responder