CSS scroll effect: overflow and position troubles -


I am trying to create a scrolling effect in pure CSS, where "pages" emerge / slides on each other and The screen is usually out of the way.

My intention was to be an original element which is a comparative and overflow scroll of the situation. Inside it is a "window" in which "page" is included. Overflow is hidden in windows, and the pages are completely located at the top of the parent, and they are the same size.

If it will work as expected, you will be able to see only one page when its window is in view.

In fact, I look at all the pages at the same time, ignoring my parents' overflow hidden property, while they are out of bounds.

I 'once seen this effect in the wild, but I do not remember where and how anyone knows how it is done?

html: 

  & lt ;! DOCTYPE html & gt; & Lt; Html lang = "en" & gt; & Lt; Top & gt; & Lt; Title & gt; Newspaper Scroll Test & lt; / Title & gt; & Lt; Meta http-equiv = "content-type" content = "text / html; charset = UTF-8" & gt; & Lt; Link rel = "stylesheet" href = "style.css" type = "text / css" & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "content" & gt; & Lt; Div class = "post" & gt; & Lt; H3 & gt; Test & lt; / H3 & gt; & Lt; Div & gt; Lorem ipsum dolor sit amet. & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "post" & gt; & Lt; H3 & gt; Test & lt; / H3 & gt; & Lt; Div & gt; You do not mess / Div & gt; & Lt; / Div & gt; & Lt; Div class = "post" & gt; & Lt; H3 & gt; Testje & lt; / H3 & gt; & Lt; Div & gt; Fietspomp & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "post" & gt; & Lt; H3 & gt; Ttpttp & lt; / H3 & gt; & Lt; Div & gt; Lorem ipsum dolor sit amet. & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;

CSS: 

  #content {height: 200px; Width: 200px; Overflow: Auto; Status: Relative; } .post {Overflow: hidden; Height: 200 pixels; } .post divas {status: absolute; Top: 50px; Left: 0; } .Post H3 {Status: Absolute; Top: 0; Left: 0; }

I believe that you are going for. Changes made in your CSS are mainly in the .post category: 

  .post {overflow: hidden; Status: Completed; Z-index: 1; Top: 50px; Left: 0; Height: 200 pixels; Background: #fff; }

In the full position rather than setting nested .post div , I have set the whole .post This way you can stack your every content post. I have also added a background color so that the posts can not be visible through each other.

To get a separate page to show, you have to change the Zee-index for more than 1 value.

Alternatively, if you want a scrolling effect with stacked posts after each other, then you can change the CSS like this: 

  .post { Overflow: hidden; Height: 200 pixels; Background: #fff; }

-

Comments

Post a Comment

Popular posts from this blog

Eclipse CDT variable colors in editor -

I hope this is a good question to ask here. This programming is related, so I thought it would be better than the superuser, so I am using the CDT C ++ Eclipse plugin. I know how the editor changes colors for some things But is there a way to do that all the variables are different colors? For example in KDEValue, it sets the local variables and square variables in different colors and bold square squares. Can I copy it to CDT? Eclips provides some level of color customization for text editor syntax You can see it on the following: There are many elements, including the Window> Preferences> C / C ++> Editor> Syntax color code that can be changed, assembly, Comments, Preprocessor and Doxian Under the code, it is possible to change the color of some variable types, such as global variables, local variable announcements, local variable references, and parameter variables. But I do not think the code is capable of changing the color of each variable declared....
Read more

AJAX doesn't send POST query -

$ (दस्तावेज़) .ready (function () {function ajaxselectrss (rssurlvar) {var ajaxRequest; // वेरिएबल जो अजाक्स को संभव बनाता है! कोशिश करें कि {// ओपेरा 8.0+, फ़ायरफ़ॉक्स, सफारी अजाक्स अनुरोध} = नया एक्सएमएलएचटीपीआरइवेस्ट ();} कैच (ई) {// इंटरनेट एक्सप्लोरर ब्राउज़र्स {ajaxRequest = new ActiveXObject ("Msxml2.XMLHTTP");} पकड़ो (ई) {try {ajaxRequest = new ActiveXObject ("Microsoft.XMLHTTP");} कैच (ई) {// कुछ गलत चेतावनी ("आपका ब्राउज़र तोड़ दिया!"); वापसी झूठी;}}} // एक बनाएं फ़ंक्शन जो सर्वर से भेजे गए डेटा प्राप्त करेंगे ajaxRequest.onreadystatechange = function () {if (ajaxRequest.readyState == 4) {var ajaxDisplay = document.getElementById ('news'); ajaxDisplay.innerHTML = ajaxRequest.responseText;}} / / Var rssurlvar = $ (this) .attr ("title"); var queryString = "rurl =" + rssurlvar; var urltofile = "rssget.php"; ajaxRequest.open ("पोस्ट", urltofile, सच); ajaxRequ Est.setRequestHeader ("सामग्री-प्र...
Read more

wpf - Custom Message Box Advice -

Well, I'm using a custom window box that comes with some custom control boxes that accompany the text The producers who are displayed are called. I have a defined event, which has been subscribed through the original class, it gets burnt when clicking on the button. However, I can not see how to use it effectively, I would like to return one yes, whether yes or not, but obviously my code will continue to execute, so this Below is some example code to clarify the problem that the method has subscibed by clicking on the button. Message box window Public partial class custom message box: window {public representative message messagebox object sender, event events e); Public event messagebox handler messagebox document; Public Customs Box () {Initial group (); } Public Customsbox (String Message) {InitializeComponent (); This.txtdescription.Text = Message; } Public Customsbox (String Message, String Title, String First BTNtext) {Initialization (); This.lbltitle.Content =...
Read more