Curious if this is possible to implement in readymag? My understanding is that it needs to be defined by sections/ anchors but im not sure this is feasible. Would love any sort of smooth scrolling to feel like this site. New to front end customizations btw, thanks!
this works. but regarding the page alignment you choose you have to find ot which container is being scrolled. ist not the body though. If i remember, look for something like “.content-scroll-wrapper” int he devtools.
thanks! I found these classes in Dev tools along with the corresponding css styles, does it need to be the full .mag.mag-pages class or will targeting content scroll wrapper suffice? I tried both didnt see a difference, code used below. Thanks in advance!
ps I like your site! did you build that on readymag?
.mag .mag-pages-container .container .page .content-scroll-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
<!-- Include MagicScroll script -->
<script src="https://unpkg.com/magic-scroll.js/dist/MagicScroll.umd.js"></script>
<!-- Style for smooth scrolling -->
<style>
/* Targeting the specified element */
.content-scroll-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
</style>
<!-- Initialize MagicScroll -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Initialize MagicScroll with target element and settings
let magicScroll = new MagicScroll({
target: document.querySelector('.content-scroll-wrapper'), // Targeting the specified element
speed: 160, // Adjust speed as needed
smooth: 24 // Adjust smoothness as needed
});
// Set up MagicScroll onUpdate event
magicScroll.onUpdate = a => {
console.log(a);
};
});
</script>
hey,
you don´t need the extre section.
And erase the “document.addEventListener(‘DOMContentLoaded’, function() {”
don´t forget to also delecte the last bracket.
(the domcontentloaded function isnt triggering with RM, so the code isn´t executed)
And it does not need the full classname selector.!
And yeah, my website is build with RM, but there is pretty much customcode in it.
Spent some time troubleshooting and ended up publishing site. Couldn’t tell if RM preview might have been impeding effect preview. Below is updated code that i believe is still not working. (im scrolled out lol) I checked networks in devtools and confirmed 200 code to ensure proper connection. I also tried targeting the subsequent classes but i didnt see a difference. Promise this will be the last round on this before calling it off. I really appreciate your time and help.
Live Site: https://axelcastillo.com/
Classes Tried:
Live Code:
<!-- Include MagicScroll script -->
<script src="https://unpkg.com/magic-scroll.js/dist/MagicScroll.umd.js"></script>
<!-- Style for smooth scrolling -->
<style>
/* Targeting the specified element */
.content-scroll-wrapper.has-vertical-scroll.accelerated-scroll {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
</style>
<!-- Initialize MagicScroll -->
<script>
// Initialize MagicScroll with target element and settings
let magicScroll = new MagicScroll({
target: document.querySelector('.content-scroll-wrapper.has-vertical-scroll.accelerated-scroll'), // Targeting the specified element
speed: 20, // Adjust speed as needed
smooth: 60 // Adjust smoothness as needed
});
// Set up MagicScroll onUpdate event
magicScroll.onUpdate = a => {
console.log(a);
};
</script>
don´t give up… 
here is the solution, I just changed the let to var and added a Timeout to make sure the class is already selectable by js:
<script src="https://unpkg.com/magic-scroll.js/dist/MagicScroll.umd.js"></script>
<script>
setTimeout(function() {
var magicScroll = new MagicScroll({
target: document.querySelector(".content-scroll-wrapper"), // Targeting the specified element
speed: 165, // Adjust speed as needed
smooth: 25 // Adjust smoothness as needed
});
// Set up MagicScroll onUpdate event
magicScroll.onUpdate = a => {
console.log(a);
};
}, 1000);
</script>
nice website though!
1 Like
Thanks! I’m excited to see this version of my portfolio come to live. Took me a minute to get the hang of RM.
Also those edits worked! Thanks! The script is finally running and I’m seeing the effects. There’s this odd slingshot effect/auto scroll happening though, both in chrome/safari(worse). I toyed around with settings currently set to speed:10 smooth:60 thinking that might have been the cause. Wondering if it’s fighting with browser native settings. Debugger is highlighting this part of the code as leading to webgl issues.
hey, the settings are a bit wierd, or hard to understand.
Its a pretty lightweight selfmade script, so yeah, use it with caution. I also don´t know if this works good on mobile. So maybe add a exception for mobile…
But then there is the question if those hackarounds make it worth to use it.
Hi Axel, I took a look at your wesite, it is super cool! One question: how did you manage to get the blend mode on the cursor? I have tried some code I have seen on the forum but didn’t work. Thanks!
Hi Maria!
The code below is what I used for my site. Let me preface with saying this took a lot of trial and error so I may not be of much help post sharing lol. My knowledge with code is limited, so please use with caution. Good luck!
<!-- Custom Cursor -->
<div class="cursor">
</div> <!-- Custom cursor element -->
<style>
body {
cursor: none; /* Hide the default cursor */
}
a {
cursor: none !important; /* Override cursor style for links */
}
.cursor {
position: fixed;
width: 16px;
height: 16px;
background-color: #ffffff;
border-radius: 50%;
pointer-events: none;
z-index: 1000;
mix-blend-mode: difference; /* Optional */
}
@media (max-width: 768px) {
.cursor {
display: none;
} /* Hide custom cursor on mobile */
}
</style>`