Fade images in and out based on scroll position - javascript

I'm trying to recreate the same effect used here: http://www.chylak.com/en/bags where the images will fade in/out based on scroll position.
I've had a look at the source and can see that "data-centre-centre" and "data-top-bottom" both have opacity values so it looks like a CSS transition?
Thanks for the help anyway :)

here you are a little example in this fiddle

For anyone interested, I ended up using skrollr.js https://github.com/Prinzhorn/skrollr
Super easy to use and works great if you're trying to achieve a similar effect to the one referenced in my original question.

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 behavior on Elements

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

Very simple image slider with Jquery not sliding whole width of element

I made a simple image slider to show the houses at sale of a properties website, but the slider doesn't slide the whole width of the divs containing the images. I made a codepen at
http://codepen.io/anon/pen/Eamns to illustrate what I mean, does someone know how can I slide the element without leaving a small bit of it visible? Somehow I don't like to use the whole lot of sliders that are out there, but building my own. I'll appreciate any help, as you can see I'm using the outerWidth and margin properties to determine the distance of the slide, but it's not very clean and I still don't like it.
Thanks in advance
[1]: http://codepen.io/anon/pen/Eamns
Not sure if your CodePen is complete. If you want something clean and easy to implement, I recommend using the 'jquery cycle' plug-in (http://jquery.malsup.com/cycle/) to create your slider. It is the easiest way I have found to make many types of image sliders.

Parallax, as a homepage banner

This is a very vague question, but I am not sure where to start, so if anyone could give me some idea, that you be great.
I want to have a Parallax effect on the homepage of my website, but I am unsure how to create this effect. The effect I want is crated here http://davegamache.com/chase-happiness/ and here http://themetrust.com/demos/hero/. They both use a similar principle to where as you scroll down the image and text move at different speed and fade out.
So basically my question is, does anyone know where I should start to create this or any download you can get which creates the effect.
Thank you for any help
Looks not that difficult, just look in their sourcecode at: http://themetrust.com/demos/hero/wp-content/themes/hero/js/theme_trust.js
At the bottom there is a section named: Parallax

jQuery div rotator

I'm having a hard time trying to find a rotator to fit my needs since I cant seem to make one...
I want to automatically fade rotate a entire div, any help with this?
jQuery cycle plugin may work: http://jquery.malsup.com/cycle/
It has a lite version too if you only need it to rotate/cycle.
Try AnythingSlider... you can rotate image and divs
Im using AnythingSlider and rocks...
You could watch a demo here

Categories