We Keep Coding

js parallax effect overlapping images when scrolling

What I would like to do is an animation where there is the sky and mountains of different colors with some text in the middle and when I scroll they come overlapping one at a time (as if they cover each other).
I've tried looking for different tutorials or documentation and I can not do it
what should happen:
The result should be that when scrolling the images of the mountains with the text overlap each other and when you get to the last image the site can be scrolled normally.
i don't have any preference for the js library that will be used
below some codepen links with examples of things i tried to do:
here is the html that i should use with the image links:
<div class="debug">
<label><input type="checkbox"> Debug</label>
</div>
<div class="parallax">
<div id="group" class="parallax__group">
<div class="parallax__layer parallax__layer--base1">
<img src='https://tacweb-test.azurewebsites.net/img/mountain-dark-green.svg'>
</div>
<div class="parallax__layer parallax__layer--base">
<!-- <div class="title">Base Layer</div> --><img src='https://tacweb-test.azurewebsites.net/img/mountain-white.svg'>
</div>
<div class="parallax__layer parallax__layer--back">
<!-- <div class="title">Background Layer</div> -->
<img src='https://tacweb-test.azurewebsites.net/img/mountain-green.svg'>
</div>
<div class="parallax__layer parallax__layer--deep">
<!-- <div class="title">Deep Background Layer</div> -->
<img src='https://tacweb-test.azurewebsites.net/img/clouds.svg' id='clouds'>
</div>
</div>
https://codepen.io/habby1337/pen/xxrZMEa (the one that works a bit better)
https://codepen.io/habby1337/pen/xxrOOqN

Slick Carousel Permanently Off Screen

I'm attempting to create a slick carousel using the slick library http://kenwheeler.github.io/slick/
Slick is loading and it's applying classes, containers, buttons etc. properly but the slides are permanently off screen. The translate3d x value on the active slide is always set to be outside the window. When clicking the 'previous' button or dragging the slide I'm able to pull it into the screen but as soon as it reaches the 0,0,0 position it returns to being outside the screen immediately. Here is my attempt to get it to work
<div class="slick-slider homepage-slider">
<div>
<a href="#">
<div class="slide-content"><img src="http://placehold.it/350x150">
<div class="slide-text">
<h2 class="slide-title">Slide Title</h2>
<div class="slide-caption">
<p>Slide Summary</p>
</div>
</div>
</div>
</a>
</div>
<div>
<a href="#">
<div class="slide-content"><img src="http://placehold.it/350x150">
<div class="slide-text">
<h2 class="slide-title">Slide Title</h2>
<div class="slide-caption">Slide summary</div>
</div>
</div>
</a>
</div>
<div>
<a href="#">
<div class="slide-content"><img src="http://placehold.it/350x150">
<div class="slide-text">
<h2 class="slide-title">Slide title</h2>
<div class="slide-caption">
<p>Slide summary</p>
</div>
</div>
</div>
</a>
</div>
</div>
In my js file I'm using
jQuery(document).ready(function() {
jQuery('.homepage-slider').slick({
rtl: true
});
});
http://jsfiddle.net/q1qznouw/549/
note: dragging works on my webpage but not within the jsfiddle sandbox
I receive no javascript errors. Is there a reason why the slides are permanently at a translate3d position outside the browser window, and when dragging onto the screen returns outside the browser window when letting go?

The issue is with your rtl setting. This requires a bit of extra markup to work (from Slick docs):
Note: the HTML tag or the parent of the slider must have the attribute
"dir" set to "rtl".
If you change your slick parent div from this:
<div class="slick-slider homepage-slider">
To this:
<div class="slick-slider homepage-slider" dir="rtl">
That should sort it

CSS alignment issue when title is too long in a list loading with Angular

I have a list loading with AngualarJS ng repeat. List contains images and title, like that. This is the code for the list.
<div class="row">
<div ng-repeat="data in allStars">
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a style="color: black" class="thumbnail" href="#/star/{{data.psid}}">
<img class="img-responsive" src="lib/{{data.imagepath}}"
alt="">
<div class="row thumbEffect">
<div class="col-lg-12">
{{data.psname}}
</div>
<div class="col-lg-12">
Views : {{data.views}}
</div>
<div class="col-lg-12">
Scenes : {{data.scenes}}
</div>
</div>
</a>
</div>
</div>
</div>
This is loading nicely in desktop versions. But in mobile versions, when the title is too long, it comes to two lines and so the image below that getting a big space. But I want to make it look as following image. When title getting long, other side images also getting same height. (There are two images in my site too in mobile view).
How can I do this ? With CSS and Javascript ?

CSS translate3d performance problems on mobile devices with big DOM

