I'm trying to achieve A very cool effect I found in this website:
https://platforma.ws/
as you can see, at the very end the scrolling changes of direction, instead of scrolling to the bottom it starts scrolling to the right side.
I want to do something similar, but after completing the scrolling to the right side I would like to continue the down scrolling for a while. Like this image attached
Can someone recommend me a method to achieve this? is this possible only using html/css? or will require some javascript?
thanks in advance!
Related
Scrollbar with points
Can someone explain to me (or has a good tutorial for it) how this scrolling thing works? I don't know how I should google it.
This looks like a side scrollbar, and when I scroll down, it switches one Point down, and the page changes. Are there thew tutorials on how to create this? Please send me some info about it, because I really wanna know how to create this.
There is an other question that may help you:
Scroll to a specific position on a page using Javascript / Jquery
and I think these links may help you:
https://www.codespeedy.com/scroll-to-a-specific-position-in-javascript/
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
They speak about:
.scrollTo
scroll-behavior
scrollIntoView()
scrollIntoView(alignToTop)
scrollIntoView(scrollIntoViewOptions)
You better read all articles.
I've been looking everywhere and I cannot find an answer for this specific need.
I want to create a page with this effect - I want the page to scroll down automatically and smoothly to a certain section on the page as soon as the user begins to scroll their mouse. The problem with using the plugin linked above is that I already have my page designed the way I want, I just want to implement this scrolling effect. I am by no means a javascript expert - I deal mainly with the layout aspects of web. But if someone could show me how I could use javascript to automatically drop to a certain section on the page when the user begins to scroll, I would GREATLY appreciate it. Thank you!
Try Using Nice Scroll
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>
$("#thisdiv").niceScroll({
mousescrollstep: 40, // scrolling speed with mouse wheel (pixel)
});
I'm trying to replicate this scrolling effect as seen here: http://prm.ooo.
In which the image elements flip and rotate continuously on a scroll as it enters and exits the page, I know this requires jquery/javascript and not just CSS alone.
So far I am able to rotate an image while scrolling.
Does anyone know how I can achieve this?
Here is the code: http://prm.ooo/wp-content/themes/prmo/main.js you can look at the source of any page and try and figure out how they did things. People also use plugins like scrollorama for this type of thing
Does anybody knows how to implement horizontal scrolling on event? I am trying to replicate this functionality: http://www.spotify-valentines.com/#/home
First, it scrolls fullpage to the right. Then, it scrolls half way to the right. Then it scrolls full page, also to the right, and finally it becomes a normal screen with vertical scrolling.
The site seems to be built with Angular, but I am not sure how this functionality is accomplished.
Thanks!
It can be accomplish by using fullPage.js.
Just create a single section with multiple slides in. Then you can create your custom buttons and associate them with the action $.fn.fullpage.moveTo() or $.fn.fullpage.moveSlideRight() or $.fn.fullpage.moveSlideLeft().
my question is about making all of the content on my webpage move when I go through different sections of the site. For example I am in the Home page and click on Contact, all the text,pictures,div tags, etc. should move left and out of the screen and the new info (from Contacts) should move from the right and to the middle of the screen where it should be. Something like a transition on a presentation... I think it should be something simple, but I'd appreciate if someone points me in the right direction. Thanks!
Not simple, but check out jQuery and animate:
http://api.jquery.com/animate/