i have code structure like this
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="horizontal-gallery">
<img>
<img>
<img>
<img>
<img>
</div>
<div class="content"></div>
<div class="content"></div>
and i need to start horizontal scrolling my gallery and when it ends need to scroll down page as usual. how i can change vertical scroll to horizontal when reach gallery and after turn back to vertical scrolling? so i dont have any ideas
You'll have to do some interesting juggling here.
When the page loads, set overflow-x to none (or the width of the gallery to fit the page)
When the gallery comes into view (which you'll have to monitor for via JS or similar) you'll have to revert #1 above (overflow-x: auto or set the width)
Basically, you want the page to dynamically enable/disable horizontal scrolling. The only way to do that is to monitor for when that needs to apply and apply it yourself.
Related
I have a code Codepen. The problem is parallax stop working when i'm adding two divs related to smooth scroll script. How to fix this problem? I need smooth scroll working with parallax effect. Thanks.
Remove two first divs "data-scroll" and "data-scroll-content" to see what's the problem.
<section id="00">
<div class="parallax-div parallax-div-00">
<div class="leading-statement statement-00">
<p data-aos="fade-up"> Parallax Scrolling </p>
</div>
From a quick search here and in Google I realised that it is not possible to put fullpage.js in a container, hence the name fullpage.js
Unfortunately I have to find a solution for my project. I want normal scroll on my entire website, but a specific div should have the fullpage.js "slideshow" effect, that when you scroll a bit, the whole section is moving to the other direction. I tried doing it myself with a lot of javascript calculations (scroll direction, binding and unbinding scroll events etc), but Its out of the scope of this project budget.
So my question is: is there a way to hack it around with fullpage.js or maybe with another plugin? I found scrollify, but it is basically the same.
Here is an HTML Code to show exactly what I mean
<body>
<h1>Some website</h1>
<h2>I want to scroll it normal</h2>
<div id="fullpage">
<!-- Only here should the slides scroll with the desired effect -->
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>
</body>
Any kind of help would be appreciated. Here is a video showing exactly what am looking for.
I'm kind of a noob to website development so I'm not sure how to read the massive CSS file. Basically, I want my image slider on the homepage to be centered and not toward the left side of the page. I looked at some code by the inspect tool but I couldn't figure out where to make changes to make the body aligned center only for the homepage.
My website is www.indiacanada.net
Any help would be appreciated!
add class "col-md-offset-2" for the below DIV wich contains the slider.
<div class="col-md-8 la-content-inside col-md-offset-2">
And remove the below empty element.
<div class="col-md-4 left_sidebar"><aside id="la-right" role="complementary"></aside></div>
Hello Stackoverflowers,
First of all thank you for reading this post. I am having a rough time trying to figure out how to make my Cycle 2 slideshow images shrink and move the images next to the other divs while resizing windows. The funny thing is that when the slide show has only one png the image moves next to all other divs while resizing, but when I add another image to the slide show all the images stays in its own position and doesn't move with the shrink.
here is my code for the Sector:
<div id="clientscont">
<div class="Title2">Clients</div>
<div id="container">
<div id="wrapper"> <div class="controller" id="prev2"></div><div class="controller" id="next2"></div></div>
<div id="slider2">
<img src="../image1.png" alt="" width="265" height="116" class="logoclient2"/>
<img src="../image2.png"/>
</div>
</div>
</div>
I tried everything in positioning and display modes and even tried making them separate divs with different attributes....but can't make it work. I really need your help, I thank you all in advance.
*For Cycle I am using jquery
Solved,
changing css attribute to list-Item display solved the issue, it is the only display mode that worked, to solve the bullet problem just changed the font color to the actual background color to hide the bullet. Now both images stayed centered while shrinking page. The truth is that i don't know the reason of this, if somebody could explain it would be perfect!
ShaloM! and Happy Coding!
I built a very simple website with skrollr using fixed-position based, full-screen panels that I scroll by transform:translating and I want to add a nav bar. Am I right that I cannot use skrollr-menu for this type of setup?
Is it possible to use animateTo on a click event to navigate a certain panel?
For example, to get to page 2, can I just make a button that animates to 100p?
<div id="page1" data-0="transform:translate(0,0%);" data-100p="transform:translate(0,-100%);">
<div id="page2" data-0="transform:translate(0,100%);" data-100p="transform:translate(0,0%);">
Thanks.
Yes you can. With the latest skrollr-menu you can use percentages as well
page 2