Is there any easy solutions to get parallax effect up and running really easy?
I just want a simple and neat effect on my header. This is my page: www.arcanova.no/bolig
I want the header text "Bolig" to scroll faster than the picture behind it.
Here is my html code:
<section class="band banner">
<div class="container">
<div class="row">
<div class="columns sixteen">
<div class="duk"><p></p> </div>
<div class="overskrift_firma">
<h2>Bolig</h2>
</div>
</div> <!--/columns sixteen banner-->
</div><!--/ row-->
</div> <!-- / container-->
</section> <!-- / band -->
The picture is the background of the band banner section class.
See this fiddle
$(window).scroll(function(){
$('#back').css({'top':''+(-($(this).scrollTop()*0.05))+'px'});
});
Hope from above you will get an idea of how parallax works
Related
I'm having some problems of respecting the grid of bootstrap 4. I have a content of col-sm-9 and a right sidebar of col-sm-3 float-right. But the sidebar does not start from the top, but start just after the end of col-sm-9. I would like to align both the column.
Here is how the page it is looking:
Here you can inspect the code of the page: Code
This is basically my html:
<section class="row clearfix" ng-cloak>
<div class="content-top no-gutters">
<div style="background-image: url({{post.better_featured_image.source_url}});" class="content-tracks-image">
</div>
<div class="content-featured-image">
<img>
</div>
</div>
<div class="clearfix"></div>
<div class="gs-track col-sm-9"><!--start player-->
<!---player--->
</div><!-- close player -->
<div class="col-sm-9 bg-white pt-3 pb-3" ng-cloak><!-- start content-->
<!--content->
</div><!-- close content -->
<div class="col-sm-3 float-right pt-3"><!-- start sidebar -->
<!-- sidebar -->
</div><!-- close sidebar -->
</section>
I was able to align the sidebar to the content but I had to move the sidebar box before the player, and I don't want to have this behaviour.
It was difficult working with your supplied link since when I tried to run the HTML I would not get the same content. But upon manually putting in my own content and trying to recreated I found that using bootstraps ROW on a container div worked.
<div class="row">
<div class="col-sm-9">CONTENT</div>
<div class="col-sm-3">SIDEBAR</div>
</div>
Try it and let me know if it works.
I am using bootstrap. I m having header and footer, in between that I want to show side bar on left side. I am new to bootstrap and angular js. please guide me how I can build this type of structure.
Try this....
<div class="container">
<div class="row">
<div class="col-md-4">
Sidebar
</div>
<div class="col-md-8">
text
</div>
</div>
</div>
Also learn basic Boostrap: http://getbootstrap.com/
I don't really understand your problem there Priyanka kakade.
If you want a navbar on the left of your content, you can use this kind of structure between header and footer :
Example :
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 col-md-2">
<!-- navigation -->
</div>
<div class="col-xs-8 col-md-10">
<!-- content of the page -->
</div>
</div>
</div>
I recommend you use xs (mobile display) and md (desktop display) classes together, otherwise your navigation would be too little on mobile devices, or too big on computers.
So I want the following layout:
Here is an artists mock-up:
But here is what I ended up with after trying for quite a few days:
I need help to make the last elements line up right. If I use the wrong components you are free to change them. The site needs to be mobile friendly. I have made a fiddle here.
.
I also seem to have the issue of being unable to scroll vertically on the page if overflow occurs.
In bootstrap 3 seems a simple layout like this (just a suggestion)
<div class='container-fluid'>
<div class='navbar navbar-default navbar-fixed-top'> .... <(div>
</div> <!-- end container full width -->
<div class='container'><!-- begin container center margin auto -->
<div class=' col-md-12'><img src='yourlink'></div>
<div class=' col-md-12' ><h1>Title</h1></div>
<div class='jumbotron col-md-12' </div>
<div class='row col-md-12>
<div class='col-md-6>
... content for left lower box
</div>
<div class='col-md-6'>
<div> content for r2ght lower 1 box</div>
<div> content for right lower 2 box</div>
</div>
</div>
</div><!-- end of container --!>
with a background image
I currently have my layout page divided into two columns using bootstrap 3 with something similar to this.
<div class="row">
<div class="col-md-4 info">
<!--some Markup -->
</div>
<div class = "col-md-8 tasks-column">
<!--some Markup -->
</div>
</div>
I want the div with class "info" to stay fixed on the top left side when scrolling the page. When I try the bootstrap "affix" class the content in "info" effectively gets fixed but the "tasks-column" suddenly moves all the way to the left completely covering it.
I have also tried the plain css position:fixed; on "info" but it does not do anything.
The content in info is NOT a navigation panel.
Thank you guys.
Edit: the content in info is dynamic (it varies depending on the user input).
You need to offset the tasks-column. Try this.
<div class="row">
<div class="col-md-4 info">
<!--some Markup -->
</div>
<div class = "col-md-8 col-md-offset-4 tasks-column">
<!--some Markup -->
</div>
This is because you are fixing the content that pushes "tasks-column" to the right.
The simple way to do what you want is just to move "info" inside col-md-4, like this:
<div class="row">
<div class="col-md-4">
<div class="info">
<!--some fixed Markup -->
</div>
</div>
<div class="col-md-8 tasks-column">
<!--some Markup -->
</div>
</div>
Hope this helps!
I've been staring at this wireframe I've made and it has me stumped on how to make it...
http://i.stack.imgur.com/ytiMf.png
The sticky jquery properties are not the problem, it's the positioning of the areas themselves given their overlapping nature that's giving me strife.
Any suggestions? Am I thinking about this the wrong way?
Like this: http://jsfiddle.net/7Fv64/
<div class="green">Hi</div>
<div class="content-wrap">
<div class="sidebar">
<div class="yellow">Hello</div>
</div>
<div class="content">
<div class="red">Stuff</div>
<div class="purple">And</div>
<div class="black">Things</div>
</div>
</div>