After spending days trying to figure out why I can't seem to get parallax scrolling working for one picture on a website I'm working on, I'm finally posting here. So I have this code so far:
HTML:
<div class="intro">
[a bunch of stuff here]
</div>
CSS:
.intro {
background: url(../images/IMG_100.png) 50% 0 fixed;
background-position: center;
margin: 0 auto;
width: 100%;
box-shadow: 0 0 50px rgba(0,0,0,0.8);
padding: 100px 0;
}
I've pretty much tried all the tutorials for a simple parallax scroll effect, but they don't seem to work for my situation as it stands. What seemed most promising to me was to use the skrollr.js plugin - I tried adding the following to my div tag:
<div id="intro" class="intro"
data-bottom="opacity:1;background-position: 0px -50px;"
data-center="opacity:1;background-position: 0px 0px;"
data-top="opacity:1;background-position: 0px 50px;">
I then initialized skrollr at the end of my html:
<script type="text/javascript" src="js/skrollr.js"></script>
<script>
window.onload = function() {
skrollr.init();
}
</script>
...doesn't work. I'm fairly new to this, so any help would be greatly appreciated!
I think that the id of your main div should be equal to skrollr-body and not intro.
1st EDIT
Actually, I see there are situations where the main id doesn't need to be named scrollr-body. Maybe this tutorial could help you achieve different effects since I couldn't find any official documentation.
Check the fiddle of your snippet from the question.
2nd EDIT
I changed your html code to this
<section id="skrollr-body">
<div class="intro"
data-bottom="opacity:1;background-position: 0px -50px;"
data-center="opacity:1;background-position: 0px 0px;"
data-top="opacity:1;background-position: 0px 50px;">
<h1>Content in here</h1>
<p>first big text block</p>
<p>second huge text block</p>
</div>
</section>
I also changed the background attribute of the .info class to this
background: url('bg-image.jpg') no-repeat fixed center;
but feel free to experiment with values. Check the working fiddle
Related
Hey guys new day new question ;) im trying to make a scrollable div should be no problem but it does not work ;( in the div i am outputting names of my database and when the space is too small you should scroll it but the scrollbar doesnt appear
my html:
<template name="friendsScroll">
<div class="CSSFreundeScrollListe">
<ul>
{{#each friend}}
<li>{{Name}}</li>
{{/each}}
</ul>
</div>
</template>
my css
.CSSFreundeScrollListe{
background: #00BFFF;
height: 150px;
overflow: scroll; (or auto both "should" work;))
width: 200px;
border: 1px solid #000;
padding: 10px;
}
javascript is working fine thats what i get
hope you can help me thanks ;)
Ninja Pixel helped me to find the problem in the comment section and the problem was that the css was not updating then i changed the background color in the css and it got updated and the scrollbars appeared too thanks again ninjaPixel ;)
boilerplate html/css/etc.
then
<div>
<div style="margin:0 auto; position:relative">
<div data-item data-ng-repeat="item in ItemCtrl.item"></div>
</div>
</div>
... the above uses an Angular template, which is incredibly simple. It just positions absolutely my content into one, two, or three columns. If I set the screen to two columns I'd like it to be centered. I'm able to do this via code, but I wanted a more fluid feel and I suspect CSS can do this, but I'm having trouble w/it.
Here's my template:
<div style="width:400px">
Content here ...
</div>
My Angular directive simply grabs the element above and changes its CSS position property to absolute and gives it a top and left property.
Why is this not working? Can this be done?
So in essence if I have one column, which is 400px and is put in my display at position 0, which would occur in this case, and the screen is at 1400px, I'd like the containing div to be displayed at x position (1400-400)/2.
If I have two columns, which are 400px and are put on my display at positions 0 and 410, which would also occur in this case, and the screen is at 1400px, I'd like the containing div to be displayed at x position (1400-810)/2.
UPDATE:
Here's a fiddle http://jsfiddle.net/0LLa1rs4/
UPDATE:
Here's a solution, although I'm not sure it's the most elegant. Any suggestions to make it better are welcome.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="background-color:blue; position:relative; width:100%; margin:20px auto;">
testing ...
<div style="position:absolute; width:400px; left:50%; margin-left:-200px">
<div style="top:100px; left:0px; width:400px; background-color:green; position:absolute">
Item #1
</div>
<div style="top:200px; left:0px; width:400px; background-color:green; position:absolute">
Item #2
</div>
</div>
</div>
</body>
</html>
Well I'm not sure what you're trying to achieve, you jsfiddle is not very clear. Do you want the number of columns to be dynamic or you choose it? I've made a jsfiddle that could answer the issue but I'm not sure:
http://jsfiddle.net/0LLa1rs4/1/
Basically you should play with
display: flex;
And on the child element
margin: auto;
From your fiddle, it looks like you're trying to center elements horizontally within a container. Your description camouflages this.
Here's a simple fiddle that does similar things to the fiddle you posted, but in a much more concise way: http://jsfiddle.net/gunderson/5eLx4r4p/1/
HTML
<div class="container">
<div class="item">Item 0</div>
<div class="item">Item 1</div>
</div>
CSS
.container{
margin: 20px;
width: 100%;
}
.item{
width: 400px;
margin: 20px auto; /* margin (horizontal) auto is what does the centering, as long as width is defined */
background: green;
}
I'm trying to achieve an effect on a webpage whereby I have a semi-transparent overlay over all elements on a page, except for one specific div.
This is an example of my page structure:
<div id="d1">
<div id="d2"></div>
<div id="left"></div>
<div id="d3"></div>
<div id="right"></div>
<div id="d4"></div>
</div>
<div id="overlay"></div>
And here is a fiddle of the above in action. I would like the green div (#d3) to be visible on top of the overlay.
Is there any way of achieving this without adding position:absolute to #d3 or modifying the DOM? I am targeting the latest version of Chrome here and am open to Javascript/jQuery solutions if there is no pure-CSS3 solution available
use position: relative for #d3 for the z-index to work
#d3 {
background: green;
z-index: 9999999;
position: relative;
}
Demo: Fiddle
See this answer
For me, the outline property is the simplest way to add an overlay around any element in CSS.
No need of z-index, just add the following code:
.myElement {
outline: 99999px solid rgba(0, 0, 0, 0.5)
}
I created a demo on jsFiddle.
Have a nice day,
Thomas.
This is the explanation of why this works: "The z-index will only work if the position property is set as well."
see http://webdesign.about.com/od/styleproperties/p/blspzindex.htm et.al.
I inserted a .swf file to my page inside a div, and I tried to make it vertically aligned to the middle of this div, but it didn't work, only horizontally but that's not what I want.
I tried to place this file in another div inside the main div and change the alignment of this div as well.
Any suggestions?
Here is a good way I use to center elements horizontally and vertically:
<div style="position:fixed; top:0; left:0; width:100%; height:100%;">
<div style="height:100%; display:table; margin:0 auto;">
<div style="vertical-align:middle; display:table-cell;">
<div><p>This is a fully-centered div!</p></div>
</div>
</div>
</div>
Hmm... its kinda hard to answer without a code snippet.
Here is an article for creating wrappers around Flash content: http://livedocs.adobe.com/flex/3/html/help.html?content=wrapper_13.html
Scroll down to the table, where they start talking about "align" or just do a page search for the word "align" to see what they have to say.
Here is also a quick idea, I have noooo idea whether or not it works, just food for thought:
div.SWFContainer object, div.SWFContainer embed {
display: inline-block;
margin: auto 0px auto 0px;
width: auto;
vertical-align: middle;
}
<div id="content">
<div id="header">
</div>
<div id="main-content">
</div>
</div>
html, body{height:100%;margin: 0px; padding: 0px; background-color: black;}
div#content{width:600px; margin: 0 auto; height:100%;}
div#header{width:600px; height:200px;}
div#main-content{width:600px; height:100%; background-color: white;}
As you can see, adding a header pushes everything down. I want main-content to extend to the end of the browser.
I think i worked around this issue before by creating a header with an image similar to my background in order to fake the appearance, however my background i'll be using is much too complicated.
Are there any methods to do this? possibly a working javascript fix?
You can make your main-content div positioned absolutely and then specify its top and bottom attributes. I've setup a jsfiddle here: http://jsfiddle.net/wrn8Y/1/
div#main-content{
position: absolute;
top: 200px;
width:600px;
bottom: 0px;
background-color: white;
}
Note that the top attribute is set to the bottom of your header, and the bottom is set to zero to hit the bottom of the page. If you wanted to have a footer you could change the bottom attribute to accommodate the footer.
Also you can do this with javascript, I generally use JQuery so here is some JQuery code that gets it done:
$('div#main-content').height($(document).height() - $('div#header').height());
This javascript (Jquery) will work with relatively positioned divs and the only css you would need to change is to remove the "height: 100%" on the "div#main-content" style.