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
Related
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!
I want to have one image above another one that is being revealed on scroll.
I am thinking of a similar effect as on this page: https://affinity.serif.com/de/photo/ (live-filters section, called "fixed-scroll" here).
Preferrably a native CSS solution or with as little JS as possible.
So far, I've found this example https://tympanus.net/Blueprints/ScrollingLayout/
It's almost what I want but I can't think of a way to make the background-attachment fixed to the element's parent rather than the whole viewport.
It only works when it's fullscreen and there's nothing above this effect.
I've also thought about a solution using translate-y but can't find a way to slide the top image up revealing the image underneath instead of sliding the lower image upon the first one.
Can you help me out here or point me in the right direction, how this may be achieved? Thanks!
As far as I know using background-attachment: fixed might be the only way to achieve this particular effect using only CSS, but it looks like that doesn't quite solve your problem.
I would try a simple parallax scrolling library such as parallax.js. This uses javascript to achieve the desired effect but you can apply all the code via CSS data attributes, like so:
<div id="mydiv" data-parallax="scroll" data-speed="0" data-image-src="/path/to/image.jpg"></div>
With data-speed="0" the image inside the div will be stationary as you scroll past.
I was looking at this site and noticed how the background image seems to move and animate as the user scrolls. Upon inspection of the source code, it showed that this was achieved by changing the background image as the user scrolls. Essentially, it jumps through many frames of images giving the illusion of an animation.
What would be the quickest and easiest way to achieve this? I am using the ScrollMagic library if that would make it easier.
The quickest, easiest way is to listen for scroll events on the element, then change the background url via CSS to the file you want to show. You'll probably need to convert the pure scroll value to a percentage (to account for varying screen sizes), and you'll need an array of images that map to those percentages.
I was looking at this gallery:
http://www.orangegirlphotographs.com/portfolio.cfm?galleryID=4
And just loved the way it looked, anyone have any idea how to get a similar effect using ideally CSS/JS and if not then using flash? Furthermore it would be excellent if you could move to the next slide by clicking on the image itself.
I'm also wondering how she is able to maintain height of the images when resizing (unless she is doing it manually which I doubt now days).
I normally use Gallery3 for my image uploading, automatic resizing with AnotherSlider to get a sliding effect but I would really appreciate it if you guys could direct me to something like this?
jQuery's probably your best bet here. I've used the Cycle plugin with slideshows before: http://jquery.malsup.com/cycle/
Look at the examples and you'll get an idea of what it can do: http://jquery.malsup.com/cycle/more.html?v2.23
For the height, either all the images have the same height, or simply setting it in html will keep the ratio. It's better to have them all the same height and resize them in something like Photoshop as the results will be smoother
I was looking to create an image gallery in my blog. However, I was wondering how possible it would be for the gallery to scroll through my images on mouseOver. Basically, when the user moves his/her mouse up or down the image gallery, the images scroll up or down accordingly.
I have seen a few examples where it has been done in flash, but i was wondering if it was possible for it to be done in Javascript. An example of what I am talking about can be seen on deep.co.uk. This example is constructed in flash and allows the user to skim through the agency's portfolio by moving the mouse up and down the div. I am aware that loads of free javascript alternatives are online, but i haven't managed to find anyone that does it on mouseOver. I would appreciate it if someone has come across something like this or has used something like this in one of their projects.
Thanks in advance.
Yours sincerely,
Seedorf
Maaki has i nice version here:
http://www.maaki.com/thomas/SmoothDivScroll/
supports mouse hot spot scrolling, and auto start/stop
Here is a script which scrolls content vertically onMouseOver.
http://www.dyn-web.com/code/scroll/demos.php