I'm using OwlCarousel 1.3.3 on a website pretty much like the sync example from the owl website (http://owlgraphic.com/owlcarousel/demos/one.html):
var owlconfig = {
singleItem: true,
navigation: false,
pagination: false,
afterAction: syncCarousels
};
$('.image-gallery').owlCarousel(owlconfig);
The syncCarousels doesn't have any magic in it and it doesn't cause the lag, because it's still happening when I take that method out.
The HTML of the carousel (after initialising the JS):
<div class="image-gallery owl-carousel owl-theme">
<div class="owl-wrapper-outer">
<div class="owl-wrapper">
<div class="owl-item" style="width: 300px;">
<a href="images/image.jpg" class="image-gallery__image">
<img src="images/image.jpg" alt="Image" itemprop="image">
<span class="button">
<span class="btn__inner">Detail</span>
</span>
</a>
</div>
<div class="owl-item" style="width: 300px;">
<a href="images/image.jpg" class="image-gallery__image">
<img src="images/image.jpg" alt="Image" itemprop="image">
<span class="button">
<span class="btn__inner">Detail</span>
</span>
</a>
</div>
<div class="owl-item" style="width: 300px;">
<a href="images/image.jpg" class="image-gallery__image">
<img src="images/image.jpg" alt="Image" itemprop="image">
<span class="button">
<span class="btn__inner">Detail</span>
</span>
</a>
</div>
<div class="owl-item" style="width: 300px;">
<a href="images/image.jpg" class="image-gallery__image">
<img src="images/image.jpg" alt="Image" itemprop="image">
<span class="button">
<span class="btn__inner">Detail</span>
</span>
</a>
</div>
</div>
</div>
In the desktop version, everything works fine, but if I test it on an iPhone or iPad, the swipe feels extremely laggy. On DragEnd, it stops for like 500ms, before anything happens.
The page where the carousel is embedded has a lot of difference html markup, text and images basically. If I remove some of that markup, the owlCarousel performance improves, but thats not a solution.
How could the performance be improved? Event the "noSupport3d" option of owl which uses jQuery animate performs better.

Okay, I figured it out, here's the solution for everyone stumbling upon a similar problem:
A big amount of DOM elements affect the performance of transitions, that's why the slider worked perfectly in a lightweight html page but had performance issues in a bigger page.
What I did now to increase performance of my slider was adding transform: translateZ(0px) to the parent element of the one being translated.
Attention: Using translate3D does not make this code redundant. I'm now using translate3D for the sliding effect AND translateZ(0px) for the parent container of the sliding one - this did the trick.

Getting webpage content using Bootstrap 3 positioned above animated background correctly

The overview: I'm using Bootstrap 3 as my CSS Framework, thus the content is organized using its container/grid system. The background animation consists of blue/green diagonal strips that basically zig zag with each other. The animated background sequence is using two images that are repeated vertically. Currently the animation background images are in their own container/divs. Essentially I'm trying to fit a number of containers with the content above the background container.
My goal is to have the animated background responsive to device size but also able to have content anchored to specific places on the page background/animation. Eventually I would like to have additional events triggered according to the mouse's y-axis position.
Originally I thought I could have the background in its own container then have the containers/div's that contained the content set to a higher z-index so it would be positioned above the background animation. As you can see from looking at the jsfiddle I can't get the contents containers to be positioned above the background animation. It gets pushed to the bottom of the page.
I'm wondering if I need to make the background in its own non bootstrap div while only the contents use bootstrap? I could use width: 100% and height: 100% but then I I'm not sure if I would be able to anchor/fix certain content to specific points in the page.
I'm open to any and all suggestions. Simply put I want to have the contents position correctly over the animated background while also allowing the page to be responsive to device size.
<body>
<div class="container">
<div class="bluestrip">
<img src="http://i59.tinypic.com/rt0txj.jpg" />
</div>
<div class="greenstrip">
<img src="http://i57.tinypic.com/auv6fb.jpg" />
</div>
<div class="bluestrip extra">
<img src="http://i59.tinypic.com/rt0txj.jpg" />
</div>
<div class="greenstrip">
<img src="http://i57.tinypic.com/auv6fb.jpg" />
</div>
<div class="bluestrip extra">
<img src="http://i59.tinypic.com/rt0txj.jpg" />
</div>
<div class="greenstrip">
<img src="http://i57.tinypic.com/auv6fb.jpg" />
</div>
</div>
<div class='container zindex'>
<div class="row">
<div class='col-md-2'>
<img src="http://s26.postimg.org/8jazgghop/largest_iphone_3_of_3_14.gif">
</div>
<div class='col-md-2'>
<img src="http://s26.postimg.org/c46uzom89/medium_iphone_2_of_3_14.gif">
</div>
<div class='col-md-2'>
<img src="http://s26.postimg.org/c46uzom89/medium_iphone_2_of_3_14.gif">
</div>
</div>
</div>
</body>
http://jsfiddle.net/bismarck611/jt2k4o6z/

I was able to solve the problem with a few code changes. Never figured out if it was possible to have two containers stacked over each other with different z-index's.
<body>
<div class="background-content">
<div class="bluestrip">
<img src="http://i59.tinypic.com/rt0txj.jpg" />
</div>
<div class="greenstrip">
<img src="http://i57.tinypic.com/auv6fb.jpg" />
</div>
<div class="bluestrip extra">
<img src="http://i59.tinypic.com/rt0txj.jpg" />
</div>
<div class="greenstrip">
<img src="http://i57.tinypic.com/auv6fb.jpg" />
</div>
<div class="bluestrip extra">
<img src="http://i59.tinypic.com/rt0txj.jpg" />
</div>
<div class="greenstrip">
<img src="http://i57.tinypic.com/auv6fb.jpg" />
</div>
</div>
<div class='container zindex'>
<div class="row">
<div class='col-md-2'>
<img src="http://s26.postimg.org/8jazgghop/largest_iphone_3_of_3_14.gif">
</div>
<div class='col-md-2'>
<img src="http://s26.postimg.org/c46uzom89/medium_iphone_2_of_3_14.gif">
</div>
<div class='col-md-2'>
<img src="http://s26.postimg.org/c46uzom89/medium_iphone_2_of_3_14.gif">
</div>
</div>
</div>
</body>
The div that is holding the img's I changed the css class to the following:
.background-content {
position: absolute;
z-index: -1;
min-width: 100%;
min-height: 100%;
}
This allowed for the images to resize themselves according to screen size and fit below the page contents. Now I'm still able to use the bootstrap framework over my css animated background.