Home Web Development JavaScript JavaScript Scrolling Presentation HTML CSS | Image Change On Scroll

JavaScript Scrolling Presentation HTML CSS | Image Change On Scroll

July 31, 2019

5208

Want to create a scrolling presentation on the webpage using JavaScript, HTML, and CSS? Solution: JavaScript Scrolling Presentation HTML CSS. In other words, Image Change On Scroll with text Animation.

When we have to show different types of things on one webpage, then we create a presentation type design. Basically, this design is with only text and images, but the effect creates this like a presentation. Previously I have shared Animated Scroll Images program, first check that out.

Today you will learn to create an image scrolling presentation effect using Jquery. As you know jquery is JavaScript library, That’s why I am put this on JS category. Basically, this program has multiple sections, each section has own text and image. When we start scrolling then another text block comes with a different photo.

So, Today I am sharing JavaScript Scrolling Presentation with HTML and CSS. In this program, Image will change on scroll up or down according to their text. I have used the jQuery library to create it easily, we all know libraries are made for easy work. Jquery changing the image when another text block appears.

If you are thinking now how this scrolling presentation program actually is, then see the preview given below.

Preview Of Image Change On Scroll

See this video preview to getting an idea of how the program looks like.

Now you can see this visually. If you like this, then get the source code of its.

JavaScript Scrolling Presentation HTML CSS Source Code

Before sharing source code, let’s talk about it. As you can see in the preview there are 4 images and text block available. I have used HTML <section> tag for each section which has text and image. Inside the section, I have placed text in the div with text-block class name, & placed the image in a div with img-block class name.

I also have used many other kinds of divs, you can see in the code. With CSS I have placed text and images on their right position. This is also responsive, I put the image width 200px only, But its become bigger on larger screens. For creating the size effect, I have used the CSS @media query. I have put 2 conditions, the image will become 500px on devices which are wider than 700px. And it will become 700px when devices have more than 1000px width.

Now jQuery handles the image changing function. First, I have created variables for getting the sections, then used JavaScript if statement to put the image on their text-block. Now image change with little animation, for this I have used CSS @keyframe property (info). There are more basic things, I can’t explain all in writing.

