Anatomical parallax scrolling (Part 2)
zhao36584572 2021-07-22 00:37:14

Last episode In this article, we introduce the basic principle of parallax rolling , Let's make a simple retrospective summary : Parallax scrolling is some kind of zoning + Element stack + The effect formed by the scattered animation transition .(*._.*).
 

Next episode , What are you going to write this time , I'm so confused that I didn't study it very thoroughly , Knowing the principle is like that , But when you base the code, you still have to study it .“ Go off the subject , My base code habit is to write the track first , Finally, sports events will be added . The reason is simple , The base code principle from performance to behavior can make you more clear about the principle , In fact, all behaviors are in the operation node 、 class 、 Attributes and so on . It's only when you understand the principle that you can build what you need , Not blind base ”.

 

Okay , Back to the theme
In fact, this sharing is Last episode Development of , That is to say Last episode Another form of parallax scrolling at the end .
Let's break it down , Similarly, it is necessary to divide the regions ———— Zoning

1
2
3
4
5
<div class="article">
<div class="content content-1" id="first"> Area 1</div>
<div class="content content-2" id="second"> Area 2</div>
<div class="content content-3" id="third"> Area 3</div>
</div>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

 

Stack elements in each area ———— Element stack
example :

1
2
3
4
5
6
<div class="content content-1" id="first">
<h1></h1>
<img class="animg" src="images/p1.jpg" alt="" />
<p class="detailtitle"></p>
<p class="detail"></p>
</div>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

 

Finally, add some transition to these elements ———— Random animation transition
The trajectory has been separated , It's easy to see what your trajectory is like , You don't have to go to a big section JS, Just to find out how many pixels are moving , Waste time and waste power .
example :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.animg{position:absolute;left:-1000px;top:200px;
-webkit-transition-duration:1s; /* The duration of the object transition 1 second */
}
.detail{position:absolute;left:2000px;top:620px;width:100%;font-size:16px;
-webkit-transition-duration:2s; /* The duration of the object transition 2 second */
}
.detailtitle{position:absolute;left:0;top:-100px;padding:10px 20px;background:#333;color:#fff;font-size:24px;
-webkit-transition-duration:3s; /* The duration of the object transition 3 second */
}
.detailtitle-1{top:550px;left:-1000px;} /* Expand the animation class */
/* path of particle begin */
.content-focus .animg{left:0;top:200px;}
.content-focus .detail{left:0;top:620px;}
.content-focus .detailtitle{top:550px;}
.content-focus .detailtitle-1{left:0;}
/* path of particle end */
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.

 

So the behavioral code is similar to Last episode It's basically the same thing that's used in , A rolling event , A click event , It's easy , Just look at it , There's no base here
Okay , Take a look at this DEMO The effect of!
 
DEMO
 
This is what I call single zone parallax ,PS: They all call themselves .
Single zone , What I understand is a series of actions performed in a single area , It doesn't have much to do with other areas .

 

Come again , Add some embellishment , Reflect the feeling of being scattered , And then down the base

1
2
3
4
5
6
<div class="section section-1">
<span class="span-1"></span>
<span class="span-2"></span>
<span class="span-3"></span>
<span class="span-4"></span>
</div>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

notes : These modifiers are at the same level as the region parent

 

css Not much , as follows :

1
2
3
4
5
6
.section{position:fixed;left:50%;width:960px;margin-left:-480px;}
.section span{position:absolute;z-index:1;display:block;width:50px;height:50px;background:#999;opacity:.5;border-radius:25px;}
.section-1 .span-1{left:400px;top:100px;}
.section-1 .span-2{left:700px;top:200px;}
.section-1 .span-3{left:750px;top:400px;}
.section-1 .span-4{left:1100px;top:250px;}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

 

Add a little bit of function

1
2
3
4
5
6
function parallax(){
var toped = $(window).scrollTop();
$('.section-1').css({top:(0-(toped*1.75))+'px'});
$('.section-2').css({top:(0-(toped*0.35))+'px'});
$('.section-3').css({top:(0-(toped*1.35))+'px'});
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

 

I won't go into that , see DEMO
 
DEMO

 

Take a break , stay Last episode There is also a small tail ————QQ The parallax implementation of the browser's official website , Very handsome to say , How can this be done , Let's simulate a small module , I believe you will understand after decomposition , Let's start with the basic framework , As mentioned above , We have to draw the area first
example :

1
2
3
4
5
6
7
8
9
10
<div class="wrap">
<div class="box">
<div class="cont"> <!-- This is the region 1 -->
<div class="bj"></div>
<div class="title">web Front end roaming </div>
</div>
...... <!-- You can add it all the way down -->
......
</div>
</div>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.

Here's just one area as an example .
The focus of this effect is actually on the layout , In the layout, it must be clear how the next animation should be presented in order to achieve better convergence , So that the whole animation runs through . There's another interesting thing here : This page is scrolling down from the top , But what's changed in the code is not top Value , It is left Value , So this page actually scrolls left and right , Instead of rolling up and down , But why does it make people feel like this , I think that's the beauty of parallax rolling , It's well reflected on this page . So let's look down , You'll find the answer you want .
The doubts that make you feel this way :
1. There is no default scroll bar on this page , In this way, the sense of direction can be unrestrained , From any direction .

1
2
3
html{
overflow:hidden;
}
  • 1.
  • 2.
  • 3.

2. Page elements are very big, Full screen , And the corresponding elements have been obliquely cut and twisted skew.
PS: You can do it alone big The elements of , Well, a little deformation , Roll another roller , The trajectory is clear .

1
2
3
.cont{
-webkit-transform:skewX(-36.87deg) scaleY(4); // This scaleY(4) yes Y Axis 2D Zoom to the original size of 4 times
}
  • 1.
  • 2.
  • 3.

 

Graceful turn ==================================

 

In doubt 1 in , If you put the scroll bar hidden It fell off , No matter how long the page is , No matter how to roll, it's a meaningless struggle , So here we need to use the mouse's scroll plug-in mousewheel Need to download the latest plug-in version , Otherwise, it doesn't support higher version of jquery library ; Of course, you can write your own original JS, If you have time, you can toss .

 

So the main parts are ready , Now it's up to you to lay out , Like this big The element of "the right" will definitely involve the trouble of poor positioning , I'd like to introduce my method to you : Reduce the page as a whole to make a general layout , You can try , Very good .
Code post :
Not all of them are posted here , Post a JS( I hope you can communicate how to write more optimized when multi-element movement ), experiment demo At the end of the chapter ^_^

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var iSpeed = 1500;
var oCont = $('.cont');
var oTitle = $('.title');
function fnAnimate(iSpeed,oDiv){ // The first 1 The first parameter is the length of the scroll , The first 2 The first parameter is the element
var vAnimate = parseInt(oDiv.css('left')) + iSpeed;
oDiv.css({left:vAnimate});
}
$('html').mousewheel(function (event, delta){
if(delta > 0){ // On
fnAnimate(-iSpeed,oCont);
fnAnimate(iSpeed*0.85,oTitle);
}else if(delta < 0){ // Next
fnAnimate(iSpeed,oCont);
fnAnimate(-iSpeed*0.85,oTitle);
}
});
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.

My idea here is to get the coordinates of the elements , And then give it a new value .

 

In order to make the principle clearer , To give you a code to run the steps , It can be done by Developer Tools To sort out the principles :
1. Zoom the page to the minimum
2. Remove all distortions
Use a diagram to illustrate , Look good
flow

Okay , That's it , The rest is up to you

 

DEMO

 
 
 
 
 

Please bring the original link to reprint ,thank
Similar articles