How do i build a vertical carousel scroller in pure javascript? - javascript

This is what I want to accomplish
The code is already here, but i do not know how to make it stop at each section.
https://codepen.io/ellie_html/full/dyYjZyB
the part of the css that makes the code above work is this
.container {
height:570px;
width: 325px;
overflow-y: scroll;
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(3rem);
scroll-snap-type: y mandatory;
position: relative;
left: 510px;
top: 50px;
z-index: 1;
border-radius: 15px;
border: none;
}
.tiktok {
height: 620px;
width:300px;
background-color: black;
scroll-snap-align: start;
}
A vertical carousel scroller just like above, except, it must stop on each section instead of allowing the use to quicky scroll over each section.
I notice google shorts https://www.youtube.com/shorts/3jqhfmUqgZk behave the same way if you scroll down.
Snappy and crisp to the feel. However it also doesnt allow it to stop on each section. If a user scrolls very fast, it will skip over many.
How can this be done in javascript? I have looked at many libraries so far but they all suffer from the same problem. I am trying to modify the code above to make it work.
Or am i recreating the wheel and there is some tiny code out there that already does this?

I ended up using this library https://mobius1.github.io/Pageable/#page-1
Set it up in freescroll mode and dragmode. Its also free with no cost, and the snap feel of the scrolls is similar.
It is also done in pure javascript with zero dependencies.
Setting it in drag mode also prevents multiple sections from being skipped because a user wont be able to use the scroll wheel.

Have you tried fullpage.js? You can check its official docs here.
fullPage is an Open Source application licensed under a GPLv3 license. This license allows you to use fullPage in Open Source projects but it requires your project to be public, provide attribution and be licensed under GPLv3.
Here's a contrived example, also available on CodePen:
new fullpage('#fullpage', {
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
// get your license at https://alvarotrigo.com/fullPage/pricing/
licenseKey: 'YOUR LICENSE KEY HERE '
});
.section {
text-align:center;
font-size: 3em;
}
.as-console-wrapper {
display: none!important;
}
<link rel='stylesheet' href='https://unpkg.com/fullpage.js/dist/fullpage.min.css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.11/fullpage.min.js"></script>
<div id="fullpage">
<div class="section">Section 1</div>
<div class="section">
<div class="slide" data-anchor="slide1">Slide 2.1</div>
<div class="slide" data-anchor="slide2">Slide 2.2</div>
</div>
<div class="section">Section 3</div>
<div class="section">Section 4</div>
</div>

Related

Scrolling using arrow keys not working in Gatsby

