How to make divs go up when scrolled until reaching a certain point
up vote
-1
down vote
favorite
I want to make three divs move up with different speeds when scrolled and then stop at one line on the screen.
How is that possible?
Jquery is preferable?
div {
height: 600px;
width: 300px;
margin-right: 50px;
background-color: red;
position: relative;
top: 600px
}
section {
display: flex
}
hr {
margin-top: 300px;
}<hr>stop here
<section>
<div>speed 2x</div>
<div>speed 1.5x</div>
<div>speed 4</div>
</section>jquery html css
edited Nov 8 at 8:14
Rohit Verma
1,4442724
asked Nov 8 at 4:48
valeria
167
add a comment |
up vote
-1
down vote
favorite
I want to make three divs move up with different speeds when scrolled and then stop at one line on the screen.
How is that possible?
Jquery is preferable?
div {
height: 600px;
width: 300px;
margin-right: 50px;
background-color: red;
position: relative;
top: 600px
}
section {
display: flex
}
hr {
margin-top: 300px;
}<hr>stop here
<section>
<div>speed 2x</div>
<div>speed 1.5x</div>
<div>speed 4</div>
</section>jquery html css
edited Nov 8 at 8:14
Rohit Verma
1,4442724
asked Nov 8 at 4:48
valeria
167
You can use AOS plugin to achieve this: michalsnik.github.io/aos
– AKNair
Nov 8 at 5:05
I have made a fiddle for you to check. You have to play around with delay, offset and duration properties in AOS to get desired result. : jsfiddle.net/xpvt214o/928646
– AKNair
Nov 8 at 5:17
add a comment |
up vote
-1
down vote
favorite
up vote
-1
down vote
favorite
I want to make three divs move up with different speeds when scrolled and then stop at one line on the screen.
How is that possible?
Jquery is preferable?
div {
height: 600px;
width: 300px;
margin-right: 50px;
background-color: red;
position: relative;
top: 600px
}
section {
display: flex
}
hr {
margin-top: 300px;
}<hr>stop here
<section>
<div>speed 2x</div>
<div>speed 1.5x</div>
<div>speed 4</div>
</section>jquery html css
edited Nov 8 at 8:14
Rohit Verma
1,4442724
asked Nov 8 at 4:48
valeria
167
I want to make three divs move up with different speeds when scrolled and then stop at one line on the screen.
How is that possible?
Jquery is preferable?
div {
height: 600px;
width: 300px;
margin-right: 50px;
background-color: red;
position: relative;
top: 600px
}
section {
display: flex
}
hr {
margin-top: 300px;
}<hr>stop here
<section>
<div>speed 2x</div>
<div>speed 1.5x</div>
<div>speed 4</div>
</section>div {
height: 600px;
width: 300px;
margin-right: 50px;
background-color: red;
position: relative;
top: 600px
}
section {
display: flex
}
hr {
margin-top: 300px;
}<hr>stop here
<section>
<div>speed 2x</div>
<div>speed 1.5x</div>
<div>speed 4</div>
</section>div {
height: 600px;
width: 300px;
margin-right: 50px;
background-color: red;
position: relative;
top: 600px
}
section {
display: flex
}
hr {
margin-top: 300px;
}<hr>stop here
<section>
<div>speed 2x</div>
<div>speed 1.5x</div>
<div>speed 4</div>
</section>jquery html css
jquery html css
edited Nov 8 at 8:14
Rohit Verma
1,4442724
asked Nov 8 at 4:48
valeria
167
edited Nov 8 at 8:14
Rohit Verma
1,4442724
asked Nov 8 at 4:48
valeria
167
edited Nov 8 at 8:14
Rohit Verma
1,4442724
edited Nov 8 at 8:14
Rohit Verma
1,4442724
edited Nov 8 at 8:14
Rohit Verma
1,4442724
1,4442724
asked Nov 8 at 4:48
valeria
167
asked Nov 8 at 4:48
valeria
167
asked Nov 8 at 4:48
valeria
167
167
You can use AOS plugin to achieve this: michalsnik.github.io/aos
– AKNair
Nov 8 at 5:05
I have made a fiddle for you to check. You have to play around with delay, offset and duration properties in AOS to get desired result. : jsfiddle.net/xpvt214o/928646
– AKNair
Nov 8 at 5:17
add a comment |
You can use AOS plugin to achieve this: michalsnik.github.io/aos
– AKNair
Nov 8 at 5:05
I have made a fiddle for you to check. You have to play around with delay, offset and duration properties in AOS to get desired result. : jsfiddle.net/xpvt214o/928646
– AKNair
Nov 8 at 5:17
You can use AOS plugin to achieve this: michalsnik.github.io/aos
– AKNair
Nov 8 at 5:05
You can use AOS plugin to achieve this: michalsnik.github.io/aos
– AKNair
Nov 8 at 5:05
I have made a fiddle for you to check. You have to play around with delay, offset and duration properties in AOS to get desired result. : jsfiddle.net/xpvt214o/928646
– AKNair
Nov 8 at 5:17
I have made a fiddle for you to check. You have to play around with delay, offset and duration properties in AOS to get desired result. : jsfiddle.net/xpvt214o/928646
– AKNair
Nov 8 at 5:17
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53201702%2fhow-to-make-divs-go-up-when-scrolled-until-reaching-a-certain-point%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You can use AOS plugin to achieve this: michalsnik.github.io/aos
– AKNair
Nov 8 at 5:05
I have made a fiddle for you to check. You have to play around with delay, offset and duration properties in AOS to get desired result. : jsfiddle.net/xpvt214o/928646
– AKNair
Nov 8 at 5:17