Soft-Scroll jacking in React
I need help implementing an interaction like the one on https://www.apple.com/mac-mini/, where there is one constant navigation slider, and as the user scrolls down the text around it shifts. This is my current progress - http://mukit.io/scroll-test.
This is just a demo, the actual site is in React and I'm having trouble with JQuery/React as well as making the experience as seamless as they did here. Currently, I'm playing with changing the z-axis, but the results aren't great.
jquery css reactjs frontend
asked Jan 3 at 15:38
user1090633user1090633
32
add a comment |
I need help implementing an interaction like the one on https://www.apple.com/mac-mini/, where there is one constant navigation slider, and as the user scrolls down the text around it shifts. This is my current progress - http://mukit.io/scroll-test.
This is just a demo, the actual site is in React and I'm having trouble with JQuery/React as well as making the experience as seamless as they did here. Currently, I'm playing with changing the z-axis, but the results aren't great.
jquery css reactjs frontend
asked Jan 3 at 15:38
user1090633user1090633
32
What is the issue you're having?
– Alex W
Jan 3 at 15:40
@AlexW I don't know what the best strategy is to implement such behavior.
– user1090633
Jan 3 at 15:45
add a comment |
I need help implementing an interaction like the one on https://www.apple.com/mac-mini/, where there is one constant navigation slider, and as the user scrolls down the text around it shifts. This is my current progress - http://mukit.io/scroll-test.
This is just a demo, the actual site is in React and I'm having trouble with JQuery/React as well as making the experience as seamless as they did here. Currently, I'm playing with changing the z-axis, but the results aren't great.
jquery css reactjs frontend
asked Jan 3 at 15:38
user1090633user1090633
32
I need help implementing an interaction like the one on https://www.apple.com/mac-mini/, where there is one constant navigation slider, and as the user scrolls down the text around it shifts. This is my current progress - http://mukit.io/scroll-test.
This is just a demo, the actual site is in React and I'm having trouble with JQuery/React as well as making the experience as seamless as they did here. Currently, I'm playing with changing the z-axis, but the results aren't great.
jquery css reactjs frontend
jquery css reactjs frontend
asked Jan 3 at 15:38
user1090633user1090633
32
asked Jan 3 at 15:38
user1090633user1090633
32
asked Jan 3 at 15:38
user1090633user1090633
32
asked Jan 3 at 15:38
user1090633user1090633
32
asked Jan 3 at 15:38
user1090633user1090633
32
32
What is the issue you're having?
– Alex W
Jan 3 at 15:40
@AlexW I don't know what the best strategy is to implement such behavior.
– user1090633
Jan 3 at 15:45
add a comment |
What is the issue you're having?
– Alex W
Jan 3 at 15:40
@AlexW I don't know what the best strategy is to implement such behavior.
– user1090633
Jan 3 at 15:45
What is the issue you're having?
– Alex W
Jan 3 at 15:40
What is the issue you're having?
– Alex W
Jan 3 at 15:40
@AlexW I don't know what the best strategy is to implement such behavior.
– user1090633
Jan 3 at 15:45
@AlexW I don't know what the best strategy is to implement such behavior.
– user1090633
Jan 3 at 15:45
add a comment |
1 Answer
1
active
oldest
votes
You have to update the active item based on target div Y position vs height of scrolled document.
This can be done in a way similar to:
import React from 'react';
let lastScrollY = 0;
let ticking = false;
class App extends React.Component {
componentDidMount() {
window.addEventListener('scroll', this.handleScroll);
}
componentWillUnmount() {
window.removeEventListener('scroll', this.handleScroll);
}
nav = React.createRef();
handleScroll = () => {
lastScrollY = window.scrollY;
if (!ticking) {
window.requestAnimationFrame(() => {
this.nav.current.style.top = `${lastScrollY}px`;
ticking = false;
});
ticking = true;
}
};
render() {
return (
<div>
<nav ref={this.nav}>
</nav>
<div>
);
}
}
Alternatively you can try https://github.com/makotot/react-scrollspy which do exactly what are you looking for.
answered Jan 3 at 16:00
Mosè RaguzziniMosè Raguzzini
4,5181225
add a comment |
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
});
}
});
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%2f54025410%2fsoft-scroll-jacking-in-react%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
You have to update the active item based on target div Y position vs height of scrolled document.
This can be done in a way similar to:
import React from 'react';
let lastScrollY = 0;
let ticking = false;
class App extends React.Component {
componentDidMount() {
window.addEventListener('scroll', this.handleScroll);
}
componentWillUnmount() {
window.removeEventListener('scroll', this.handleScroll);
}
nav = React.createRef();
handleScroll = () => {
lastScrollY = window.scrollY;
if (!ticking) {
window.requestAnimationFrame(() => {
this.nav.current.style.top = `${lastScrollY}px`;
ticking = false;
});
ticking = true;
}
};
render() {
return (
<div>
<nav ref={this.nav}>
</nav>
<div>
);
}
}
Alternatively you can try https://github.com/makotot/react-scrollspy which do exactly what are you looking for.
answered Jan 3 at 16:00
Mosè RaguzziniMosè Raguzzini
4,5181225
add a comment |
You have to update the active item based on target div Y position vs height of scrolled document.
This can be done in a way similar to:
import React from 'react';
let lastScrollY = 0;
let ticking = false;
class App extends React.Component {
componentDidMount() {
window.addEventListener('scroll', this.handleScroll);
}
componentWillUnmount() {
window.removeEventListener('scroll', this.handleScroll);
}
nav = React.createRef();
handleScroll = () => {
lastScrollY = window.scrollY;
if (!ticking) {
window.requestAnimationFrame(() => {
this.nav.current.style.top = `${lastScrollY}px`;
ticking = false;
});
ticking = true;
}
};
render() {
return (
<div>
<nav ref={this.nav}>
</nav>
<div>
);
}
}
Alternatively you can try https://github.com/makotot/react-scrollspy which do exactly what are you looking for.
answered Jan 3 at 16:00
Mosè RaguzziniMosè Raguzzini
4,5181225
add a comment |
You have to update the active item based on target div Y position vs height of scrolled document.
This can be done in a way similar to:
import React from 'react';
let lastScrollY = 0;
let ticking = false;
class App extends React.Component {
componentDidMount() {
window.addEventListener('scroll', this.handleScroll);
}
componentWillUnmount() {
window.removeEventListener('scroll', this.handleScroll);
}
nav = React.createRef();
handleScroll = () => {
lastScrollY = window.scrollY;
if (!ticking) {
window.requestAnimationFrame(() => {
this.nav.current.style.top = `${lastScrollY}px`;
ticking = false;
});
ticking = true;
}
};
render() {
return (
<div>
<nav ref={this.nav}>
</nav>
<div>
);
}
}
Alternatively you can try https://github.com/makotot/react-scrollspy which do exactly what are you looking for.
answered Jan 3 at 16:00
Mosè RaguzziniMosè Raguzzini
4,5181225
You have to update the active item based on target div Y position vs height of scrolled document.
This can be done in a way similar to:
import React from 'react';
let lastScrollY = 0;
let ticking = false;
class App extends React.Component {
componentDidMount() {
window.addEventListener('scroll', this.handleScroll);
}
componentWillUnmount() {
window.removeEventListener('scroll', this.handleScroll);
}
nav = React.createRef();
handleScroll = () => {
lastScrollY = window.scrollY;
if (!ticking) {
window.requestAnimationFrame(() => {
this.nav.current.style.top = `${lastScrollY}px`;
ticking = false;
});
ticking = true;
}
};
render() {
return (
<div>
<nav ref={this.nav}>
</nav>
<div>
);
}
}
Alternatively you can try https://github.com/makotot/react-scrollspy which do exactly what are you looking for.
answered Jan 3 at 16:00
Mosè RaguzziniMosè Raguzzini
4,5181225
answered Jan 3 at 16:00
Mosè RaguzziniMosè Raguzzini
4,5181225
answered Jan 3 at 16:00
Mosè RaguzziniMosè Raguzzini
4,5181225
answered Jan 3 at 16:00
Mosè RaguzziniMosè Raguzzini
4,5181225
4,5181225
add a comment |
add a comment |
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.
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%2f54025410%2fsoft-scroll-jacking-in-react%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
What is the issue you're having?
– Alex W
Jan 3 at 15:40
@AlexW I don't know what the best strategy is to implement such behavior.
– user1090633
Jan 3 at 15:45