Smooth scrolling behavior on Elements - javascript

Hello people I have found on this page (https://www.couleecreative.com/) A nice effect which I would like to Eibauen on my page. And that is the scrolling verhhalte of the text and other Contenst... But I didn't figure out how to solve it. Does anyone have an idea?

This kind of effect can be made using css property "background-attach".
There are few examples available on w3school, which can help :
https://www.w3schools.com/CSSref/tryit.asp?filename=trycss_background-attachment_fixed

Related

How to make the site scroll smoothly with the mouse?

I found a smooth scrolling site. All elements move very smoothly. I googled for a long time, but did not even find a similar example. Any ideas how this can be repeated? https://www.sweetpunk.com/en/
The site is likely using a library similar to locomotive-scroll to achieve this effect. See here for a demo: https://locomotivemtl.github.io/locomotive-scroll/
There is a css property that's does something similar
*{
scroll-behaviour:smooth;
}

Smooth Scrolling and Anchor Tags Issue

I am having a very odd issue and also finding it difficult to implement smooth scrolling on my single page website.
You can view my site HERE
Firstly, Is the strange anchor issue, when I click the link in the hamburger menu, the link appears in my address bar (which I would like to get rid of at some point) but when I scroll down the page it just keep being stuck on that div only I cannot scroll the page freely.
Secondly, I can't seem to implement any smooth scrolling techniques which I find on the net so far and I would really appreciate a little hint as to what I am doing wrong. I have tried to put name="" and rel="" into the <li> and <a> elements (adjusting the smooth scroll code accordingly but still nothing.
Please find reference HERE
I am a bit of a newbie with javascript so maybe i am not doing something simple here.
Thanks in advance!
Terry
After speaking to some other students I found that the issues is due to the html and body CSS. I needed them to both have height auto and min-hight 100%.
Although this still does resolve the issue with the revealOnScroll. I need to tweak this code I think as it isn't able to then calculate the offset().top

Unable to get skrollr parallax effect on header image

everyone!
So, I'm trying to implement parallax with skrollr.js. This is my first attempt and I am pulling my hair out. I've been all over the web from searching Google, YouTube and StackOverflow. I'm trying to implement a parallax effect on a header image somewhat similar to this example except the image doesn't need to be the full height of the viewport and I only need one image to have a parallax effect. I'm going for something very similar to this on Squarespace's page.
I've been trying to simply use the code from the examples provided in the Skrollr.js repo. But after hours of failure, I turn to the trusty SO community!
Here is the page I have currently been testing the parallax header image on.
The classes .scollable-between and .scrollable-after are being altered on scroll but nothing is happening. Also, I am trying to implement this for mobile but I can't even scroll the page on mobile.
Any help is certainly appreciated! Thank you so much!
A couple issues:
First, position: fixed really doesn't play well with skrollr... whenever it is enabled on an element, the position relative to the scrolling element basically no longer exists, and skrollr events stop firing.
Second, it looks like the element with the background image (.parallax-image) is both being shown by the class '.skrollr-between' and also has a transform-3d property on it. When I disable the tranform3d property with the inspector, I can see the image.
It seems like you are combining two methods of parallax: Skrollr is one way of doing it via JavaScript, and CSS transforms are a way of doing it without Javascript... it would probably be best to chose one and roll with it.
Skrollr/JS method:
https://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/
CSS only method:
http://keithclark.co.uk/articles/pure-css-parallax-websites/

How to make background image switching with page scroll? Any js or?

I saw on few websites that fantastic trick, when you scrol page,
background image scrolls up and above comes new one. I tryed search on google,
but i could not find anything. Does anyone know how to make it??? Please!
I think parallax is what you are looking for.
it can be done easily using jquery plugins, see this for example:
http://streetsmash.com/parallax-scrolling-plugins/

Automatic scrolling text right to left in a div

Hey I want to make text scroll from right to left in a div i have. I want this to happen automatically and at a constant flow.
Now when i first started with HTML the tag was used to do this, I've looked around a few websites and it seems that this tag still seems to be going. My question is really if this is the best way of achieving this affect or is there a better way of doing it? for example, javascript,Jquery and/or css Maybe even something in HTML5?
This shows what i am looking - http://www.gftuk.com/
Notice the scrolling stops when the user hovers over the text.
Thanks for the time.
<marquee>hello world</marquee>
Personally, I think the best way to achieve this would be to use jquery. There are a few plugins out there which do the job nicely.
If you want to automatic with "scroll" text ( structure of DOM is not complex) .
<marquee>This text will scroll from right to left</marquee>
But you will see with "marquee" the scroll is not smooth.
So you can use simplyScroll plugin
http://logicbox.net/jquery/simplyscroll/
( I see it in this code of your link : http://www.gftuk.com/. in next time, please open dev tools or firebugs and see source code of any pages when you want to have the same effects )
Hope it helps you

Categories