I have posted a video screen grab of my issue here: http://whataprettyface.ca/datastellarissue.html
I have a single-page site with a dynamic vertical height that expands when certain sections are called upon. If the user calls a photo gallery from the portfolio section, the parallax effect is pushed down, revealing a large section of the background of its parent container. As the video illustrates, this is only an issue after vertically expanding the page by opening the portfolio images.
The background image cannot be repeated and I do not wish to use a white backup workaround. I also don't want to set a fixed height to the expandable section. I would, however, like to keep this parallax effect.
I did find a similar issue on here but it had never really been answered.
I am using Stellar.js v0.6.2 and have thrown up an unminified version on my site for ease of viewing: http://whataprettyface.ca/js/jquery.stellar.js
The CSS for the container looks like this:
.contactbackground {
position: relative;
background-image:url(../images/index/contact_background.jpg);
background-repeat: no-repeat;
background-size: cover;
z-index: 1;
}
Any help is greatly appreciated!
Related
I'm looking for either a plug-in or pure JS/Jquery solution for a scrolling animation.
Basically when users scrolls to a certain section, and continues scrolling, the background of that section stays still while text and images fade in and out (on top of that static background) as user scrolls.
It's similar to this website: http://www.bagigia.com/ scroll down to "designer" "the idea", you'll get a good idea of what I'm trying to accomplish.
You can do it with just css
body {
background-attachment: fixed;
}
Nice new nav bar on stackoverflow. Looks like the bootstrap I am using. It has the same problem that my site does, the nav bar jumps slightly when clicked.
Any ideas how to fix it? I haven't looked too close, but I'm thinking there should be some sort of javascript fix to hold the screen until it repaints.
The reason why the navbar jumps is because at load time the browser calculates, based on the information it has about the content, that it won't need a scrollbar. Therefore it starts rendering using full viewport width. For a quick flash, until enough of the page has loaded to make the browser paint the scrollbar, the navbar is full-width.
That means, in desktop browsers, it is 17px wider than on pages with scrollbar.
Note: Before trying to fix this, please note it's only an issue on wide, pointer based devices. It doesn't exist on mobile/touch devices. Any method from below should be limited, using media queries or device detection, to desktop, pointer based devices.
A few methods on dealing with this:
give certain elements min-height property so that the browser will estimate the initial height of the page correctly (or at least more accurate).
give <body> a min-height of calc(100vh + 1px) on pages you are certain will have a scrollbar.
use overflow:scroll on <body> on pages that you know know will have scrollbar (always wrap this in a media query)
hide (as in: opacity:0) all above the fold content and fade it in when a particular element has loaded (typically used on window load event, but you could just use a particular HTML element for this, if the page is very long and you don't care about the bottom parts to be loaded when you paint the top) - this technique is widely used by AngularJs websites/apps, principle from ng-cloak directive, but with opacity. Effective at removing FOUC and this desktop scrollbar jump issue.
use a scrollbar plugin, removing the default scrollbar. Custom scrollbars are usually positioned absolute, over the content and don't influence content rendering.
(this is more of a hack, but I use it):
#media (min-width: $md-min) { /* 768px ? */
#navbar { /* assuming this is navbar */
position:absolute;
left: 0; top: 0; /* depends on layout */
min-width: 100vw;
}
body {
margin-top: 60px; /* navbar height #desktop */
overflow-x: hidden;
}
}
Note: This issue is also known as the modal overlay navigation bug, because when modals give body position:fixed in order to place the overlay, the navigation jumps to full width (as the body no longer has a scrollbar). It's a long discussion, with various fixes. example.
From my point of view, this is a fault of desktop browser developers.
Sidebar should never, ever, interfere with window width calculation. You either paint it over the content (only when the user scrolls?) or you paint it aside from the page in a manner that still looks good when you don't have a scrollbar.
It's not that hard.
I have a pretty large background image (1920x1080) on my site that works responsively until I add the stellar.js.
For the background image I have this css rule:
.about {
background-image: url(../img/portfolioheroimage3-2.jpg);
background-attachment: fixed;
background-size: cover;
So without using stellar.js, it is responsive. Say I narrow the page to a great degree, the background image height expands and everything works fine.
However things went awry after I added stellar.js. I followed the doc and added this line in script tag: $.stellar();
Cool, the parallax effect did work. But it broke the responsiveness of my background image. Say I again narrow the page, the background image didn't grow vertically and instead it became "repeated". I tried setting background-repeat: no-repeat. But it got worse because the text went outside the background image.
Did someone also face the issue like this and know a way to have both responsiveness and parallax effect for the background image?
Thanks a bunch!
I'd like to use Parallax.js for a project, but so far I've had trouble getting it to play nice with an existing site.
Here's where I'm getting hung up:
I want to apply the plugin to an element whose height scales to fit the content inside it, and has a min-height of 300px
Parallax.js seems to override this & modifies the height based on screen size, can I prevent this?
So far, I haven't been able to "see" anything. The documentation mentions making the target div transparent, but I've had no luck
Codepen Example I'm trying to emulate: Simple Parallax Scrolling parallax.js
My Codepen: Existing site, want to add parallax to #hero
CSS I used to achieve a "simple" fixed BG effect
#hero {
background-image: url("http://pixelcog.github.io/parallax.js/img/stellar-spire-eagle-nebula-1400x900.jpg");
background-repeat: no-repeat;
background-size: cover;
background-blend-mode: overlay;
background-position: 0 0;
background-attachment: fixed;
}
Any advice/suggestions/constructive criticism is welcome! Already spent an embarrasing amount of time pulling my hair out over this.
I want to apply the plugin to an element whose height scales to fit the content inside it, and has a min-height of 300px
Parallax.js seems to override this & modifies the height based on screen size, can I prevent this?
Have you tried wrapping your #hero and applying parallax to the parent? So that the inner bock is left alone by the parallax script (while being moved by its parent)?
Scripts like sliders or parallax, etc. work by automating the application of the needed CSS rules to an element, as you found out. When this happens and it conflicts with your CSS, dodge the fight and move your content away from the effect of the script's style rules.
In other words give the script a wrapper to work on, and keep the content for yourself, away from the greedy tentacles of the script that's giving you nightmares.
I added the thumbnail class to my thumbnails div, which had the intended effect. However, some of the thumbnails were smaller in size than the others. I wanted them to have the same height so I gave each thumbnail a height of 210px, thinking that would now appear the same all aligned horizontally in a line. However, setting the height had the strange effect of making the smaller thumbnails jut out of the alignment by extending below. I tried solving this by setting the css property of top: 0px; on each thumbnail, but that did not make any difference. How can I get all my thumbnails to be the same height AND be perfectly aligned horizontally?
The problem was eventually solved by adding style element overflow: hidden; to the thumbnail class.
If you are using bootstrap, did you try putting each image in its own div class for columns? If you are at all thinking of responsive design (which is why one typically uses bootstrap) this might help you get them to align extremely quickly and easily.
http://getbootstrap.com/2.3.2/scaffolding.html, take a look at the live fluid grid part.