im looking for an scrolling page effect, I found it here: http://alterego.ae/
I really like that image slower scroll down effect then the content (with white background) but I didnt want to use javascript (I dont even know how!) to do that.
I want the same effect, without using javascript to do that.
How I achieve that?
HTML
<div style="background-image: url(../img/bg1.png); position: 50% 10px>
<div class="container">content (example: about us)</div>
</div>
<div style="background-image: url(../img/bg1.png); position: 50% 10px>
<div class="container">content (example: about us)</div>
</div>
Unfortunately, you really cannot achieve this type of scrolling (called parallax) without a bit of Javascript. However, other people on the internet have kindly written plug-ins, allowing you to implement parallax scrolling with more ease. You'll still need to use a small amount of JS to have this work, but far less than by writing the methods yourself.
I'd recommend: https://github.com/Prinzhorn/skrollr (I have no personal connection to this, just seen it before and like it!), it is easy to implement.
Sorry that this probably isn't the answer you're looking for, but parallax scrolling requires Javascript.
Related
switching a content pipeline away from wordpress.
everything is going well but there is a tiny difference that has to be simple but throwing everyone for a loop.
on this production page, when you scroll the main page... you only see the 'main' content when it's visible:
https://pracplay.com/partners
(same as: https://pracplay.com/index.php/partners/ )
on the staging page, [if the window is resized, or you're on mobile] you can usually see the non-visible content from 'main' in the footer (see attached pic, or live at: https://stage.pracplay.com/partners )
what we've tried:
running diffs of production html (very little js used)
fixed everything obviously off
it appears to be something related to z-index of the footer div, or the transparency of the footer div.
also tried:
force zindex of footer absurdly high it has no effect
changing the opacity or playing with background color alpha channel of footer doesn't reproduce it.
Our issue should be even simpler than this since we're just reproducing an existing site, with all same css. So it should be a class name issue on a div or something even simpler... but the diff isn't pointing out anything so modifying raw html to identify the problem is where we're at in this post.
this has to be so simple to fix i figured i'd try to post my understanding here and see if it generated any suggestions or ideas.
attaching a screenshot for experts who don't want to look at site but know problem from observation/experience.
(we primarily develop non-web applications but it's been exciting to get away from wordpress and have web use same processes that our other apps use.)
any help appreciated!
Ok asked someone with fresh eyes take a look.
It was pretty simple and had nothing to do with fixed/relative, z-order nor transparency (at least not directly).
They ran staging-v-prod diffs again on the actual page mentioned here.
It was pretty clearly missing one div wrapper, with class id of 'page-content'
This page-content class was applying an explicit white background to the main/central content of pages. So when it was missing, these divs were transparent and were bleeding into the footers.
So while it appeared like a footer issue, it was actually a page content issue.
Now staging matches production in this respect.
A particularly helpful tool was textcompare's html comparator view:
https://www.textcompare.org/html/
Which was a little easier to spot the html differences than a regular diff.
Your Layout Structure is a bit weird but you can fix it by putting the footer container inside #page or inside of #main. The page is overlapping the footer because of the fixed positioning. I recommend using a common clean layout structure and avoid unnecessary usage of containers.
You could simply do something like this:
<body>
<div class="page-wrapper">
<header>
<nav>
<ul>
<li>Home</li>
</ul>
</nav>
</header>
<main>
<section>
<div class="grid">
....
</div>
</section>
</main>
<footer>
....
</footer>
</div>
</body>
I am just learning to code and have been looking everywhere for an answer on this one and for some reason cannot find anything.
I noticed that it seems to be common practice to put an image inside of a container or wrapper. For instance, rather just having:
<img src="url"/>
Everyone seems to be in agreement that it needs to be this way:
<div class="container">
<img=src"url"/>
</div>
What is the purpose of wrapping the img inside of a div in this way? It seems to have something to do with "responsive design", but I'm not 100% sure. Is it just so that we have something to size the image relative to, rather than using definite sizing like pixels on the image selector in css? The more I think about it as I write this, the more it seems to be the right answer, but I'm not sure if there's something else I'm missing on this one.
Any insight would be very much appreciated. Thank you.
unfortunately there is no "single" correct answer for this.
There can be many reasons as to why one would wrap any element in another element, it is not specific to <img /> tags :)
In your question I read something like this (converted to real world example):
I see that it is common practice to put a frame around a photo.
Where the "frame" would be the wrapper element, and the photo would be the <img />.
Looking at it this way might make it seem more clear. The photo is the most important part, technically speaking you don't need a frame to show the photo. If you have just a photo, you won't be able to hang it on your wall without damaging it by driving a nail through the top or applying some tape. If you have a frame though, you can make that photo take up any amount of available space within it, you can use the clip to hang it on a wall and if you put multiple photo's in the frame, you can move them all at once since they are in the same frame.
The reason most people put that image in a "container" is because they get some sort of advantage out of it over using an image alone, this could range from aspect-ratio locks to relative positioning. In some cases, a wrapper is required to achieve certain (notably more complex) animations as well.
Websites are built out of "logical" pieces that, together, form a website. The individual pieces are all "frames" that "flow" together to create any page layout you see on every website.
It is merely a structural way of thinking, if the purpose of that image was to be used as a background image for the entire page, a better alternative would be to use CSS background-image property on the <body> tag and not use the image at all. But if the image is meant to be part of a smaller part of your website, it should probably be contained as appropiate.
This answer is in no way a guide to go by, nor a ruleset or anything like that, they are just the thoughts of another developer. There are countless reasons for wrapping an element and this answer doesn't even cover 0.0000001% of those cases. I'm just saying -- there's no specific reason to do or don't here.
I've been looking all over the Internet for a tutorial on using the Scott Kellum's parallax technique, but didn't find any. I've seen his example on CodePen and for the life of me couldn't figure out how to position and size elements on the page properly.
Let's say that I have a few simple sections as follows:
<div id="section1"></div>
<div id="section2"></div>
<div id="section3"></div>
<div id="section4"></div>
Inside each section I have some content (could be any HTML). How would I go about using Kellum's technique to make backgrounds "overlap"? I'm looking for a tutorial on actually using the technique. Thank you!
This is not a very good answer, but if you want a fairly simple way of doing parallax check out skrollr. All you have to do is link the source and initialize it, and after that it is as simple as adding parameters to your elements. Also there is a very good tutorial if you just search skrollr on Google it will be one of the top hits.
I'm trying to setup a preview box for an html editor on one of my pages. I made a standard <div id="preview"></div> style container, in which I occasionally drop my html source, and that works fine enough.
The problem is, bootstrap's styles are seeping into the container and 'poisoning' my preview. I see two solutions to this:
Move preview into an iframe
Apply some kind of clear/reset css to the element where I host the preview
eg:
<div id="preview" class="clean-css">
</div>
.clean-css {
div, p: {
border: 0;
margin: 0;
}
/* a bunch of reset css stuff here */
}
I consider iframe a clunky solution and sort of a last resort. I'd much rather keep my stuff on one page. So I started looking into various reset css stylesheets. Unfortunately, it seems most of them are geared towards equalizing differences between browsers and don't reset all styles to their bare values (for example, blockquote keeps its bootstrap styling).
I can keep googling for a better reset-css stylsheet, or I can try to fill in the holes in the stylesheet I have now. But before that, I figured I should ask more experienced frontend devs what's their experience with this.
Is there a more comprehensive clear css solution out there?
Is trying to clear up bootstrap a fool's errand and I should just go with the iframe instead?
After a few months of trying to make reset CSS work, the answer is: just use the &$^* iframe.
There are just too many potential problems and pitfalls, from balancing reset's class precedence to the fact that any CSS will just roll over legacy color / positioning attributes (which are still relevant in email authoring).
iframe is a headache to integrate into the page, but at least you know it can be done, and once it is done, it stays done.
I want my blog's post(33%width) to be floated from top to bottom, and when they rich the end of the content (static height), to continue again from top to bottom beside the rest of them. I have already made this static web page with columns(link is in the jsfiddle project).
There is a simple static example, of what i am talking about, here :http://jsfiddle.net/KBX5B/1/
<div id="content"><div>
But I want it to be automated (not to pass left and top values for each post) with pure html/css. I would like not to mess Javascript, but if you think it's the only way i would like to know about it.
I am sorry for my bad English and I do appreciate your time.
You can use column-count or column-width properties to achieve what you want. Will only work on modern browsers. IE10 included.
http://jsfiddle.net/KBX5B/2/
Actually I found the solution after reading MANY Posts...
Here it is :)
Vertical-floating elements in CSS?