We Keep Coding

How to create image scrolling parallax effect with CSS?

I saw this cool scrolling effect online...
Where the image blends with the next image when scrolling through sections. I've been trying to reproduce it, but I can't seem to figure it out?
How can I create this effect on the web?
Here is the link to where I saw the effect... http://readingbuddysoftware.com/how-it-works/
I've tried using position: fixed on the screenshots with the z-index of the section higher then the image, but the last screenshot is always on the top.
Any ideas?
Update: For various reasons (including placement, using slants...), I can't use the background-image css solution. I need a solution for using the <img> element.

This can be done using background-attchement:fixed and two similar images.
Here is a simple example:
body {
min-height:200vh;
margin:0;
background:url(https://picsum.photos/id/1069/150/150?grayscale) 20px 20px no-repeat;
background-attachment:fixed;
}
.box {
margin-top:220px;
height:200px;
background:url(https://picsum.photos/id/1069/150/150) 20px 20px no-repeat,
grey;
background-attachment:fixed;
}
<div class="box">
</div>
That you can easily scale with many images:
body {
min-height:250vh;
margin:0;
background:url(https://picsum.photos/id/1069/150/150?grayscale) 50px 50px/auto no-repeat;
background-attachment:fixed;
}
.box {
height:200px;
background:url(https://picsum.photos/id/1069/150/150) 50px 50px/auto no-repeat,
grey;
background-attachment:fixed;
}
.box:first-child {
margin-top:200px;
}
<div class="box">
</div>
<div class="box" style="background-image:url(https://picsum.photos/id/11/150/150);background-color:yellow">
</div>
<div class="box" style="background-image:url(https://picsum.photos/id/106/150/150);background-color:pink">
</div>
You can also consider the use of img and position:fixed but you will need some trick to hide the overflow using clip-path
body {
min-height: 250vh;
margin: 0;
padding-top: 100px;
}
img {
position: fixed;
top: 50px;
left: 50px;
}
.box {
height: 200px;
background: grey;
clip-path: inset(0);
}
<div class="box">
<img src="https://picsum.photos/id/1074/200/120?grayscale">
</div>
<div class="box" style="background-color:red;">
<img src="https://picsum.photos/id/1074/200/120">
</div>
<div class="box" style="background-color:yellow;">
<img src="https://picsum.photos/id/1024/200/120?grayscale">
</div>
<div class="box" style="background-color:pink;">
<img src="https://picsum.photos/id/1024/200/120">
</div>
Or using mask
body {
min-height: 250vh;
margin: 0;
padding-top: 100px;
}
img {
position: fixed;
top: 50px;
left: 50px;
}
.box {
height: 200px;
background: grey;
-webkit-mask:linear-gradient(#fff,#fff);
mask:linear-gradient(#fff,#fff);
}
<div class="box">
<img src="https://picsum.photos/id/1074/200/120?grayscale">
</div>
<div class="box" style="background-color:red;">
<img src="https://picsum.photos/id/1074/200/120">
</div>
<div class="box" style="background-color:yellow;">
<img src="https://picsum.photos/id/1024/200/120?grayscale">
</div>
<div class="box" style="background-color:pink;">
<img src="https://picsum.photos/id/1024/200/120">
</div>
For better support, here is a similar idea with some JS to avoid the use of clip-path or mask
I will update the position of the image using a CSS variables but you can easily do without:
window.onscroll = function() {
var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
document.documentElement.style.setProperty('--scroll-var', scroll+"px");
}
:root {
--scroll-var: 0px;
}
body {
min-height: 150vh;
margin: 0;
}
img {
position: fixed;
top: 20px;
left: 20px;
}
.box {
margin-top: 220px;
height: 200px;
background: grey;
position: relative;
overflow: hidden;
}
.box img {
top: calc(-220px + 20px + var(--scroll-var));
/* margin of box + top of the other image + scroll*/
position: absolute;
}
<img src="https://picsum.photos/id/1069/150/150?grayscale">
<div class="box">
<img src="https://picsum.photos/id/1069/150/150">
</div>
With many images:
window.onscroll = function() {
var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
document.documentElement.style.setProperty('--scroll-var', scroll+"px");
}
:root {
--scroll-var: 0px;
}
body {
min-height: 250vh;
margin: 0;
padding-top:200px;
}
img {
position: fixed;
top: 50px;
left: 50px;
}
.box {
height: 200px;
background: grey;
position: relative;
overflow: hidden;
}
img.f1 {
top: calc(-200px + 50px + var(--scroll-var));
position: absolute;
}
img.f2 {
top: calc(-400px + 50px + var(--scroll-var));
position: absolute;
}
img.f3 {
top: calc(-600px + 50px + var(--scroll-var));
position: absolute;
}
<img src="https://picsum.photos/id/1069/100/100?grayscale">
<div class="box">
<img class="f1" src="https://picsum.photos/id/1069/100/100">
</div>
<div class="box" style="background-color:yellow;">
<img class="f2" src="https://picsum.photos/id/107/100/100">
</div>
<div class="box" style="background-color:pink;">
<img class="f3" src="https://picsum.photos/id/1072/100/100">
</div>

Fixed position when parent is relative

So not sure if this one is possible but from my understanding of the spec the parent of a position fixed element should be the viewport not a parent element with position relative.
That obviously all works when it comes to positioning but not with z-index.
If you take a look at this example,
.parent {
height: 1000px;
}
.el-one {
position: relative;
z-index: 2;
height: 100px;
width: 100%;
color: red;
}
.el-two {
position: relative;
z-index: 2;
background-color: black;
height: 500px;
width: 100%;
}
.im-fixed {
position: fixed;
top: 0;
left: 0;
}
<div class="parent">
<div class="el-one">
<div class="im-fixed">Hello</div>
</div>
<div class="el-two"></div>
</div>
https://codepen.io/anon/pen/mmvXaE
The fixed element goes behind the black section if you scroll down, what I need is a way to get the red element to the front without moving it out of el-one.
I have a project where some embed code needs to become fixed when you scroll past it, this is a better example of the actual code. The example above just highlights the issue in a simple way:
<div class="parent">
<div class="el-one">
<div id="my-wrapper">
<iframe class="im-fixed"></iframe>
</div>
</div>
<div class="el-two"></div>
</div>
,
I found this online talking about what I believe has caused the issue: https://developers.google.com/web/updates/2012/09/Stacking-Changes-Coming-to-position-fixed-elements but no luck finding a workaround.
All I can think of is using JS to move the element from where an editor puts the embed code and prepending it to the body when the user scrolls past the element.
Anyone else come across this or have any ideas?

You want something like this? Increase the z-index of .el-one higher than the one you want to overlap
.parent {
height: 1000px;
}
.el-one {
position: relative;
z-index: 99;
height: 100px;
width: 100%;
color: red;
}
.el-two {
position: relative;
z-index: 2;
background-color: black;
height: 500px;
width: 100%;
}
.im-fixed {
position: fixed;
top: 0;
left: 0;
}
<div class="parent">
<div class="el-one">
<div class="im-fixed">Hello</div>
</div>
<div class="el-two"></div>
</div>

Use the following:
.el-two {
position: relative;
z-index: -1;
background-color: black;
height: 500px;
width: 100%;
}

There are several ways to solve this issue. Increasing Z-Index, cleaning up the div and etc.
I think you are sort of trying sticky header functionality. There is a new value for position CSS attribute.
position: sticky
I have cleaned up the code and removed all Z-Index. Please check the attached code snippet.
Note: Supported only in Chrome, Firefox
Not supported in IE.
.parent {
background-color: green;
position: relative;
width: 100%;
height: 5000px;
}
.header {
position: sticky;
top: 0px;
left: 0px;
height: 50px;
background-color: yellow;
}
.el-one {
background-color: blue;
color: white;
height: 100px;
width: 100%;
}
.el-two {
background-color: orange;
height: 500px;
width: 100%;
}
<div class="parent">
<div class="header">I am a header</div>
<div class="container">
<div class="el-one">
I am el-one
</div>
<div class="el-two">
I am el-two
</div>
</div>
</div>

How to position images in a slider using js

I am creating a slideshow with 3 images of width 700px and I want to set the image 'left' position of each image from jquery, so that the images slide in, showing the current image and hiding the other images.
Here is the code.
$(document).ready(function() {
//calculating the no. of photos using each funct. Each func will detect the total imgs.
$('.marquee_container .slide').each(function(index) {
//setting the photowidth according to the container width
var photoWidth = $('.marquee_container').width();
//calculating the photoposition
var photoPosition = index * photoWidth;
//setting the left position of the photos
$('.slide').css({
'left': photoPosition
});
//caculating the width of the div depending on the photos
$('.holder').css({
'width': photoWidth + photoPosition
});
});
//generating navigation links
//calculating the no. of marquee_photos divs using the each func
//appending html code inside the marquee_nav
//the marquee_nav links will appear according to the number of marquee_photos divs, using the each function
$('.slide').each(function(index) {
$('.marquee_nav').append('');
});
});
.marquee_container {
width: 700px;
height: 350px;
overflow: hidden;
margin: 0px 0px 30px 0px;
padding: 0px;
}
.holder {
overflow: hidden;
position: relative;
width: 700px;
height: 350px;
}
.slide {
position: absolute;
top: 0px;
left: 0px;
}
.marquee_photos {
overflow: hidden;
}
.marquee_photos img {
display: block;
}
.marquee_caption {
width: 700px;
margin: 0px;
padding: 15px 0px 10px 0px;
color: #fff;
position: absolute;
top: 350px;
left: 0px;
background: url(images/template/marquee_caption.png) 0px 0px;
}
.marquee_caption_content {
width: 410px;
padding: 0px 0px 0px 25px;
}
.marquee_nav {
position: absolute;
bottom: 5px;
right: 0;
}
.marquee_nav .marquee_nav_item {
color: #fff;
text-decoration: none;
background: url(images/template/nav_buttons.png) no-repeat;
text-indent: -9999px;
overflow: hidden;
display: block;
width: 17px;
height: 18px;
float: left;
margin: 0 4px;
}
.marquee_nav .marquee_nav_item:hover {
background: url(images/template/nav_buttons.png) no-repeat -25px 0;
}
.marquee_nav .marquee_nav_item:selected {
background: url(images/template/nav_buttons.png) no-repeat -50px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="marquee_container">
<div class="holder">
<div class="slide">
<img class="marquee_panel_photo" src="images/photos/london.jpg" alt="London" />
<div class="marquee_caption">
<div class="marquee_caption_content">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="slide">
<img class="marquee_panel_photo" src="images/photos/milan.jpg" alt="milan" />
<div class="marquee_caption">
<div class="marquee_caption_content">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="slide">
<img class="marquee_panel_photo" src="images/photos/staugustine.jpg" alt="staugustine" />
<div class="marquee_caption">
<div class="marquee_caption_content">
<p>Content goes here</p>
</div>
</div>
</div>
</div>
<div class="marquee_nav">
</div>
</div>
I am able to add the width dynamically but all the images left position are equal to the last image i.e. left:1400
From js you can see that I have calculated each photo position using index but I am still not able to get the result.

TLDR
You are misusing .each() loop.
To access a value inside of .each() loop you have to use value argument.
$('.marquee_container .slide').each(function (index, value) {
console.log($('.slide')); // All slides on the page.
console.log($(value)); // A value for current iteration
});
Detailed explanation
Sizzle selector engine, used in jQuery returns a collection of matched elements, when you specify a class, and your DOM contains multiple elements with this class.
By calling .each(callback) on a jQuery Collection, you basically tell JavaScript to call callback function for every element in collection. The callback function accepts two arguments: index, value
Where index — current index in array or object, value — a single value from your collection.
By applying $('.slide').css(), you change CSS properties of all elements from collection. To assign a specific position for each element, you need to interact with every separate element by accessing $(value).
Fixing
Please try this demo with your images:
$(document).ready(function() {
//calculating the no. of photos using each funct. Each func will detect the total imgs.
$('.marquee_container .slide').each(function(index, value) {
//setting the photowidth according to the container width
var photoWidth = $('.marquee_container').width();
//calculating the photoposition
var photoPosition = index * photoWidth;
//setting the left position of the photos
$(value).css({
'left': photoPosition
});
//caculating the width of the div depending on the photos
$('.holder').css({
'width': photoWidth + photoPosition
});
});
//generating navigation links
//calculating the no. of marquee_photos divs using the each func
//appending html code inside the marquee_nav
//the marquee_nav links will appear according to the number of marquee_photos divs, using the each function
$('.slide').each(function(index) {
$('.marquee_nav').append('');
});
});
.marquee_container {
width: 700px;
height: 350px;
overflow: hidden;
margin: 0px 0px 30px 0px;
padding: 0px;
}
.holder {
overflow: hidden;
position: relative;
width: 700px;
height: 350px;
}
.slide {
position: absolute;
top: 0px;
left: 0px;
}
.marquee_photos {
overflow: hidden;
}
.marquee_photos img {
display: block;
}
.marquee_caption {
width: 700px;
margin: 0px;
padding: 15px 0px 10px 0px;
color: #fff;
position: absolute;
top: 350px;
left: 0px;
background: url(images/template/marquee_caption.png) 0px 0px;
}
.marquee_caption_content {
width: 410px;
padding: 0px 0px 0px 25px;
}
.marquee_nav {
position: absolute;
bottom: 5px;
right: 0;
}
.marquee_nav .marquee_nav_item {
color: #fff;
text-decoration: none;
background: url(images/template/nav_buttons.png) no-repeat;
text-indent: -9999px;
overflow: hidden;
display: block;
width: 17px;
height: 18px;
float: left;
margin: 0 4px;
}
.marquee_nav .marquee_nav_item:hover {
background: url(images/template/nav_buttons.png) no-repeat -25px 0;
}
.marquee_nav .marquee_nav_item:selected {
background: url(images/template/nav_buttons.png) no-repeat -50px 0;
}
<div class="marquee_container">
<div class="holder">
<div class="slide">
<img class="marquee_panel_photo" src="images/photos/london.jpg" alt="London" />
<div class="marquee_caption">
<div class="marquee_caption_content">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="slide">
<img class="marquee_panel_photo" src="images/photos/milan.jpg" alt="milan" />
<div class="marquee_caption">
<div class="marquee_caption_content">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="slide">
<img class="marquee_panel_photo" src="images/photos/staugustine.jpg" alt="staugustine" />
<div class="marquee_caption">
<div class="marquee_caption_content">
<p>Content goes here</p>
</div>
</div>
</div>
</div>
<div class="marquee_nav">
</div>
</div>

How to get rid of flicker during scrolling for artificially fixed elements?

This is a very simple example of sticking an element at the top of another element's visible area. When .container is scrolled, .fixed stays at the top.
<div class="container">
<div class="fixed">fixed content</div>
<div class="content">regular content<br/>regular content<br/>regular content<br/>regular content<br/>regular content</div>
</div>
<style type="text/css">
.container {
position: relative;
border: 1px solid blue;
overflow: auto;
width: 250px;
height: 250px;
}
.content {
height: 500px;
width: 500px;
}
.fixed {
position: absolute;
width: 500px;
margin-top: 2rem;
border 1px solid red;
}
</style>
<script type="text/javascript">
$('.container').scroll(function () {
var top = $('.container').prop('scrollTop');
console.log(top);
$('.fixed').css('top', top);
});
</script>
The problem with this is that if the browser is not fast enough, the .fixed element flickers when I scroll. It lags behind the scroll (compare the position of the text in .fixed to the text in .content as you're scrolling). On my desktop it works flawlessly, but when I try running this in Chromium in a virtual machine, I can see the flicker.
Is there any other way to catch the scroll event and set the position of my .fixed element before the browser renders the page?
edit Updated example to include horizontal scrolling. The fixed element should only be fixed vertically.

Use a double container:
<div class="container-wrapper">
<div class="fixed">fixed content</div>
<div class="container">
<div class="content">regular content<br/>regular content<br/>regular content<br/>regular content<br/>regular content</div>
</div>
</div>
With the CSS:
.container-wrapper {
position: relative;
border: 1px solid blue;
overflow: hidden;
width: 250px;
height: 250px;
}
.container {
overflow: auto;
width: 100%;
height: 100%;
}
.content {
height: 500px;
}
.fixed {
position: absolute;
top: 0px;
left: 0px;
width: 245px;
border 1px solid red;
z-index: 10;
}
This way you won't need jQuery to reposition the .fixed div when you scroll, and it won't flicker.
EDIT To address the horizontal scrolling...
$('.container').on('scroll', function() {
var left = this.scrollLeft;
$('.fixed').css('left', -left + 'px');
});
This should move the .fixed div without flickering. In your solution, the flickering was caused because the browser moved your div while scrolling, and the event handler then moved it again. Now it will only move once.

change image in a div with any effect like fadein when mouse hovered on another div

The below shown is the format of my html code. In the header div i have a image. Each box(box1, box2, box3) inside the contain div has link inside like(software development(box1), Graphic Designing(box2), and Technical Training(box3). These links when clicked will take me to separate pages which has their own header images. So i have 3 header image for each box and a default header image in the home page.In the home page when ever I hover my mouse in the box1 div the header image should change to the box1 header image with an effect like fadeIn and return my default image on mouse out. Same for box2 and box3. Please help me with doing this with CSS or JS or jQuery. Thank You
<body>
<div class="wrapper">
<div class="out">
<div class="in">
<div id="header"></div>
<div class="contain">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</div>
</div>
</div>
</body>
css:
.wrapper{
width: 100%
height: auto;
margin: 0px;
}
.out{
margin: auto;
width: 1000px;
height: 730px;
border-top: 5px solid #333333;
}
.in{
width: 900px;
height: 640px;
margin: auto;
margin-top: 25px;
}
#header{
background:url(../img/Untitled-1.jpg);
height: 175px;
width: 900px;
margin: 0px;
}
.contain{
margin: 0px;
width: 900px;
height: 428px;
}
.box1{
height: 360px;
width: 295px;
float: left;
margin: 67px 0px 0px 0px;
position: absolute;
background-color: #e6e7e9;
border-bottom: 4px solid #735d8c;
}
.box2{
height: 360px;
width: 295px;
float: left;
margin: 67px 0px 0px 302px;
position: absolute;
background-color: #e6e7e9;
border-bottom: 4px solid #735d8c;
}
.box3{
height: 360px;
width: 295px;
float: left;
margin: 67px 0px 0px 602px;
position: absolute;
background-color: #e6e7e9;
border-bottom: 4px solid #735d8c;
}

I have a made an BIN
I am placing same image for all the 3 divs like
$('#content,#content2,#content3').mouseover(function(){
$('#header').css('background','url(http://www.google.com/mobile/android/images/android.jpg)')
});
You change with your respective images like
$('#content').mouseover(function(){
$('#header').css('background','url(http://www.google.com/mobile/android/images/android.jpg)')
});
$('#content2').mouseover(function(){
$('#header').css('background','url(http://www.google.com/mobile/android/images/android.jpg)')
});....

jsBin demo
jQuery:
var currPage = 0; // PLAY HERE: set here current page (0 = home)
var $header = $('#header');
var $headerImg = $header.find('img');
$headerImg.eq( currPage ).show().addClass('currentImg');
// clone images to boxes:
var c = 0;
$('.box').each(function( i ){
$(this).prepend( $headerImg.eq(i==currPage? (i+1+c++) : c+i).clone() );
});
$('.box img[class^=headImg]').on('mouseenter mouseleave', function( e ){
var opacity = e.type=='mouseenter' ? 1 : 0 ;
var myClass = $(this).prop('class'); // get class
var $mainImg = $header.find('img.'+myClass);
$headerImg.hide();
$mainImg.stop().fadeTo(300, opacity);
$('.currentImg').stop().fadeTo(600, !opacity);
});
HTML:
<div class="wrapper">
<div class="out">
<div class="in">
<div id="header">
<img class="headImg1" src="home.jpg" alt="" />
<img class="headImg2" src="ONE.jpg" alt="" />
<img class="headImg3" src="TWO.jpg" alt="" />
<img class="headImg4" src="THREE.jpg" alt="" />
</div>
<div class="contain">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</div>
</div>
</div>
MODIFIED CSS PART:
/*ADDED*/
#header img{
position:absolute;
display:none;
}
.contain{
margin: 0px;
width: 900px;
height: 428px;
}
.box{ /* CHANGED */
height: 360px;
width: 294px;
float: left;
margin: 67px 3px 0px;
position: relative;
background-color: #e6e7e9;
border-bottom: 4px solid #735d8c;
}
/* ADDED */
.box img{
width:100%;
}

See this : http://jsfiddle.net/xTjQT/2/
$('a').mouseover(function() {
var src = $(this).attr('alt');
alert(src);
$('#header img').stop().fadeOut(100, function() {
$(this).attr('src', src);
$(this).fadeIn(100);
});
});
$('a').mouseout(function() {
$('#header img').stop().fadeOut(200, function() {
$(this).attr('src', 'http://jsfiddle.net/img/logo.png');
$(this).fadeIn(100);
});
});