I'm trying give users the option of selecting a different homepage by clicking left or right, and having an entirely new page appear. I'm aware of a few jQuery carousels that accomplish this in a purely x axis, or y axis manner, but not a rotation. Ideally the background images will sync up, and the overall effect would be like a globe spinning, with a different set of elements at a different portion of the globe. The elements at each section of the globe still need to be interactive and
Does anyone have any ideas on that?
using jQuery, you should be able to do this using the .slideDown and slideUp methods.
Essentially, when they perform the action that you want to trigger a switch, you add a slideUp() to the 'current' container and do a slideDown() on the next one. The animations will run concurrently.
http://jsfiddle.net/g19fanatic/stLvj/
Not many people here will write you a full solution, but they'll be happy to work through specific issues.
Are these homepages on different domains and/or are they under your control?
How globe-like do you mean? A kind of sphere distortion, or just seamlessly connected at the edges?
How important is the smoothness of the concept?
Off the top of my head, here's how I would (attempt to) do it:
Load the homepages in separate iframes
Stretch the iframe to the window's dimensions
Adapt a carousel script to animate iframes instead of images
Some sort of "prev/next" controls overlaying the iframe. Maybe with z-index.
Check out landing.js file on http://thetruth.com/ (or just let the page timer run to see the carousel)
What you want is basically that but with animations instead of fading the page in/out.
Just add CSS3 transforms to scale and slide instead of the fadein/out when a new page loads.
A polyfill will add the transform capability in JS (see jquery.transform.js, jquery.transition.js by https://github.com/louisremi and Modernizr)
Related
I require some help creating a scroll effect for a client.
Example: If you scroll down the page, notice how the image on the right animates to become full width and it almost has a parallex type animation where the width and image position is changing at slightly different speeds.
https://videinfra.com/work/fci
I have had a go myself using JS and some CSS animations but can't get the desired result. Does anyone know the code or a plugin which may handle this?
You could use "Animate on Scroll" libraries, such as WOW.js (https://wowjs.uk/) and AOS (https://michalsnik.github.io/aos/).
These two are excellent when it comes to firing animations when your element becomes visible in the viewport. I've been using WOW for years. Have a look at their documentation, it will get you started.
I Want to create a slideshow of different images for a project with HTML, JS, and CSS. I want to create a scroll function that will move the image slides from left to right based on the movement of the mouse scroll.
If this sounds confusing this link shows exactly what I'm trying to do but due to my lack of experience, I have no idea how to accomplish this. Any ideas would help.
link: https://robbiecrenshaw.com/ about the halfway mark
thank you
(I'm a beginner in programming)
The animations used on this site are called scroll-based animations, where the animation progress is controlled directly by the scroll position.
They are implemented by listening to the scroll event that is fired when a user scrolls and updating the styles of certain elements dynamically based on the scroll position.
You can create scroll animations from scratch using JavaScript or implement them using a library like GSAP ScrollTrigger (which is what this specific site uses).
I created a demo similar to the effect you're looking for here: https://codepen.io/nickcil/pen/yLVEZPa
This example uses ScrollMagic to track the scroll position and update the transform property of an element to make the squares move left as you scroll down the page.
I'm using a library called ParticlesJS for part of the background of my website - this library dynamically generates a canvas element sized according to its parent, and fills it with animated particle effects, creating a neat effect. With that said, I have run into some practical issues when trying to use it as the background:
If the canvas element is the same size as the content, the visuals become pixelated and distorted if the height changes, such as with the addition of new content. Reloading the library is not a solution to this as it creates a visually distracting effect.
If the canvas element is an arbitrary extreme height and not sized according to the content (with the overflow simply hidden), the performance of the website suffers, as the library consumes excessive CPU power.
If the canvas element is simply given a fixed position in CSS, performance is good and it sticks, but it looks out of place as everything behind it moves during scrolling.
After some consideration, it seems like the best way to make it work is to give it a modest size (like 200% page height), and then make it repeat infinitely during scrolling - performance would be acceptable, and there wouldn't be any distortion. However, I can't find any way to do this - I'm aware that there's a background-repeat property in CSS, but that seems to only work for images.
Is there any way to do what I'm trying to accomplish? Both CSS and JS based answers are welcome.
After some trial and error, it looks like the only means of accomplishing what I'm trying to do is as follows:
Create 3 or so background divs, each the size of the view port, and stack them vertically
Record user scrolling activity, and set a trigger for when a user has scrolled a height equal to the height of the view port
when the trigger is hit, place the div that just left the view port at the end of the list, and insert an empty spacer div where it used to be
If done correctly, this creates an effect where the user is apparently scrolling through an infinite background, when it's really just the same 3 or so divs being shuffled over and over. Going in reverse is the same principle.
Not sure how to make this work with in a system that also has scroll position restoration, but it could probably be done by waiting for page loads and then dynamically inserting enough spacers to move the background divs to the appropriate position in the view port.
The downside to using animated effects that rely on viewport dimensions is that the user may resize the browser and wreck your animation so you have no choice but to catch any viewport resizing in which case you may have to reload everything or recalculate!
You can't have the cake and the cherry on top unfortunately, so you'll either have to abandon the idea of "impressive effects" because they are impractical or take action...
document.body.onresize=function(){Adjustments();};
function Adjustments(){
var W=Container.offsetWidth, H=Container.offsetHeight;
// You've now got the new resolution so go for your life!
}
I wish to build a shelf of content much like on Netflix where when you hover over arrows on either end the shelf scrolls at a continuous speed. Ideally, I would also like to make it so when you click the arrows it scrolls a chunk along, so you have the option to click like made to get through a shelf quickly.
This will be using lazy loading so you don't need to worry about repeating content, but obviously it won't have a set width (other then the outside container being 100% with overflow scroll.
Also, this needs to be actually scrollable, so it will work on tablets/phones.
I have no idea here to start so any directions would be great.
Thanks,
Jake!
Image of netflix shelf.
UPDATE: Check out the Smooth Div Scroll jQuery plugin. It slides continuously through the image, you can hover the mouse on the div and manually scroll back- and forward.
Original answer:
I might be off with that, but check out these two plugins:
jQuery Coverflow plugin or the jQuery Imageflow plugin
I think the keyword you are looking for is "flow" and there are multiple flow plugins for jQuery. Hope this helps.
Best regards,
Michael
does anyone know of a javascript/jQuery plugin that will "fly" elements onto and out of the screen as I scroll down a page?
To better describe:
I'm picturing a long, vertically scrolling page, where all the content is in little "content boxes", then as a result of different actions (in this case, as a result of scrolling), I want these boxes to be able to fly onto or off the screen.
Maybe this could be described as some kind of cross between jQuery animate and parallax scrolling?
I feel like I've seen that type of effect somewhere before and I just can't remember where...
Here you go... http://johnpolacek.github.com/scrollorama/
I'm not sure of the exact effect you want but I would use a css class that gets applied/removed to containers depending on the scroll position.
You can animate the change with css transitions.
WOW.js
Reveal CSS animation as you scroll down a page. By default, you can
use it to trigger animate.css animations. But you can easily change
the settings to your favorite animation library.