I'm currently testing the scroll animation tutorial from https://css-tricks.com/lets-make-one-of-those-fancy-scrolling-animations-used-on-apple-product-pages/
On codepen: https://codepen.io/j-v-w/pen/ZEbGzyv
Everything works so far, but how do I make it possible to scroll to the content below after the scrolling animation ends?
For example I simply want to add further content after the canvas element:
<canvas id="hero-lightpass" />
<div>example content</div>
Great thanks for any ideas!
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>
I need to create an image accordion where it will be controlled by page scroll, like when you scroll your page and the accordion start it start to open and close horizontally while you still 'scrolling down' the page, after all, images open it continues to scroll vertically the page.
on the image you can see like when you scroll down the images should open one by one until finish.
If anyone has a solution for that and could share. Thanks!
The accordion should look like this
You can play around with slick.js https://kenwheeler.github.io/slick/ it's open source and has custom events. Here is working codepen demo: https://codepen.io/webisora/pen/EwQoMR
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.
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've recently implemented flexslider for a full screen slideshow effect.
www.ianandtaylor.com
I had to implement some hackarounds to get vertical scrolling for flexslider slide content, however the scroll wheel doesn't appear to always work when I attempt to scroll. Touch and keyboard scrolling seem just fine, but the scroll wheel is very inconsistent. Sometimes, if I go into my inspection tool and flip some CSS rule on or off for the slide element, the scrolling starts working fine (not sure why).
Ultimately, I just want to have a simple, easy scroll working on the Engagement Photos and Location & Event details slides.
Any help here would be most appreciated.
As i understand it, you want it to slide vertical when you scroll.
That can give some complications with the gallery you have, so when you
scroll it will either stop sliding when you reach the gallery or it will
just continue and disable the scrolling through gallery.