Develop Reference

Stellar.js images disappear before they are in view

EDIT: sample of the problem: https://codepen.io/wa23/pen/yooGyO
Make the live render window as tall as possible to see the effect. Start scrolling from the picture of earth and by the time you get to the 3rd div, the image is already shifted so that it is almost out of view entirely.
I have 4 divs like so:
<div data-stellar-background-ratio="0.5"></div>
<div class="plain"></div>
<div data-stellar-background-ratio="0.5"></div>
<div class="plain"></div>
The first and third rectangular div will have a background image that is parallaxed via Stellar.js, with other two do no, IE, they are staggered.
The problem is, by the time I scroll to the 3rd div, stellar js has already put my background image way out of view, both of the stellar divs have this property:
background-position: 0px 745.5px; which is fine for the first div, since it is already out of the view frame, but doesn't work for the 3rd, because by the time you get there, it's background image has already been shifted vertically by 745px.
I tried using data-stellar-vertical-offset="some number" with different values for the offset, but it doesnt work consistently across all viewport heights. 1900 is what it takes for my 27 inch monitor, but it needs half that for my 15 inch laptop. I'm not sure what to do about this.

Here is you answer, Change those properties,
No.1 Set background-attachment: fixed;
div:nth-of-type(odd) {
height: 150vh;
width:100%;
background-size: cover;
background-repeat:no-repeat;
background-attachment: fixed;
}
No.2 in js,
$.stellar({
horizontalScrolling:false,
scrollProperty: 'transform'
});

Is there a way to achieve smoother transitions between images using lightbox2?

I'm using Lightbox2: http://lokeshdhakar.com/projects/lightbox2/.
The plugin seems to have been written in a way that produces a 'flash' effect when navigating to a new image in a collection. I believe this is because the old image simply disappears, rather than fading out first or crossfading (this would be ideal) with the new image that is fading in.
For a demo of this flaw, just view the example on the Lightbox2 link above.
Is there a way to add some sort of fade out transition when the user advances to the next image? As a developer rather unskilled in JS, what could I add to the lightbox.js script that would allow me to achieve 100% smooth transitions between images?

I can't work out a way to fade out the image like you suggested, but I think this really helps to avoid the white flash between images.
In the lightbox.css file between lines 43 and 51, simply change the background colour to black, or something similar, basically meaning you'll get a black flash instead of white. If you still want a white border around the image, just add one here (You'll also need to remove lines 59 to 61). So you'll end up with this:
.lb-outerContainer {
position: relative;
background-color: black;
*zoom: 1;
width: 250px;
height: 250px;
margin: 0 auto;
border-radius: 4px;
border: 4px solid white;
}
Also, if you're not happy with the fade in speed, take a look at line 313 in the lightbox.js file.
Specifically on line 316, change ('slow') to a numerical value e.g. (800).
// Display the image and its details and begin preload neighboring images.
Lightbox.prototype.showImage = function() {
this.$lightbox.find('.lb-loader').stop(true).hide();
this.$lightbox.find('.lb-image').fadeIn('slow');
this.updateNav();
this.updateDetails();
this.preloadNeighboringImages();
this.enableKeyboardNav();
};

Half page background / Column background

I'm running this JavaScript and CSS (jsfiddle) on this website (animevid-other) so what I need is to adapt the JavaScript and CSS to the column_sx or have the background centered on the left (where there's the column), is this possible?
I've found something that could have helped but I think it's not exactly what I need (multiple-backgrounds-left-half-and-right-half). So since I have not so much knowledge of JavaScript and just a few things about CSS, could you help me?
Edit : more details here http://i.imgur.com/DsF4q3M.png

You should set the background to colonna_sx instead of body. So add this to colonna_sx.
background-repeat: no-repeat;
background-position: center;
background-size: cover;
Then you should change the script. If you add jQuery you can change this.
document.body.background ='http://adventureofucm.com/OtherSites/image_background/'+num+'.jpg';
to this.
var backgroundpic = 'http://adventureofucm.com/OtherSites/image_background/'+num+'.jpg';
$('.colonna_sx').css("background", "url(backgroundpic)");
Without jQuery.
document.querySelector('div.colonna_sx').style.backgroundImage = 'url(http://adventureofucm.com/OtherSites/image_background/' + num + '.jpg)';
This should work in most browsers (IE8 and up) http://caniuse.com/#feat=queryselector.

Make div non-transparent to cover original div

I have a div "whitebox" which is basically a div that should cover my original "stimuli" div. It goes smooth and appears nicely, yet it does not cover the original div but seems to be transparent so that I can still see my original div though it. But I want it to be covered completely.
Apparently 'opacity' does not fix it.
<div id="stimuli"> Just press B and get started... </div>
$("#whitebox").fadeIn("fast").delay(500).fadeOut("fast");
CSS:
#whitebox{
background: #fc3a54;
opacity: 1;
position:absolute;
height: 80%;
width: 70%;
}
Is there a simple trick to fix the transparency issue with my code above, or any other hints?

try using an image with #fc3a54 colour instead of using the background function, you can then use z-index to insure your whitebox is in front

Are you positive #whitebox is covering #stimuli? Also, jQuery fadeIn and fadeOut will toggle the display property so if you start with an element that has display:none and run fadeIn on it it will show it. You can use fadeToggle (https://api.jquery.com/fadeToggle/) as well.

Changing picture on mousemove in javascript

I came across this site, and wanted to implement something similar to their picture changing logo whilst the mouse is moving into my own site. I'm not sure if it uses jQuery as the page source is a little confusing, is there anyway for me to do this within javascript?

Actually, that site is using a background sprite, and display each logo changing the position of the sprite.
This is the sprite image for the logo:
http://w00tmedia.net/wp-content/themes/w00t/images/citrus-logos.png
You should do some math based on the sprites layout and how 'quickly' you want to change the image.
See this,
http://docs.jquery.com/Tutorials:Mouse_Position
And then change the element's background position.

You could also accomplish the same effect using css if you have a div or some other block element instead of an image tag.
#logo {
background: url('logo.png');
width: 200px;
height: 45px;
}
#logo:hover {
background: url('logo_hover.png');
}