I'm currently developing a React project using Gatsby in which the page is scrolled inside the main element, and the main element contains sections that snap on scroll (using the scroll-snap-type/scroll-snap-align properties in css). The structure of my site is as follows:
<body>
<div id="___gatsby">
<div tabindex:"-1" id="gatsby-focus-wrapper" style="outline: none;">
<main>
<section></section>
<section></section>
<section></section>
</main>
</div>
</div>
</body>
For some reason, having the page scroll inside the main element removes my ability to scroll using the arrow keys, and the issue seems to be with #gatsby-focus-wrapper which is added by #reach/router for accessibility reasons.
After some experimentation I found a hacky solution: removing the tab-index property from #gatby-focus-wrapper or setting tabIndex: {-1} on my main element. This allows me to scroll with the arrow keys after making the main element active by clicking the page, which isn't ideal but it's much better than not being able to use the arrow keys at all.
The following snippet demonstrates this same behaviour (you can't scroll with arrow keys without first clicking the page), but if you copy this code into a new Gatsby project (minus the gatsby wrapper elements of course) you won't be able to scroll using the arrow keys at all without using one of the methods I described above:
html {
height: calc(100vh - calc(100vh - 100%));
}
body {
margin: 0;
}
body, #___gatsby, #gatsby-focus-wrapper, main {
height: 100%;
}
main {
overflow: hidden scroll;
scroll-snap-type: y mandatory;
}
.blue, .green, .yellow {
height: 100%;
scroll-snap-align: start;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
<div id="___gatsby">
<div id="gatsby-focus-wrapper" tabindex:"-1">
<main>
<div class="blue"></div>
<div class="green"></div>
<div class="yellow"></div>
</main>
</div>
</div>
Is there a way to make the main element active by default to fix this? And if so would this break my site for screen readers? Or maybe some built in Gatsby functionality that I'm not taking advantage of?

Scrolling Div Along The Page, Stop at the Bottom of Itself (Like Twitter)

I'm stuck at some point. I'm trying to do a three-column page layout. The Middle section is for posts, the right section is for some other links and references and so (A bit long). Left is fixed.
My question is;
How can I stop the right div from moving when it reaches its bottom? And if the middle div's content is shorter then the right also has a scrollbar for the page for the right div. Just like Twitter does.
I tried to do some brainstorming. And thought maybe Twitter makes double divs for those sections. One is normal, the other is the fixed bottom it. So normal one stretches the page for scrolling, and the other one sticks on top of it. But I'm not sure if I'm right.
Or is it possible with pure CSS? (Also I'm using TailwindCSS)
Anyway; here is a presentation of my thought. (Or you can simply look at twitter homepage feed)
Also here is a gif;
click
You can use the following CSS code in the element which needs to stop
position: sticky;
bottom: 0
Refer to the following post on Stackoverflow for more information How does the "position: sticky;" property work?
Hope this answers your question!
Edit: [Try this out]
.main {
width: 100%;
height: 1000px;
display: flex;
}
.first {
width: 30%;
background-color: red;
}
.second {
width: 40%;
background-color: green;
}
.third {
width: 30%;
background-color: blue;
height: 500px;
position: sticky;
top: 0px;
}
p {
margin-left: 20px;
}
<div class="main">
<div class="first">
<p>
Left content.
</p>
</div>
<div class="second">
<p>
Main content.
</p>
</div>
<div class="third">
<p>
Right content.
</p>
</div>
</div>

Parallax scrolling in Safari on iOS

As far as I understand it is not possible to execute JS whilst scrolling. All working iOS parallax scroll scripts that it know of recreate the native scrolling effect in js to achieve this eg. Iscroll
How then have apple achieved it on their own website.
Look at the blurred background images as you scroll on this page.
http://www.apple.com/ios/carplay/
It is possible to create a CSS purely on iOS devices without JS. There are some great examples such as Keith Clark's you can find here
However i personally found that this did not have the desired effect on iOS devices. As i expected the page to continue to scroll after i have released my touch, but it seems this didn't happen - almost as though the page was 'sticky'. I found this was the case with a number of Pure CSS solutions i came across.
I am usually working with Bootstrap so the following example is what i use to produce the parallax effect i was after.
In your CSS add this:
#fixedbg {
background:url(../img/yourparallax-image.jpg) no-repeat center center;
background-size:cover;
height:100%;
position:fixed !important;
width:100%;
z-index:-2;
top:0;
}
.header {
display: table;
position: relative;
width: 100%;
height: 100%;
}
Then in your html add this:
<div id="fixedbg"></div>
<header id="top" class="header">
</header>
<section id="article" class="article">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-12">
<p class="text">Example text content goes here</p>
</div>
</div>
</div>
</section>
The #fixedbg calls the correct image from the CSS and then the header section sets up my full page image that i want to run the parallax effect on.
I usually place the #fixedbg css insude media queries for various device screen sizes as i like to use different ones depending on the content.
Please note this is a simple parallax and to date i have not 'stacked' with multiples on the same page, but between the above code and that sampled in Keith Clark's example above, this should provide a good starting point.

Viewport size, huge whitespace new on responsive site

I am working on an existing fixed-width desktop site, and the client wants no changes to the existing desktop layout whatsoever, and they want it to be "responsive".
The Problem:
When viewed on a phone (my android, anyhow), the 'mobile' site loads as expected. However, if you touch, move, scroll, etc, or happen to "zoom out", there is a huge amount of whitespace like this:
Background:
For the record: The new specs for the "mobile" view contains some new content, new menu options, etc., which don't always correlate consistently with the existing content.
So, my approach has been to add a css class to elements I want to keep, then use jQuery.clone(), .append(), and appendTo() to re-use as much of the existing content as possible, moving elements into my new "mobile scaffold":
$('.mobile-header').appendTo($('#PH_mobile_header'));
$('.mobile-content').appendTo($('#PH_mobile_content'));
$('.mobile-footer').appendTo($('#PH_mobile_footer'));
The simplified scaffold:
<div id= "PH_mobile_wrapper" class="mobile-wrapper mobile visible-xs">
<div class="row row-offcanvas row-offcanvas-left">
<div id="main" class= "col-xs-12">
<div id="PH_mobile_header" class="visible-xs">
<!-- HEADER -->
</div>
<div id="PH_mobile_content" class="container visible-xs">
<!-- CONTENT -->
</div>
<div id="PH_mobile_footer" class="visible-xs">
<!-- FOOTER -->
</div>
</div>
</div>
</div>
I also rely on 2 sections of a new LESS stylesheet to tweak a few things. For example:
//DESKTOP:
#media(min-width:768px){
h1{
font-size: 2em !important;
}
body{
background-color: #ltgrey;
}
.navbar{
width:1000px;
margin: auto;
border-right: solid black 1px;
}
.mobile{
display: none;
}
}
//MOBILE:
#media(max-width:768px){
li.inverse{
background-color: #dkgrey;
color: white;
a{
color: white;
&:hover, &:focus{
background-color: #olacred;
}
}
}
}
For the record, I'm using bootstrap 3.0 and php if that's relevant. I just mention that in case bootstrap is related to this somehow.
I started with the standard
<meta name="viewport" content="width=device-width, initial-scale=1">
and i've tried
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no,maximum-scale=1">
Also read about CSS #viewport, but it doesn't seem to do the trick either.
I've even tried explicitly doing this at the end of my stylesheet:
#layout_wrapper, #layout_container,.dashboard_home_highlights,
.collapse-wrapper,#alpha,#beta,.dashboard_col_1_rotonator,
.orbit > a > img, .orbit > a{
// display: none !important;
max-width:300px !important;
}
blah.
So the questions are:
a. How do I fix this "viewport" issue, and b. is this all-around approach OK?
EDIT: Here is a partial demo: http://myapp.gristech.com/demo/viewport
Grrr...I have failed to completely reproduce the entire problem, but here you can see the approach, and one bug: if you pull this up on a phone, then zoom in, the text correctly squeezes into the view. Then, zoom back out... the text does NOT expand again as it should, leaving extra whitespace so to speak, and scrolling down is thereafter "wobblely". This is kind of what I think is going on on a larger scale in the full project- since the 1000px site loads 'first', then the 'layout viewport' is still 1000px. thank you so much for your time & effort