For creating this program you have to create 3 files. First for HTML, second for CSS, and third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!-- Code By Webdevtrick ( https://webdevtrick.com) -->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>JavaScript Scrolling Presentation | Webdevtrick.com</title>
  <link href="https://fonts.googleapis.com/css?family=Abel&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>

<section id="section1">
  <div class="in-section">
    <div class="text-block">
      <div class="texts">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin interdum diam at lectus rhoncus, ac commodo ante finibus. Mauris volutpat tortor quis dolor iaculis elementum. Cras erat risus, feugiat vitae augue et, finibus vehicula dolor. 
          Integer id maximus lectus. Nullam laoreet nunc auctor tortor vestibulum, in pharetra leo suscipit. Nunc lorem mi, porttitor non neque id, sollicitudin sollicitudin nulla. Donec in felis est. Duis nec sapien vel dolor ultricies consequat ac quis eros.
           Nulla eleifend semper odio id sollicitudin. Duis id orci elementum diam fermentum feugiat et eget felis.
        </p>
      </div>
    </div>
    <div class="img-block">
      <div class="grid-image image-1 active"><img src="https://webdevtrick.com/wp-content/uploads/b47sample3.jpg"/></div>
    </div>
  </div>
</section>
<section id="section2">
  <div class="in-section">
    <div class="text-block">
      <div class="texts">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin interdum diam at lectus rhoncus, ac commodo ante finibus. Mauris volutpat tortor quis dolor iaculis elementum. Cras erat risus, feugiat vitae augue et, finibus vehicula dolor. 
            Integer id maximus lectus. Nullam laoreet nunc auctor tortor vestibulum, in pharetra leo suscipit. Nunc lorem mi, porttitor non neque id, sollicitudin sollicitudin nulla. Donec in felis est. Duis nec sapien vel dolor ultricies consequat ac quis eros.
             Nulla eleifend semper odio id sollicitudin. Duis id orci elementum diam fermentum feugiat et eget felis.
        </p>
      </div>
    </div>
    <div class="img-block">
      <div class="grid-image image-2 active"><img src="https://webdevtrick.com/wp-content/uploads/image-slider4.jpg"/></div>
    </div>
  </div>
</section>
<section id="section3">
  <div class="in-section">
    <div class="text-block">
      <div class="texts">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin interdum diam at lectus rhoncus, ac commodo ante finibus. Mauris volutpat tortor quis dolor iaculis elementum. Cras erat risus, feugiat vitae augue et, finibus vehicula dolor. 
            Integer id maximus lectus. Nullam laoreet nunc auctor tortor vestibulum, in pharetra leo suscipit. Nunc lorem mi, porttitor non neque id, sollicitudin sollicitudin nulla. Donec in felis est. Duis nec sapien vel dolor ultricies consequat ac quis eros.
             Nulla eleifend semper odio id sollicitudin. Duis id orci elementum diam fermentum feugiat et eget felis.
        </p>
      </div>
    </div>
    <div class="img-block">
      <div class="grid-image image-3 active"><img src="https://webdevtrick.com/wp-content/uploads/image-slider3.jpg"/></div>
    </div>
  </div>
</section>
<section id="section4">
  <div class="in-section">
    <div class="text-block">
      <div class="texts">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin interdum diam at lectus rhoncus, ac commodo ante finibus. Mauris volutpat tortor quis dolor iaculis elementum. Cras erat risus, feugiat vitae augue et, finibus vehicula dolor. 
            Integer id maximus lectus. Nullam laoreet nunc auctor tortor vestibulum, in pharetra leo suscipit. Nunc lorem mi, porttitor non neque id, sollicitudin sollicitudin nulla. Donec in felis est. Duis nec sapien vel dolor ultricies consequat ac quis eros.
             Nulla eleifend semper odio id sollicitudin. Duis id orci elementum diam fermentum feugiat et eget felis.
        </p>
      </div>
    </div>
    <div class="img-block">
      <div class="grid-image image-4 active"><img src="https://webdevtrick.com/wp-content/uploads/image-slider1.jpg"/></div>
    </div>
  </div>
</section>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript Scrolling Presentation | Webdevtrick.com</title>

</head>

<body>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin interdum diam at lectus rhoncus, ac commodo ante finibus. Mauris volutpat tortor quis dolor iaculis elementum. Cras erat risus, feugiat vitae augue et, finibus vehicula dolor.

Integer id maximus lectus. Nullam laoreet nunc auctor tortor vestibulum, in pharetra leo suscipit. Nunc lorem mi, porttitor non neque id, sollicitudin sollicitudin nulla. Donec in felis est. Duis nec sapien vel dolor ultricies consequat ac quis eros.

Nulla eleifend semper odio id sollicitudin. Duis id orci elementum diam fermentum feugiat et eget felis.

</p>

</div>

</div>

</section>

Nulla eleifend semper odio id sollicitudin. Duis id orci elementum diam fermentum feugiat et eget felis.

</p>

</div>

</div>

</section>

Nulla eleifend semper odio id sollicitudin. Duis id orci elementum diam fermentum feugiat et eget felis.

</p>

</div>

</div>

</section>

Nulla eleifend semper odio id sollicitudin. Duis id orci elementum diam fermentum feugiat et eget felis.

</p>

</div>

</div>

</section>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com) */
body {
  font-family: 'Abel', sans-serif;
  line-height: 1.5;
  color: #212121;
  font-size: 1.3rem;

}
img {
  width: 200px;
  display: block;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.3);
}
@media (min-width: 700px) {
  img {
    width: 500px; 
  }
}
@media (min-width: 1000px) {
  img {
    width: 700px;
  }
}
.in-section {
  display: grid;
  grid-template-columns: 1fr 2fr;
  height: 100vh;
}

