Friends, I need to make a parallax effect exactly like this gif, with 4 sessions. Can someone help me? I don't even know where to start.
Basically the first, second and last sessions would have a height of 100vh. The third would have dynamic height, according to the amount of content.
The sessions would be covering each other and the one that is covered would be shown as the screen scrolls.
If possible (and if not, that's fine), I would also like to do a black overlay effect before showing the session underneath, like in the gif.
Here is an working example, but I need it without the sticky effect.
Thanks!
Related
I am developing a react web page, where I am using this kind of layout.
But the height of the page could be even more than 4k px because I do not exactly know how many "boxes" will be displayed. Therefore, I added scrollbar to the page.
Now I would like to have aligned items to the bottom (top is already aligned by default) when the user is scrolling.
To achieve this, every column must scroll independently but synchronized at the same time.
Does someone have any suggestions on how to achieve this goal? It is some kind of parallax in combination with the masonry effect.
Thanks for any ideas.
An idea would be to contain each of the columns in their own div and then use the parallax effect to scroll all of them together.
When viewing the dayGridMonth view on mobile, the squishing causes the calendar to enable a scrollbar for you to sift through.
I would like for the height to remain in full, and only the width to dynamically resize, so that you only need to scroll through the page and not the actual calendar itself (since you already do have to scroll some on the page, it's awkward). The header doesn't look too hot either but the focus right now is really on the calendar itself.
My CSS is weak to begin with, but playing with a library's styling is tenfold intimidating. Any tips in the right direction would be appreciated. Below is a sample of what the scrolling looks like (obligatory cursor because the bar fades otherwise)
Technically mobile would warrant switching to maybe week view or even day view, that solves it quick and easy, but the person i'm setting this up for really likes the full month view and wants it in all media formats to stay as is.
I located the element for the full container, but messing with height or width seems to do nothing and I can't see why.
Thanks for any help
There were two element containers manipulating the whole box content, I was editing the outer container, but the inner one needed to also be extended as it was the one where the table/rows were being populated.
So essentially what I am looking to do is have a section that has a solid background at some point on my page, and at the top of that a pair of sunglasses that as you begin to scroll, the reflection of the sunglasses changes from a few different images, as well as some text changes below the sunglasses to match each change in the sunglasses. Then once the final image is scrolled through, you reach a new section with different information. I am not entirely sure what this effect is called or how to achieve it, though I am guessing it will require a significant amount of jquery.
An existing website that demonstrates the effect I am trying to achieve is https://software.dakno.com/ with the phone effect in the second area down the page. (I do not own this site nor am I affiliated with the owners). I used chrome developer tools to figure out how it is working, but didn't get too far.
The site that I am working on is http://zack2171.github.io . This is an example site I am using to practice css and web design. The second section is where I am trying to get this effect to work. If someone could help me out a bit and give me some pointers, that would be great. Thanks
To achieve your goal, your definitely looking towards a mixture of jQuery and css. Most of your time will be dedicated towards the scroll position and at what pixel (Scroll distance) is covered to showing your images/text. I would start to align your image that you want in a position that is either fixed or absolute, to give you a better adjustment. Then start to play around with jQuery's Scroll Position. My personal approach would be to to detect the distance scrolled and after reaching those milestones (Half a page / 3/4 of a page) you would use jQuery to verify the position and then display those extra materials you want to show. I hope this kind of let you onto a good starting path.
Quick example, scroll down within the script below and check the console it logs!
$(window).scroll(function() {
console.log($(window).scrollTop());
})
.box {
background-color:#333;
height:5000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>
I am developing a mobile web application using jQuery and i have been requested to have each page transition into the next with an animation where the page is "split in half", then have the upper part slides up and the bottom part slides down, thus revealing the next page.
I have a small idea, but i dont seem to have the knowledge to get trough:
2 Canvas with display: none, each width width: 100%, height: 50%. - Check
Have the actual display be rendered into said canvas's - I have not the slightest of ideas.
Ajax the next page in a div below both canvas's - Check
Slide the canvas's in the respective directions - Check
Set the canvas's to display: none and restore them to their original positions - Check
Any thoughts? I'm open to use any other framework appart from jQuery, if that's the need. I am also open to change my canvas idea into something else.
EDIT:
As for clarification imagine the page to be a closet, but a vertical one so its doors (the actual page) will slide into the roof and the floor respectively (Its not the greatest of comparisons, but please bear with me) and thus let you see and interact with the content of the closet (The next page). This will go on and on until the application's workflow ends at the last screen, as there will be no back button.
I'm pretty sure I know what you want. You have multiple pages in your registration/form process and instead of having the old fadein/fadeout or sliding effects, you want the top half to slide up and the bottom half to slide down. In order to do this, I'd dump the canvas idea. I don't think that there's an easy way to do it using canvas as of right now. You could try using the html2canvas script, but it's not 100% accurate when it comes to rendering things like this.
As an alternative, I'd recommend using the following process. As a preface, make sure that every step in your form has its own container div (called something obvious like "step-wrap" or "step-container"). Then, when you begin the animation, the first thing to do is to duplicate the current step-wrap, calling it something like step-wrap-animation. Give the original wrap, step-wrap, a height of 50% and position the duplicate below the first with the same height of 50%. Both of the divs should have styling that has an overflow of hidden. Make sure, also, that you set the scrollTop of the duplicate div to scroll to the bottom so that it looks like a continuation of the first div. Everything from here should be smooth sailing.
Second, once you have everything in the first step working, start the animation process. You can do this however you want now that we have the splitting functionality figured out. Make sure that before you start splitting the two divs apart you put the next step behind the previous so that it unravels.
Essentially, what you need to do is:
Duplicate the div
Position both divs (the original and the duplicate) so that both the heights equal 50% and they look like continuations of each other
Animate the top div up, bottom div down
Here's a basic fiddle illustrating how something like this should work. Click on the rendered screen to get the animation going.
Take a look at backbone.js and marionette.js based on backbone.js.
backbone.js is MVC framework where you can define separate views. Marionette is an extension which supports regions and switching views based on whatever you want. Inside switching logic you can easily implement your transitions. Very generic answer but perhaps it will help you to get started.
In General:
I need my nav to behave like a mobile app (swipe effect), but WITHOUT accessing it via a mobile product. (So JQuery Mobile and such isn't applicable here... at least I don't think.)
Specifics:
My nav (example attached below) is a set of horizontally arranged icons. I would like to be able to scroll horizontally, but instead of simply scrolling the icons over, I'd like them to slide in increments (much like how an iPhone's pages slide into discrete positions with swipes across the screen.) This means regardless of how much the user scrolls, only the same amount of slide is performed.
View work-in-progress here
My Problem:
So I currently have this (crappy/buggy) version working, but it's based on JQuery's .mousemove() which means as I cause the menu to move, the cursor is still also moving and no longer over the icon I wish to click. If I based it on .scroll(), then the containing div would have to be scrollable (which would show the scrollbars).
So: Is there...
a) an example of this already done somewhere? or
b) a way to make a div scrollable but without showing the scrollbars
This site is being used in a specific way for a specific purpose, so please don't reply just to tell me that hidden scrollbars on a scrollable div is bad juju/annoying for the users.
I found something called "Web In Touch". Could this help?
Many MANY thanks in advance.
http://www.jacksasylum.eu/ContentFlow/
Have you tried content flow? It can do horizontal scrolling for you on button presses (and you can map this to something else). I understand this isn't what you want exactly, but it might work, since you want to horizontally flow/scroll image icons.