We have a web page in which we are trying to show a side-bar.
This one should push the page increasing its right margin, as show in this example.
As you can see if you open the side-bar while the slide image hasn't changed it's more fluid than doing it when new images have appeared.
Our problem is caused by the slideshow, as we start with just one animation but, after a delay new animations are been launching, going to six (three slides and three text divs), and this makes the side-bar to be less fluid.
Is there any possible solution to prevent this happening or make the animations and transitions more fluid? If possible I'd like not using javascript.
Related
I have a responsiveness issue on a website that I am repairing. And I have no idea what could be going on.
The website in question is this: https://remolquescuni.com/remolque.../power-box-eco/
It has several responsiveness problems, but to play the one I'm talking about, you have to view the website in a small screen size. (For example, 450 x 760)
You will see that there is a carousel of product images, but the horizontal scroll to navigate between them does not work. It moves the top image (which it shouldn't) and doesn't move the bottom ones.
But, if you keep pressing the shift button + the mouse wheel you can move it perfectly.
carousel of product images
That could be happening? Any ideas?
The web is built on WordPress, with Elementor.
I'm improving the general responsiveness, but with this specific problem I don't know what to do.
Excuse me that I don't know much JavaScript since I'm a designer.
I have two animations in relative mode which, when you initially view them are displayed at their end keyframe even though they're supposed to be at their start keyframe (at that point in the scrolling). If you resize the browser window in any way, they assume their correct behavior and jump back to the start keyframe where they're supposed to be. However, if you refresh the page again they always load at the end keyframe, which makes me think that they're getting the wrong viewport size or scrolling position.
Here is the site: http://vostrocity.dreamhosters.com/#skills
For example, the following displays only its end keyframe unless I resize the window:
<div id="venn-prototyping" class="venn"
data-100-top-top="transform[swing]:translate(0px,0px);"
data--100-top-bottom="transform[swing]:translate(-290px,600px);">
<h2>Prototyping</h2>
</div>
I have one animation in absolute mode which works fine without resizing the browser window.
Make sure you initialize skrollr when all images, which affect layout, are loaded. For example inside of the examples element, there are images which affect the height of the parent and thus the position of your venn diagrams relative to the viewport (as soon as the images are loaded, your diagram moves down). Your diagram is actually animating, but before it enters the viewport, because of this offset.
What is that Navigation style that is implemented in 75% of all WP7 apps such as email, Images ,where you slide left and right, and as you do, you can see half of one page and half of the other, as one page fades out and the other fades , as if somehow all pages where one big circular roll.Here i was used pivot control for swipe images one by one.
I have tried the slide transition, but it definitely does a jagged approach when sliding out of one and sliding into the other, and you don't see the two merged together.how to solve these issue.
What you are looking for is a Panorama page or a page with a Pivot control.
I have been at this for 10 hours straight, I have tried different types of positiong, but it's just not working. I can't replicate this interesting effect where you scroll down the page and the navigation changes from a transparent background, to a white background. The example can be found at http://www.bakkenbaeck.no/ Can anybody point me in the right direction?
TL;DR This effect is accomplished with not only HTML and CSS but also needs some JS to pull this one off.
I am guessing a little bit as to what you are referring to specifically on that example you gave but I will assume for this post that you are referring to the change that happens once the user scrolls down past the initial full height image where you see the logo change from white to gray and the background of this nav area turns white.
Not knowing your skill level/knowledge its a bit tough to make assumptions about what is going to give you direction, but I'll try my best. What is happening here is the creative use of CSS z-index, some javascript, and duplicate menus. If you think of a web page as a stack of paper, then the first piece of paper is the menu which is on top of the second page, the opening image, then the third page, the the next (duplicate) menu. The duplicate menu is positioned exactly under the first menu. As you scroll down you remove that middle image layer and the new navigation is exposed via some JS. There is a page scroll event listener (javascript) that is checking where the page is currently scrolled to. Once the user reaches the point where the logo and navigation need to start changing, the javascript kicks in and starts to set the height of the first navigation to 1px smaller for every 1px past the scroll point you've gone all the way until it gets a height of 0px effectively hiding it. If you take a look inside of chrome web tools by inspecting both navigations, you can see this happening (the height of the navigation shrinks) as you scroll.
I can see that the site is using http://pagescroller.com/ which is probably the plugin they are using to trigger the height adjustments I was describing.
Hope that gives you some direction!
Reaserch Paralax scrolling if you not familiar with js there are numerous tutorials online and you will find it very easy if you follow them step by step here are some that I have used:
http://www.impressivewebs.com/parallax-scrolling-scripts-plugins/
It's really easy don't let jQuery intimidate you there is plenty examples on google!
I have an html5 page where I need to develop a small test. There's 2 columns with several buttons and whenever you click on one and drag the mouse, a line follows the mouse movement until it's released, snapping to the next button or getting erased.
I'm using divs for the buttons, since this is to be later delivered to a design crew and they need to be able to change images, texts and placements with css.
My problem is with canvas. I can't place it over the divs, so they don't cover the lines. I've tried svg too, but it has the same problem.
A coworker found the answer. Apparently I needed to use position AND z-index on the css for the canvas to be placed on the layer properly. Go figure