I'm currently working on a landing page using React and Next and what I'm trying to achieve is
I have a hero where everytime the page load for the first time it shows only a logo in the center and this logo slowly slides up and while the logo is sliding up I have another animation where I see one text slides from left to right and another text slides to right to left, all of this stays in the middle and the logo stays at the top.. after I think 2s I have another animation that is more like a blink when this blink happens it appears some text and a button and after 1s happens another blink that make the logo dissapears, I'm trying to figure out how to do all of this with sass, sorry if it's a little bit confusing😅 this is my first time doing this type of animations and I'm trying to figure out how to show only the logo everytime the page loads for the first time.
Here is a codepen with what I'm trying to achieve, thanks
[Codepen](https://codepen.io/Alissonicole/pen/YzvPZzg?editors=1100).
Related
I am trying to build a sliding animation on a landing page, The functionality I am trying to build is as follows.
When a user lands on a landing page they should see the div which will contain an image and content and when they scroll the divs should slide horizontally once the specified divs are finished they should continue to the remaining page.
I have the reference below.
https://ivang-design.com/euthenia/
Thank You
While animating a page transition I noticed a weird behavior.
On mobile... when I start a page from translate(%100,0); it starts from its beginning position and animates out of view to the left instead of starting from outside of view to the left... and animating to the center of view.
You can see the issue live at dbz-test.myshopify.com.
The animation works perfectly on desktop... but try it from your phone.
If I make a div that has 50x50px dimension, and I make an image (sprite) that has 50x100px dimension. Then one image is on top of the other.
Now, if I make a hover effect on the div, where the image should change, I would just change the background position from top to bottom as an example. Then when I hover the image changes and so on. Easy...
But, if I use a transition timer, then I will see the image move from the top, to the bottom.
My question is: Is it possible via sprites to make fades instead ? I mean, lets say I have an image that changes color. Then I don't want it to like like the image is going up and down, but just fade in the color of the other image and so on.
Is that possible via sprites, or do I really have to just onclick-change-image events etc. ?
Thanks in advance.
I am just a noob and want to ask that in my centralized image slider, I want that some image or text to appear to the right or some palce in my web page based on top or bottom half of the sliding image being hovered. Please, tell me how to do that ?
I've started playing around with transitions and have come up against quite a big problem. I have a set of divs that transition from 0 to 1 opacity when the user hovers over them, the problem is that when the fixed div that contains my site's navigation is on top of them they overlap it - meaning the user cant click on the navigation, as shown on the right of the image below:
When the transition finishes it goes back to its normal state (like on the left of that image) but as soon as the mouse moves the whole thing starts again so its impossible to click on the navigation. Is there any solution to this? Or would a jQuery alternative be the answer?
I can post the code Im using if it's of any use.
Set your header z-index. That should solve the problem.
header{
z-index:999;
}