Fade up content with JavaScript or CSS (scroll effect)
2
I want to recreate a special kind of scroll I've noticed on a website.
- Go to https://basicagency.com/yir/;
- Wait for the
EXPLOREbutton to appear and click it; - Scroll down in the new view.
How can I the content use the same scroll effect? It seems that instead of you being going down, the site comes up.
I've been able to create a page that looks just the same, but I have no idea how to do that.
/* i don't have idea */*{
padding: 0;
margin: 0;
max-width: 100vw;
overflow-x: hidden;
}
main{
display: grid;
grid-template-columns: 10vw 90vw;
grid-template-rows: 100vh;
}
nav{
background: rgba(255,0,0,0.5);
z-index: 1;
width: 10vw;
height: 100vh;
left: 0;
top: 0;
position: fixed;
}
#c1{
background: blue /*url(../img/back.jpeg) center no-repeat*/;
background-size: cover;
grid-column: 1 / -1;
grid-row: 1 / -1;
z-index: 0;
}
#c2{
background: black;
grid-column: 1 / -1;
grid-row: 1 / -1;
z-index: 0;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<nav>
</nav>
<main>
<content id="c1">
</content>
</main>
<main>
<content id="c2">
</content>
</main>
</body>
</html>javascript html css
asked Jan 1 at 6:57
Henrique RamosHenrique Ramos
218
add a comment |
2
I want to recreate a special kind of scroll I've noticed on a website.
- Go to https://basicagency.com/yir/;
- Wait for the
EXPLOREbutton to appear and click it; - Scroll down in the new view.
How can I the content use the same scroll effect? It seems that instead of you being going down, the site comes up.
I've been able to create a page that looks just the same, but I have no idea how to do that.
/* i don't have idea */*{
padding: 0;
margin: 0;
max-width: 100vw;
overflow-x: hidden;
}
main{
display: grid;
grid-template-columns: 10vw 90vw;
grid-template-rows: 100vh;
}
nav{
background: rgba(255,0,0,0.5);
z-index: 1;
width: 10vw;
height: 100vh;
left: 0;
top: 0;
position: fixed;
}
#c1{
background: blue /*url(../img/back.jpeg) center no-repeat*/;
background-size: cover;
grid-column: 1 / -1;
grid-row: 1 / -1;
z-index: 0;
}
#c2{
background: black;
grid-column: 1 / -1;
grid-row: 1 / -1;
z-index: 0;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<nav>
</nav>
<main>
<content id="c1">
</content>
</main>
<main>
<content id="c2">
</content>
</main>
</body>
</html>javascript html css
asked Jan 1 at 6:57
Henrique RamosHenrique Ramos
218
Hey there & welcome to StackOverflow Henrique! Your question is incomplete and has little chances to get answered as is. Please read the How-To-Ask article & edit your question adding more information.
– iamdanchiv
Jan 1 at 7:04
Basically provide something you worked on. This is not a charity debugging portal! (if you need help with this, read up on how to create a Minimal, Complete and Verifiable Example)
– iamdanchiv
Jan 1 at 7:05
The site listens for the scroll or wheel event which triggers an animation to show a new block of content. You can write this yourself with javascript or look into libraries such as alvarotrigo.com/fullPage/#page1. You can also explore a fairly new CSS property to allow scroll snapping, this might help: css-tricks.com/practical-css-scroll-snapping
– sol
Jan 1 at 7:36
add a comment |
2
2
2
I want to recreate a special kind of scroll I've noticed on a website.
- Go to https://basicagency.com/yir/;
- Wait for the
EXPLOREbutton to appear and click it; - Scroll down in the new view.
How can I the content use the same scroll effect? It seems that instead of you being going down, the site comes up.
I've been able to create a page that looks just the same, but I have no idea how to do that.
/* i don't have idea */*{
padding: 0;
margin: 0;
max-width: 100vw;
overflow-x: hidden;
}
main{
display: grid;
grid-template-columns: 10vw 90vw;
grid-template-rows: 100vh;
}
nav{
background: rgba(255,0,0,0.5);
z-index: 1;
width: 10vw;
height: 100vh;
left: 0;
top: 0;
position: fixed;
}
#c1{
background: blue /*url(../img/back.jpeg) center no-repeat*/;
background-size: cover;
grid-column: 1 / -1;
grid-row: 1 / -1;
z-index: 0;
}
#c2{
background: black;
grid-column: 1 / -1;
grid-row: 1 / -1;
z-index: 0;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<nav>
</nav>
<main>
<content id="c1">
</content>
</main>
<main>
<content id="c2">
</content>
</main>
</body>
</html>javascript html css
asked Jan 1 at 6:57
Henrique RamosHenrique Ramos
218
I want to recreate a special kind of scroll I've noticed on a website.
- Go to https://basicagency.com/yir/;
- Wait for the
EXPLOREbutton to appear and click it; - Scroll down in the new view.
How can I the content use the same scroll effect? It seems that instead of you being going down, the site comes up.
I've been able to create a page that looks just the same, but I have no idea how to do that.
/* i don't have idea */*{
padding: 0;
margin: 0;
max-width: 100vw;
overflow-x: hidden;
}
main{
display: grid;
grid-template-columns: 10vw 90vw;
grid-template-rows: 100vh;
}
nav{
background: rgba(255,0,0,0.5);
z-index: 1;
width: 10vw;
height: 100vh;
left: 0;
top: 0;
position: fixed;
}
#c1{
background: blue /*url(../img/back.jpeg) center no-repeat*/;
background-size: cover;
grid-column: 1 / -1;
grid-row: 1 / -1;
z-index: 0;
}
#c2{
background: black;
grid-column: 1 / -1;
grid-row: 1 / -1;
z-index: 0;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<nav>
</nav>
<main>
<content id="c1">
</content>
</main>
<main>
<content id="c2">
</content>
</main>
</body>
</html>/* i don't have idea */*{
padding: 0;
margin: 0;
max-width: 100vw;
overflow-x: hidden;
}
main{
display: grid;
grid-template-columns: 10vw 90vw;
grid-template-rows: 100vh;
}
nav{
background: rgba(255,0,0,0.5);
z-index: 1;
width: 10vw;
height: 100vh;
left: 0;
top: 0;
position: fixed;
}
#c1{
background: blue /*url(../img/back.jpeg) center no-repeat*/;
background-size: cover;
grid-column: 1 / -1;
grid-row: 1 / -1;
z-index: 0;
}
#c2{
background: black;
grid-column: 1 / -1;
grid-row: 1 / -1;
z-index: 0;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<nav>
</nav>
<main>
<content id="c1">
</content>
</main>
<main>
<content id="c2">
</content>
</main>
</body>
</html>/* i don't have idea */*{
padding: 0;
margin: 0;
max-width: 100vw;
overflow-x: hidden;
}
main{
display: grid;
grid-template-columns: 10vw 90vw;
grid-template-rows: 100vh;
}
nav{
background: rgba(255,0,0,0.5);
z-index: 1;
width: 10vw;
height: 100vh;
left: 0;
top: 0;
position: fixed;
}
#c1{
background: blue /*url(../img/back.jpeg) center no-repeat*/;
background-size: cover;
grid-column: 1 / -1;
grid-row: 1 / -1;
z-index: 0;
}
#c2{
background: black;
grid-column: 1 / -1;
grid-row: 1 / -1;
z-index: 0;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<nav>
</nav>
<main>
<content id="c1">
</content>
</main>
<main>
<content id="c2">
</content>
</main>
</body>
</html>javascript html css
javascript html css
asked Jan 1 at 6:57
Henrique RamosHenrique Ramos
218
asked Jan 1 at 6:57
Henrique RamosHenrique Ramos
218
edited Jan 1 at 7:26
Henrique Ramos
asked Jan 1 at 6:57
Henrique RamosHenrique Ramos
218
asked Jan 1 at 6:57
Henrique RamosHenrique Ramos
218
asked Jan 1 at 6:57
Henrique RamosHenrique Ramos
218
218
Hey there & welcome to StackOverflow Henrique! Your question is incomplete and has little chances to get answered as is. Please read the How-To-Ask article & edit your question adding more information.
– iamdanchiv
Jan 1 at 7:04
Basically provide something you worked on. This is not a charity debugging portal! (if you need help with this, read up on how to create a Minimal, Complete and Verifiable Example)
– iamdanchiv
Jan 1 at 7:05
The site listens for the scroll or wheel event which triggers an animation to show a new block of content. You can write this yourself with javascript or look into libraries such as alvarotrigo.com/fullPage/#page1. You can also explore a fairly new CSS property to allow scroll snapping, this might help: css-tricks.com/practical-css-scroll-snapping
– sol
Jan 1 at 7:36
add a comment |
Hey there & welcome to StackOverflow Henrique! Your question is incomplete and has little chances to get answered as is. Please read the How-To-Ask article & edit your question adding more information.
– iamdanchiv
Jan 1 at 7:04
Basically provide something you worked on. This is not a charity debugging portal! (if you need help with this, read up on how to create a Minimal, Complete and Verifiable Example)
– iamdanchiv
Jan 1 at 7:05
The site listens for the scroll or wheel event which triggers an animation to show a new block of content. You can write this yourself with javascript or look into libraries such as alvarotrigo.com/fullPage/#page1. You can also explore a fairly new CSS property to allow scroll snapping, this might help: css-tricks.com/practical-css-scroll-snapping
– sol
Jan 1 at 7:36
Hey there & welcome to StackOverflow Henrique! Your question is incomplete and has little chances to get answered as is. Please read the How-To-Ask article & edit your question adding more information.
– iamdanchiv
Jan 1 at 7:04
Hey there & welcome to StackOverflow Henrique! Your question is incomplete and has little chances to get answered as is. Please read the How-To-Ask article & edit your question adding more information.
– iamdanchiv
Jan 1 at 7:04
Basically provide something you worked on. This is not a charity debugging portal! (if you need help with this, read up on how to create a Minimal, Complete and Verifiable Example)
– iamdanchiv
Jan 1 at 7:05
Basically provide something you worked on. This is not a charity debugging portal! (if you need help with this, read up on how to create a Minimal, Complete and Verifiable Example)
– iamdanchiv
Jan 1 at 7:05
The site listens for the scroll or wheel event which triggers an animation to show a new block of content. You can write this yourself with javascript or look into libraries such as alvarotrigo.com/fullPage/#page1. You can also explore a fairly new CSS property to allow scroll snapping, this might help: css-tricks.com/practical-css-scroll-snapping
– sol
Jan 1 at 7:36
The site listens for the scroll or wheel event which triggers an animation to show a new block of content. You can write this yourself with javascript or look into libraries such as alvarotrigo.com/fullPage/#page1. You can also explore a fairly new CSS property to allow scroll snapping, this might help: css-tricks.com/practical-css-scroll-snapping
– sol
Jan 1 at 7:36
add a comment |
1 Answer
1
active
oldest
votes
0
Wow, what a crap website, that slowed down my laptop to a halt.
Either way, here is how you do this smoothly:
https://codepen.io/damPop/pen/OaLawm
Documentation at https://github.com/peachananr/onepage-scroll
Add this to your file
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
That should do.
answered Jan 1 at 9:23
pttsptts
566312
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
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%2f53993597%2ffade-up-content-with-javascript-or-css-scroll-effect%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Wow, what a crap website, that slowed down my laptop to a halt.
Either way, here is how you do this smoothly:
https://codepen.io/damPop/pen/OaLawm
Documentation at https://github.com/peachananr/onepage-scroll
Add this to your file
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
That should do.
answered Jan 1 at 9:23
pttsptts
566312
add a comment |
0
Wow, what a crap website, that slowed down my laptop to a halt.
Either way, here is how you do this smoothly:
https://codepen.io/damPop/pen/OaLawm
Documentation at https://github.com/peachananr/onepage-scroll
Add this to your file
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
That should do.
answered Jan 1 at 9:23
pttsptts
566312
add a comment |
0
0
0
Wow, what a crap website, that slowed down my laptop to a halt.
Either way, here is how you do this smoothly:
https://codepen.io/damPop/pen/OaLawm
Documentation at https://github.com/peachananr/onepage-scroll
Add this to your file
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
That should do.
answered Jan 1 at 9:23
pttsptts
566312
Wow, what a crap website, that slowed down my laptop to a halt.
Either way, here is how you do this smoothly:
https://codepen.io/damPop/pen/OaLawm
Documentation at https://github.com/peachananr/onepage-scroll
Add this to your file
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
That should do.
answered Jan 1 at 9:23
pttsptts
566312
answered Jan 1 at 9:23
pttsptts
566312
answered Jan 1 at 9:23
pttsptts
566312
answered Jan 1 at 9:23
pttsptts
566312
566312
add a comment |
add a comment |
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.
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%2f53993597%2ffade-up-content-with-javascript-or-css-scroll-effect%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
Hey there & welcome to StackOverflow Henrique! Your question is incomplete and has little chances to get answered as is. Please read the How-To-Ask article & edit your question adding more information.
– iamdanchiv
Jan 1 at 7:04
Basically provide something you worked on. This is not a charity debugging portal! (if you need help with this, read up on how to create a Minimal, Complete and Verifiable Example)
– iamdanchiv
Jan 1 at 7:05
The site listens for the scroll or wheel event which triggers an animation to show a new block of content. You can write this yourself with javascript or look into libraries such as alvarotrigo.com/fullPage/#page1. You can also explore a fairly new CSS property to allow scroll snapping, this might help: css-tricks.com/practical-css-scroll-snapping
– sol
Jan 1 at 7:36