Stellar.js background attachment set to fixed but crazy jitter still happening

As the title suggests, I'm using Stellar.js. I only have one parallax element, and it's very simple. It's a section with a background image. The background image is set to fixed (like the documentation says to do to avoid jitter), but the image is still jittery--somewhat in Chrome, really bad in other browsers. It doesn't change when I remove the fixed CSS either.
Here is the element:
<!--Testimonial Section-->
<section id="testimonial" data-stellar-background-ratio="0.5" data-stellar-vertical-offset="-900">
<div class="container">
<div class="row">
<div class="span3 margin-30">
<img src="img/testimonial-img.png" alt="Title">
</div>
<div class="span9">
<h2>“Lava has been an asset to our company by providing us with a cutting edge look and a web presence that shows off our work and skills.”</h2>
<div class="testimonial-source pull-right">Jeff | Ceo - Creative Company</div>
</div>
</div>
</div>
</section>
And here is the CSS:
#testimonial {
background: url(../img/studio-10.jpg) no-repeat center;
background-size: 2000px 2000px;
background-attachment: fixed;
padding-top: 120px;
padding-bottom: 120px;
}
Pretty straightforward. Any advice?
The problem wound up being an image tag that was in the same div as the background image that was involved in the parallax scrolling. Upon removing this image, jitter stopped.
Have you tried using smaller images? Those used in stellar's demo are smaller (1280x640px) and do not have the background-size property. Try with smaller image and/or without the background-size property - that may cause those performance problems.
try this
#testimonial {
background: url(../img/studio-10.jpg) no-repeat 50% 0 fixed;
width: 2000px;
height: 2000px;
padding-top: 120px;
padding-bottom: 120px;
}
I know this is an old question but changing $.stellar() or $(window).stellar(); to :
$.stellar({
hideDistantElements: false
});
solved the flickering issue for me.

Categories

Resources