Want to take action when scrolling through pages in jQuery/JavaScript

At the time of scrolling the page, the object is moved and transmitted according to the scrolling distance.I would also like to know a concise example of the parallax effect.

javascript css html5 jquery

2022-09-29 20:28

3 Answers

I think there are many expressions about the parallax effect, but
I have written a sample of things that may slide or fade depending on the amount of scrolling.

I don't care about the details, so it's just a hint.
I only checked with Chrome.
(I saw it on safari, but it's hard to see it because of the bounce.)

$(window).load(function(){
  var height=$(window).height();
  $(".scr").each(function(i,ele){
    // Determine the height of the page.
    var$ele=$(ele);
    varpage=$ele.attr("data-page-slidein");
    $ele.css("top", height*page);
    $ele.height(height);
  });

  $(window).scroll(function(){
    varscrTop=$(this).scrollTop();
    $(window).scrollLeft(0);

    $(".scr").each(function(i,ele){
      var$ele=$(ele);

      varopaPage=$ele.attr("data-page-appear");
      varpage=$ele.attr("data-page-slidein");

      if(page*height<scrTop){
        // in-screen processing
        $ele.css("top",scrTop);
      }

      if(opaPage!=""){
        // Transparency treatment.You can see your appearance on the screen.
        // We are looking for a percentage of what is displayed.
        value=(opaPage*height-scrTop)/height;
        $ele.css("opacity", 1-value);
      }
    });
  });
});

body{
  margin:0;
  padding:0;
}

.scr{
  height —100%;
  position:absolute;
  width: 100%;
  top —100%;
}

.page1{
  background-color:#00b3ee;
}

.page2{
  background-color:#d58512;
}

.first-page,
.last-page{
  background-color:white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!--data-page-slidein How many pages should I scroll to see the div slide -->
<!-- When data-page-appear div FadeIn completes: How many pages do I scroll to get opaque?If it's blank, I won't fade -->
<div class="scr first-page" data-page-slidein="0" data-page-appear="">
  Index Page
</div>

<div class="scr page1" data-page-slidein="1" data-page-appear="">
  Page 1
</div>

<div class="scr" data-page-slidein="1" data-page-appear="2">
  <div style="position:relative;left:100px;top:40px;color:white;font-size:16pt;">Display late</div>
</div>

<div class="scr page2" data-page-slidein="3" data-page-appear="">
  Page 2
</div>

<div class="scr" data-page-slidein="3" data-page-appear="4">
  <div style="position:relative;left:190px;top:140px;color:blueviolet;font-size:16pt;">appear</div>
</div>

<div class="scr" data-page-slidein="3" data-page-appear="5">
  <div style="position:relative;left:300px;top:40px;color:indianred;font-size:16pt;">text</div>
</div>

<div class="scr last-page" data-page-slidein="7" data-page-appear="7">
  Last Page
</div>

I tried to imitate a movement similar to this page.

Here's the source.

Load jQuery and css and js to be described later in HEAD.

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="js/sample.js"></script>
    <link rel="stylesheet" href="css/style.css"/>

The main body HTML is as follows.
Specify the scr css-class.
As I mentioned in the comment, specify when data-page-slidein slides and data-page-appear fade-in to the screen using How many pages do I scroll to?

<body>
    <!--data-page-slidein How many pages should I scroll to see the div slide -->
    <!-- When data-page-appear div FadeIn completes: How many pages do I scroll to get opaque?If it's blank, I won't fade -->
    <div class="scr first-page" data-page-slidein="0" data-page-appear="">
        Index Page
    </div>

    <div class="scr page1" data-page-slidein="1" data-page-appear="">
        Page 1
    </div>

    <div class="scr" data-page-slidein="1" data-page-appear="2">
        <div style="position:relative;left:100px;top:40px;color:white;font-size:16pt;">Display late</div>
    </div>

    <div class="scr page2" data-page-slidein="3" data-page-appear="">
        Page 2
    </div>

    <div class="scr" data-page-slidein="3" data-page-appear="4">
        <div style="position:relative;left:190px;top:140px;color:blueviolet;font-size:16pt;">appear</div>
    </div>

    <div class="scr" data-page-slidein="3" data-page-appear="5">
        <div style="position:relative;left:300px;top:40px;color:indianred;font-size:16pt;">text</div>
    </div>

    <div class="scr last-page" data-page-slidein="7" data-page-appear="7">
        Last Page
    </div>
</body>

The css file.ss file.Mainly specifying the scr class.For the div that slides, you should specify the background color.

body{
    margin:0;
    padding:0;
}
.scr{
    height —100%;
    position:absolute;
    width: 100%;
    top —100%;
}

.page1{
    background-color:#00b3ee;
}

.page2{
    background-color:#d58512;
}

.first-page, .last-page{
    background-color:white;
}

This is the main javascript.

As for the slide display, the height of the page x the number of pages is set as top and it appears normally, but when div reaches the top of the screen, I try to keep that position even if I scroll below it.

If you set the data-page-appear to a number, you start fading in one page before that number page, and the processing becomes completely opaque when the scroll reaches that page.This means that the interval to fade is one page.

$(window).load(function(){    
    var height=$(window).height();
    $(".scr").each(function(i,ele){
        // Determine the height of the page.
        var$ele=$(ele);
        varpage=$ele.attr("data-page-slidein");
        $ele.css("top", height*page);
        $ele.height(height);
    });

    $(window).scroll(function(){
        varscrTop=$(this).scrollTop();
        $(window).scrollLeft(0);

        $(".scr").each(function(i,ele){
            var$ele=$(ele);

            varopaPage=$ele.attr("data-page-appear");
            varpage=$ele.attr("data-page-slidein");

            if(page*height<scrTop){
                // in-screen processing
                $ele.css("top",scrTop);
            }

            if(opaPage!=""){
                // Transparency treatment.You can see your appearance on the screen.
                // We are looking for a percentage of what is displayed.
                value=(opaPage*height-scrTop)/height;
                $ele.css("opacity", 1-value);
            }
        });
    });
});



		
		
			

				

					
				

				
					2022-09-29 20:28



	
		
For example, assume HTML as follows:
<body>
    <divid="container">something</div>
</body>
For example, a script that gradually disappears as you scroll from the top of the page.
var$window=$(window); // Save $(window) to a variable so that $(window) can be called in $window.
$window.scroll(function(){
    $scrollValue=$window.scrollTop();// Calculated where the current value is from the top edge of the page (more precisely the top edge of the window).Stored in $scrollValue.
    $('#container').css('opacity',1-$scrollValue/$window.height());// Divide the current position by the height of the window and subtract it from 1, resulting in zero opacity at the height of the current window size.
}
If the $window.height() part of the example is set to an arbitrary number, it is made transparent at an arbitrary place.It can also be processed dynamically by any function.Additional subtraction can also be used to change from any location to any location.


		
		
			

				

					
				

				
					2022-09-29 20:28
				
			
		
	


	
		
Conversely, if you want to go from transparent to visible, use CSS to 
#container {opacity:0;}
is configured and transparent.Then, 
var$window=$(window);
$window.scroll(function(){
    $scrollValue=$window.scrollTop();
    $('#container').css('opacity', $scrollValue/$window.height());
}
Then it will appear gradually as you scroll from the top of the page.


		
		
			

				

					
				

				
					2022-09-29 20:28
				
			
		
	
			
			If you have any answers or tips



		

	
		Popular Tags
	
	python x 4647
android x 1593
java x 1494
javascript x 1427
c x 927
c++ x 878
ruby-on-rails x 696
php x 692
python3 x 685
html x 656
	


	
		Popular Questions
	
	
	541 Understanding How to Configure Google API Key

	546 Who developed the "avformat-59.dll" that comes with FFmpeg?

	972 In Java servlet, when SHA-256 sends WW-Authenticate header for digest authentication, the client does not return the result.

	542 PHP ssh2_scp_send fails to send files as intended

	518 The method of the class of the application that I am creating in Typescript does not work as I expected.