.text-block,
.img-block {
  display: flex;
  justify-content: center;
  align-items: center;
}
.texts {
  padding: 1rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.grid-image {
  position: fixed;
  z-index: 100;
}
.image-1,
.image-2,
.image-3 {
  opacity: 0;
}
.image-1.active,
.image-2.active,
.image-3.active {
  -webkit-animation: myAni 1000ms ease forwards;
          animation: myAni 1000ms ease forwards;
  opacity: 1;
}
@keyframes myAni {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes myAni {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Code By Webdevtrick ( https://webdevtrick.com) */

body {

font-family: 'Abel', sans-serif;

line-height: 1.5;

color: #212121;

font-size: 1.3rem;

}

img {

width: 200px;

display: block;

box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.3);

}

@media (min-width: 700px) {

img {

width: 500px;

}

@media (min-width: 1000px) {

img {

width: 700px;

}

.in-section {

display: grid;

grid-template-columns: 1fr 2fr;

height: 100vh;

}

.text-block,

.img-block {

display: flex;

justify-content: center;

align-items: center;

}

.texts {

padding: 1rem;

position: relative;

display: flex;

justify-content: center;

align-items: center;

height: 100%;

}

.grid-image {

position: fixed;

z-index: 100;

}

.image-1,

.image-2,

.image-3 {

opacity: 0;

}

.image-1.active,

.image-2.active,

.image-3.active {

-webkit-animation: myAni 1000ms ease forwards;

animation: myAni 1000ms ease forwards;

opacity: 1;

}

@keyframes myAni {

0% {

opacity: 0;

}

100% {

opacity: 1;

}

@-webkit-keyframes myAni {

0% {

opacity: 0;

}

100% {

opacity: 1;

}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

//  Code By Webdevtrick ( https://webdevtrick.com) 
var section1 = $('#section1').offset().top;
var section2 = $('#section2').offset().top;
var section3 = $('#section3').offset().top;
var section4 = $('#section4').offset().top;

var scrollOffset = 300;

$(window).scroll(function() {  
  
  var scroll = $(window).scrollTop() + scrollOffset;  
  

  if ( scroll < 500 ) {
    $('.grid-image img').attr('src', 'https://webdevtrick.com/wp-content/uploads/b47sample3.jpg');
  }
  
  if ( scroll > section2 ) {
    $('.grid-image img').attr('src', 'https://webdevtrick.com/wp-content/uploads/image-slider4.jpg');
  }

  if ( scroll > section3 ) {
    $('.grid-image img').attr('src', 'https://webdevtrick.com/wp-content/uploads/image-slider3.jpg');
  }

  if ( scroll > section4 ) {
    $('.grid-image img').attr('src', 'https://webdevtrick.com/wp-content/uploads/image-slider1.jpg');
  }
});

// Code By Webdevtrick ( https://webdevtrick.com)

var section1 = $('#section1').offset().top;

var section2 = $('#section2').offset().top;

var section3 = $('#section3').offset().top;

var section4 = $('#section4').offset().top;

var scrollOffset = 300;

$(window).scroll(function() {

var scroll = $(window).scrollTop() + scrollOffset;

if ( scroll < 500 ) {

$('.grid-image img').attr('src', 'https://webdevtrick.com/wp-content/uploads/b47sample3.jpg');

}

if ( scroll > section2 ) {

$('.grid-image img').attr('src', 'https://webdevtrick.com/wp-content/uploads/image-slider4.jpg');

}

if ( scroll > section3 ) {

$('.grid-image img').attr('src', 'https://webdevtrick.com/wp-content/uploads/image-slider3.jpg');

}

if ( scroll > section4 ) {

$('.grid-image img').attr('src', 'https://webdevtrick.com/wp-content/uploads/image-slider1.jpg');

}

});

That’s It. Now you have successfully created JavaScript Scrolling Presentation HTML CSS, Image Change On Scroll. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

6 COMMENTS

Armel July 31, 2019 At 6:54 pm

thanks very much Shaan

Reply
- shaan August 1, 2019 At 4:30 pm
  
  pleasure, stay connected.
  
  Reply
govardhan August 1, 2019 At 4:25 pm

hi shaan, thanks for creating this. i just tried it now. iam new to vs code. i just all pages, i mean index.html , style.css and function.js. …so now if iam opening it iam getting just index page, iam getting just information , those are not scrolling. how can i combine all pages, can u please explain it.

Reply
- shaan August 1, 2019 At 4:27 pm
  
  I have already combined in HTML file just paste the codes and create 3 files.
  
  Reply
jay May 11, 2020 At 6:31 pm

Would it be complicated to add a fade to the image changes?

Reply
Claire August 4, 2021 At 12:12 pm

Thank you for sharing these codes! I am very new to coding (literally 2 days old) and am trying to code a basic website. I was wondering how to add a header for the title of the webpage without moving the elements. I successfully added a header but the whole thing moved. The image is basically sitting on the bottom of the page now instead of floating. I hope I’m making sense.

Reply